dev_PARTY #005

Interactive NFT by @andriibakulin

<code> let entities = []; let global_x, global_y, global_s;

class Entity { constructor(index) { this.index = index; this.color = 0; this.offset = 0; }

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

render(index)
{
    const c0 = Mathf_Repeat(this.color/3 + index * 5, 255);

    let x = global_x * 10 * index + Math.sin(this.offset*0.33) * 50;
    let y = global_y * 10 * index - Math.cos(this.offset*0.33) * 50;
    let w = Math.sin(this.offset + this.index * global_x * 0.1) * global_s * (1 - index * 0.01);
    let h = Math.cos(this.offset + this.index * global_y * 0.2) * global_s * (1 - index * 0.01);

    fill(c0, 255, 128, 12);
    stroke(c0, 255, 255);
    strokeWeight(1);

    resetMatrix();
    translate(window.innerWidth / 2, window.innerHeight / 2);
    ellipse(x, y, w, h);
}

}

function setup() { global_x = -0.25; global_y = +0.25; global_s = Math.min(window.innerWidth, window.innerHeight) * 0.8;

createCanvas(window.innerWidth, window.innerHeight)

pixelDensity(1);
frameRate(60);

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

background(0);

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

}

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

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

if (mouseIsPressed)
{
    global_x = (mouseX / window.innerWidth  - 0.5) * 2;
    global_y = (mouseY / window.innerHeight - 0.5) * 2;
    global_s = Math.min(window.innerWidth, window.innerHeight) * 0.8;
}

background(0);

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

} </code>