const cam = { x: 0, y: 0, z: 1};

​

let t;

const frames = 100;

const count = 6000;

const alpha = 0.1;

const weight = 1;

const radius = 2;

const PHI = (1 + Math.sqrt(5)) / 2;

const sat = 0.75;

​

function setup() {

  createCanvas(400, 400);

  windowResized();

  colorMode(HSB, 1);

  setupLines();

}

​

function setupLines() {

  const mx =  mouseX / width;

  const my =  mouseY / height;

  const _t = invCosn(t);

  lines = new Array(count).fill(null).map((_, i) => {

    const f = i / count;

    const mr1 = 0.3;

    const mr2 = 0.5;

    const r =  lerp(mr1, mr2, sinn(f / 2));    

    const a1 = f;

    const a2 = my + lerp(mr1, mr2, sinn(f / 2));

    const a3 = mx;

    const _r = lerp(mr1, mr2, sinn(f / 2 + 0.5)); 

    const _a1 = f;

    const _a2 = my + lerp(mr1, mr2, sinn(f / 2 + 0.5));

    const _a3 = mx;

​

    const waves = 1;

    return {

        p1: { 

          z:  _cos(a1) * _cos(a2) * r,

          y: _sin(a1) * _cos(a2) * r,

          x:  _cos(a1 + a3)  * mr1,

        },

        p2: { 

          z:  _cos(_a1) * _cos(_a2) * _r,

          y: _sin(_a1) * _cos(_a2) * _r,

          x:  _cos(_a1 + _a3) * mr2,

       }}

  });

}

​

function windowResized() {

  const size = min(windowWidth, windowHeight);

  resizeCanvas(size, size);

}

​

function draw() {

​

  t = fract(frameCount / frames);

  // t = mouseX / width;

  const vY = mouseY / height;

  setupLines();

  blendMode(BLEND);

  background(0);

  blendMode(LIGHTEST);

  strokeWeight(weight);

  lines.forEach((l, i) => {

    let _l = project3DLine(l.p1, l.p2, cam);

    const f = i / lines.length;

    const hue = fract(f); 

    stroke(hue, sat, 1, alpha);

​

    line(

      _l.p1.x * width, 

      _l.p1.y * height, 

      _l.p2.x * width, 

      _l.p2.y * height

    );

    noStroke();

    fill(hue, sat, 1, alpha * 2);

    const r = radius; // * len(l.p1, l.p2);

    circle(

      _l.p1.x * width, 

      _l.p1.y * width, 

      r

    );

    circle(

      _l.p2.x * width, 

      _l.p2.y * width, 

      r

    );

  });

}

​

function len(p1, p2) {

  return sqrt(

    pow(p1.x - p2.x, 2) +

    pow(p1.y - p2.y, 2) +

    pow(p1.z - p2.z, 2)

  );

}

​

function project3DLine(p1, p2, cam) {

  return { 

    p1: project3DPoint(p1, cam),

    p2: project3DPoint(p2, cam)

  }

}

​

const D = 10;

function project3DPoint({x, y, z}, {x: cX, y: cY, z: cZ}) {

  z += D;

  const F = z - cZ;

  return {

    x: (x - cX) * (F / z) + cX + 0.5,

    y: (y - cY) * (F / z) + cY + 0.5,

  }

}

​

function _sin(v) {

  return sin(v * TAU);

}

function _cos(v) {

  return cos(v * TAU);

}

​

function sinn(v) {

  return _sin(v) * 0.5 + 0.5;

}

function cosn(v) {

  return _cos(v) * 0.5 + 0.5

}

function invCosn(v) {

  return 1 - cosn(v);

}