Interactive NFT by @andriibakulin
<code>
let gEntities = [];
let gOffsetX = 0.5;
let gOffsetY = 0.5;
class Entity
{
constructor(index, count)
{
this.seqOffset = index / count;
this.offset = 0;
}
next(dt)
{
this.offset += dt;
}
render()
{
const baseLen = Math.min(window.innerWidth, window.innerHeight);
noFill();
stroke(this.seqOffset * 255, 255, 255);
strokeWeight(1);
resetMatrix();
translate(window.innerWidth / 2, window.innerHeight / 2);
rotate(this.seqOffset * 360 + this.offset * 30);
let radius1 = baseLen / 5 + ((gOffsetX-0.5)*2) * 200 - gOffsetY * 100;
let radius2 = baseLen / 8 - gOffsetY * 100;
for (let i=0; i<8; i++)
{
let dx = Math.sin(this.offset * 2) * i * baseLen/25 * (gOffsetY + 0.5);
circle(baseLen * 0.25 + dx, 0, lerp(radius1, radius2, i/8));
}
}
}
function setup()
{
createCanvas(window.innerWidth, window.innerHeight)
pixelDensity(1);
frameRate(60);
colorMode(HSB, 255);
angleMode(DEGREES);
background(0);
for (let index=0; index<16; index++)
{
gEntities.push(new Entity(index, 16));
}
}
function windowResized()
{
resizeCanvas(window.innerWidth, window.innerHeight);
}
function draw()
{
const winW = window.innerWidth;
const winH = window.innerHeight;
const dt = deltaTime/1000;
if (mouseIsPressed)
{
gOffsetX = mouseX / winW;
gOffsetY = mouseY / winH;
}
background(0);
for (var idx in gEntities)
{
const ent = gEntities[idx];
ent.render();
ent.next(dt);
}
// Show controls...
const size = 10;
const half = size/2;
const round = size/4;
resetMatrix();
fill(0,0,255);
noStroke();
square(winW * gOffsetX - half, 0 - half, size, round);
square(winW * gOffsetX - half, winH - half, size, round);
square(0 - half, winH * gOffsetY - half, size, round);
square(winW - half, winH * gOffsetY - half, size, round);
}
</code>
