dev_PARTY #006

Interactive NFT by @andriibakulin

let gPoints = []; let gLines = [];

let gDistanceRange, gDistanceRangeSqr;

class EntityPoint { constructor(index) { this.index = index;

    this.x = Math.random() * window.innerWidth;
    this.y = Math.random() * window.innerHeight;
    this.x_offset = 0;
    this.y_offset = 0;
    this.x_last_draw = this.x;
    this.y_last_draw = this.y;

    const c = Math.random();
    this.color_base = color(c * 255, 255, 255);
    this.color_line = color(c * 255, 255, 255);
    this.color_back = color(c * 255, 255, 255, 111);

    this.offset = Math.random() * 123;
    this.speed  = 0.5 + Math.random() * 4.5 * (Math.random() < 0.5 ? -1 : +1);
    this.radius = 1.0 + Math.random() * 29;

    this.activeForce = 0;
}

getX()
{
    return this.x + this.x_offset;
}

getY()
{
    return this.y + this.y_offset;
}

next(dt)
{
    this.offset += dt * this.speed * (1 + this.activeForce);
    this.x_offset = Math.sin(this.offset) * this.radius;
    this.y_offset = Math.cos(this.offset) * this.radius;
}

distanceSqr(x, y)
{
    return (x - this.getX())**2 + (y - this.getY())**2;
}

}

class EntityLine { constructor(p1, p2) { this.p1 = p1; this.p2 = p2; this.w = Math.random() < 0.5 ? 1 : 2;

    this.v = 0;
    this.t = Math.random() * 3 + 1;
}

next(dt)
{
    this.v += dt;
    return this.v < this.t;
}

render()
{
    let t0 = this.v/this.t;
    let t1 = t0 * 2;

    if (t1 > 1)
        t1 = 2 - t1;

    let col = lerpColor(this.p1.color_line, this.p2.color_line, t0);

    strokeWeight(this.w);
    stroke(lerpColor(gNullColor, col, t1));

    line(
        this.p1.x_last_draw, this.p1.y_last_draw,
        this.p2.x_last_draw, this.p2.y_last_draw);
}

}

function setup() { gNullColor = color(0,0,0,0);

createCanvas(window.innerWidth, window.innerHeight)

pixelDensity(1);
frameRate(60);

angleMode(DEGREES);

setupWorkingAreaAndData();

}

function windowResized() { resizeCanvas(window.innerWidth, window.innerHeight);

setupWorkingAreaAndData();

}

function setupWorkingAreaAndData() { gDistanceRange = Math.min(window.innerWidth, window.innerHeight)*0.33; gDistanceRangeSqr = gDistanceRange ** 2;

background(0);

gPoints = [];
gLines = [];

colorMode(HSB, 255);
for (let index=0; index<30; index++)
{
    gPoints.push(new EntityPoint(index));
}
colorMode(RGB, 255);

}

function draw() { const dt = deltaTime/1000;

background(0);

if (gLines.length < 16)
{
    const p1 = gPoints[floor(Math.random()*gPoints.length)];
    const p2 = gPoints[floor(Math.random()*gPoints.length)];
    gLines.push(new EntityLine(p1, p2));
}

for (const idx in gLines)
{
    const line = gLines[idx];

    if (line.next(dt))
        line.render();
    else
        gLines.splice(idx, 1);
}

for (const idx in gPoints)
{
    const point = gPoints[idx];
    point.next(dt);

    let point_x = point.getX();
    let point_y = point.getY();
    let point_s = 5;

    if (mouseIsPressed)
    {
        const entDistanceSqr = point.distanceSqr(mouseX, mouseY);

        if (entDistanceSqr < gDistanceRangeSqr)
        {
            const entDistance = Math.sqrt(entDistanceSqr);
            const dst = entDistance / gDistanceRange;
            const frc = 1 - dst;

            point.activeForce = frc;

            point_x = lerp(point_x, mouseX, frc);
            point_y = lerp(point_y, mouseY, frc);

            const dx = point_x - mouseX;
            const dy = point_y - mouseY;

            noStroke();
            fill(lerpColor(point.color_back, color(0,0,0,0), dst));

            circle(
                point_x - dx * dst * 3,
                point_y - dy * dst * 3,
                gDistanceRange * (point.radius/10) * frc);

            point_s *= (frc + 1)**2;
        }
    }
    else
    {
        point.activeForce = 0;
    }

    noStroke();
    fill(point.color_base);
    circle(point_x, point_y, point_s);

    point.x_last_draw = point_x;
    point.y_last_draw = point_y;
}

} </code>