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>
