Interactive NFT by @andriibakulin
<code>
const gCount = 48;
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>
