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

​

let t, mx, my;

const frames = 1500;

const count = 2000;

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 r = 0.35;

    const r2 = 0.15;

    const twist = 0.5;

    const _f = f * twist + t;

    const x1 =  r + _sin(_f) * r2;

    const wob1 = _cos(_f) * r2 * 2;

    const x2 =  r + _sin(_f  + 0.5) * r2;

    const wob2 = _cos(_f + 0.5) * r2 * 2;

    let p1 = add(

      rotY({x: x1, y: 0, z: 0}, f),

      {x: 0, y: wob1, z: 0}

    )

   let p2 = add(

      rotY({x: x2, y: 0, z: 0}, f),

      {x: 0, y: wob2, z: 0}

    )  

    return {p1, p2};

  });

}

​

function windowResized() {

  const size = min(windowWidth, windowHeight);

  resizeCanvas(size, size);

}

​

function draw() {

​

  t = (frameCount / frames);

  // t = fract(frameCount / frames);

  // t = mouseX / width;

  mx = mouseX / width;

  my = 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(p, {x: cX, y: cY, z: cZ}) {

  const a = t;

  p = rotZ(p, t * PI);

  p = rotY(p, t / PI);

  p = rotX(p, t);

  // p = rotZ(p, my);

  // p = rotY(p, mx);

  // p = rotX(p, my);

​

  let {x, y, z} = p;

  z += D;

  const F = z - cZ;

  return {

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

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

  }

}

​

function rotZ({x, y, z}, a) {

  return {

    x: x * _cos(a) - y * _sin(a),

    y: x * _sin(a) + y * _cos(a),

    z: z,

  }

}

​

function rotY({x, y, z}, a) {

  return {

    x: x * _cos(a) + z * _sin(a),

    y: y,

    z: -x * _sin(a) + z * _cos(a),

  }

}

​

​

function rotX({x, y, z}, a) {

  return {

    x: x,

    y: y * _cos(a) - z * _sin(a),

    z: y * _sin(a) + z * _cos(a),

  }

}

​

function add(p1, p2) {

  return { 

    x: p1.x + p2.x,

    y: p1.y + p2.y,

    z: p1.z + p2.z,

  } 

}

​

function multV(p1, v) {

  return { 

    x: p1.x * v,

    y: p1.y * v,

    z: p1.z * v,

  } 

}

​

​

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);

}