Interactive NFT by @andriibakulin
<code>
const ITEMS_COUNT = 48;
let gEntities = [];
let gSizeArea;
let gSizePoints, gSizeDashes;
let gDistance, gDistanceSqr;
// MagicLogic
class Entity
{
constructor(index, count, xOffset, yOffset, radius, direction)
{
const seq01 = index / count;
this.xOffset = xOffset;
this.yOffset = yOffset;
this.radius = radius;
this.direction = direction;
this.color = seq01 * 255;
this.offset = seq01 * Math.PI;
this.angel = seq01 * Math.PI * 2;
this.power = new SmoothValue();
// Dynamic vars
this.circleX = this.circleY = null;
this.drawAtX = this.drawAtY = null;
this.colorV = null;
}
next(dt)
{
this.color += dt * 128;
this.offset += dt;
this.angel -= dt / 2;
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// Update dynamic attrs
const radius = gSizeArea * this.radius;
this.circleX = Math.sin(this.angel * this.direction) * radius;
this.circleY = Math.cos(this.angel * this.direction) * radius;
this.drawAtX = gSizeArea * this.xOffset + this.circleX;
this.drawAtY = gSizeArea * this.yOffset + this.circleY;
this.colorV = normalizeColorComp(this.color);
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
let dstOffset = 0;
if (mouseIsPressed)
{
const dstLengthSqr = (mouseX-this.drawAtX)**2 + (mouseY-this.drawAtY)**2;
if (dstLengthSqr < gDistanceSqr)
dstOffset = Math.sqrt(dstLengthSqr) / gDistance;
}
if (dstOffset > 0)
this.power.update(1 - dstOffset, 1 * dt);
else
this.power.update(0, 2 * dt);
}
render()
{
const sizePoint033 = gSizePoints/3;
resetMatrix();
translate(this.drawAtX, this.drawAtY);
if (this.power.v > 0)
{
const pointsCount = 5;
for (let i=1; i<=pointsCount; i++)
{
const power = this.power.v * i * 0.33;
strokeWeight(sizePoint033 + pointsCount-i);
stroke(this.colorV, 255, 255);
point(this.circleX * power, this.circleY * power);
}
}
if (this.power.v > 0)
{
strokeWeight(sizePoint033);
stroke(this.colorV, 255, 255, 255 * (1-this.power.v));
line(0,0, -this.circleX * 3 * this.power.v, -this.circleY * 3 * this.power.v);
}
else
{
rotate(360 * this.angel);
strokeWeight(sizePoint033);
stroke(this.colorV, 255, 255);
line(0,0, 0,gSizeDashes * (1-this.power.v));
}
strokeWeight(gSizePoints);
point(0,0);
}
}
// Lifecycle
function setup()
{
updateConsts();
createCanvas(gSizeArea, gSizeArea);
background(0);
pixelDensity(1);
frameRate(60);
colorMode(HSB, 255);
angleMode(DEGREES);
for (let index=0; index<ITEMS_COUNT; index++)
{
for (let angel = 0; angel<360; angel += 120)
{
const x = 0.50 + sin(angel) * 0.2;
const y = 0.55 - cos(angel) * 0.2;
gEntities.push(new Entity(index, ITEMS_COUNT, x, y, 0.2, +1));
}
}
}
function windowResized()
{
updateConsts();
resizeCanvas(gSizeArea, gSizeArea);
}
function draw()
{
const dt = deltaTime/1000;
background(0);
for (const idx in gEntities)
{
const ent = gEntities[idx];
ent.next(dt);
ent.render();
}
}
// Helpers
function updateConsts()
{
gSizeArea = getAreaSize();
gDistance = gSizeArea / 3;
gDistanceSqr = gDistance ** 2;
gSizePoints = clamp(gSizeArea / 66, 5, 12);
gSizeDashes = clamp(gSizeArea / 33, 10, 25);
}
function normalizeColorComp(v)
{
v %= 256;
return v >= 0 ? v : v+256;
}
function getAreaSize()
{
return Math.min(window.innerWidth, window.innerHeight);
}
function clamp(value, min, max)
{
if (value < min) return min;
if (value > max) return max;
return value;
}
// Helpers : Smooth
function smoothValue(v0, v1, delta)
{
if (v0 === null)
return v1;
const dv = v1 - v0;
return Math.abs(dv) <= delta ? v1 : (dv < 0 ? v0 - delta : v0 + delta);
}
class SmoothValue
{
constructor(v=null)
{
this.v = v;
}
update(v, delta)
{
this.v = smoothValue(this.v, v, delta);
}
}
</code>
