dev_PARTY #009

Interactive NFT by @andriibakulin

let gEntities = []; let gOffsetX = 0; let gOffsetY = 0;

class Entity { constructor(index) { this.index = index; this.color = 256/gCount * index; this.offset = 0; }

next(dt)
{
    this.offset += dt;
}

render(index)
{
    const size = Math.min(window.innerWidth, window.innerHeight) * 0.33;

    resetMatrix();

    translate(window.innerWidth / 2, window.innerHeight / 2);
    rotate(360/gCount * index + this.offset * 20 * (1+gOffsetY*0.1));

    noFill();

    for (let i=0; i<=10; i++)
    {
        stroke(this.color, 255, 255, 255 * (10-i)/10);
        strokeWeight((10-i)*0.3)
        circle(size + (gOffsetX - size*0.1) * i * 0.3, gOffsetY, (20+gOffsetX)*i);
        rotate(15);
    }
}

}

function setup() { createCanvas(window.innerWidth, window.innerHeight);

pixelDensity(1);
frameRate(60);

colorMode(HSB, 255);
angleMode(DEGREES);

background(0);

for (let index=0; index<gCount; index++)
{
    gEntities.push(new Entity(index));
}

}

function windowResized() { resizeCanvas(window.innerWidth, window.innerHeight); }

let lastPressedX = null; let lastPressedY = null;

function draw() { const dt = deltaTime/1000;

if (mouseIsPressed)
{
    if (lastPressedX != null)
    {
        gOffsetX += (mouseX - lastPressedX) * 0.2;
        gOffsetY += (mouseY - lastPressedY) * 0.2;
    }

    lastPressedX = mouseX;
    lastPressedY = mouseY;
}
else
{
    gOffsetX = 0;
    gOffsetY = 0;

    lastPressedX = null;
    lastPressedY = null;
}

background(0);

for (const idx in gEntities)
{
    const ent = gEntities[idx];
    ent.render(idx);
    ent.next(dt);
}

} </code>