dev_PARTY #015

Interactive NFT by @andriibakulin

<code> const ITEMS_COUNT = 30;

let gEntities = []; let gSizeArea; let gDistance, gDistanceSqr;

// MagicLogic

class Entity { constructor(seq01, xOffset, yOffset, treeAngle) { this.seq01 = seq01; this.angel = this.seq01 * Math.PI * 2; this.xOffset = xOffset; this.yOffset = yOffset; this.treeAngle = treeAngle;

    this.color = this.seq01 * 255;
    this.alpha = 255;
    this.power = new SmoothValue();

    // Dynamic vars
    this.drawAtX = this.drawAtY = null;
    this.colorV = null;
}

next(dt)
{
    this.color += dt * 128;

    this.drawAtX = gSizeArea * this.xOffset;
    this.drawAtY = gSizeArea * this.yOffset;
    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;

        this.alpha = Math.max(this.alpha - dt*1000, 255 * this.power.v * 2, 32);
        this.alpha = Math.min(this.alpha, 255);
    }
    else
    {
        if (this.alpha < 255)
        {
            this.alpha = this.alpha + dt * 255;
            this.alpha = Math.min(this.alpha, 255);
        }
    }

    if (dstOffset > 0)
        this.power.update(1 - dstOffset, 2 * dt);
    else
        this.power.update(0, 2 * dt);
}

render()
{
    resetMatrix();
    translate(this.drawAtX, this.drawAtY);

    if (this.power.v > 0)
        this.drawBranch(0, 0, gSizeArea*0.125*this.power.v, this.angel + 360*this.seq01, 4);

    strokeWeight(8);
    stroke(this.colorV, 255, 255, this.alpha);
    point(0,0);
}

drawBranch(x, y, len, dir, depth, level=0)
{
    if (len < 10)
        return;

    level++;
    const x2 = x + sin(dir) * len * (this.power.v+0.33);
    const y2 = y + cos(dir) * len * (this.power.v+0.33);

    strokeWeight(2);
    stroke(this.colorV, 255, 255, this.alpha * (1 - level/(depth+1)));
    line(x,y, x2,y2);

    if (level < depth)
    {
        this.drawBranch(x2, y2, len * 0.9, dir + this.treeAngle, depth, level);
        this.drawBranch(x2, y2, len * 0.9, dir - this.treeAngle, depth, level);
    }
}

}

// Lifecycle

function setup() { updateConsts(); createCanvas(gSizeArea, gSizeArea); background(0);

pixelDensity(1);
frameRate(60);
colorMode(HSB, 255);
angleMode(DEGREES);

let count = ITEMS_COUNT;
for (let index=0; index<count; index++)
{
    for (let level=0; level<10; level++)
    {
        let seq01     = index / count;
        let radius    = 0.10 + level*0.08;
        let offsetX   = 0.50 + Math.sin(seq01 * Math.PI * 2) * radius;
        let offsetY   = 0.50 + Math.cos(seq01 * Math.PI * 2) * radius;
        let treeAngle = 25*(level+1);

        if (offsetX < 0.0 || offsetY > 1) continue;
        if (offsetY < 0.0 || offsetY > 1) continue;

        gEntities.push(new Entity(seq01, offsetX, offsetY, treeAngle));
    }
}

}

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 = Math.min(window.innerWidth, window.innerHeight); gDistance = gSizeArea / 3; gDistanceSqr = gDistance ** 2; }

function normalizeColorComp(v) { v %= 256; return v >= 0 ? v : v+256; }

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>