Interactive NFT by @andriibakulin
<code>
let entities = [];
let offset = 0;
class Entity
{
constructor(x, y, color, size, border_radius)
{
this.x = x;
this.y = y;
this.rotation = 0;
this.size = size;
this.color = color;
this.border_radius = border_radius;
}
next(dt)
{
this.rotation += 10;
this.size += dt * 30;
this.color += 10;
}
render(offset)
{
const c0 = Mathf_Repeat(this.color/3 + offset * 1.5, 255);
const c1 = Mathf_PingPong(this.color, 128) + 128;
noFill();
stroke(c0, 255, c1);
strokeWeight(1);
resetMatrix();
translate(this.x, this.y);
rotate(+(this.rotation - offset * 3));
square(-this.size/2, -this.size/2 - this.size*3, this.size, this.border_radius);
square(-this.size/2, -this.size/2 + this.size*3, this.size, this.border_radius);
resetMatrix();
translate(this.x, this.y);
rotate(-(this.rotation - offset * 3));
square(-this.size/2 - this.size*3, -this.size/2, this.size, this.border_radius);
square(-this.size/2 + this.size*3, -this.size/2, this.size, this.border_radius);
}
}
function setup()
{
createCanvas(window.innerWidth, window.innerHeight)
pixelDensity(1);
frameRate(60);
colorMode(HSB, 255);
angleMode(DEGREES);
background(0);
}
function windowResized()
{
resizeCanvas(window.innerWidth, window.innerHeight);
}
function draw()
{
let x = mouseX;
let y = mouseY;
if (x==0 && y==0)
{
x = window.innerWidth/2;
y = window.innerHeight/2;
}
const entity = new Entity(x, y, 50, 5, 10);
entities.push(entity);
if (entities.length > 75)
entities.shift();
const dt = deltaTime/1000;
offset += dt * 100;
background(0);
noFill();
for (var idx in entities)
{
const ent = entities[idx];
ent.render(offset);
ent.next(dt);
}
}
</code>
