torus

/*

based on https://gist.github.com/beesandbombs/f341a5728cf090189f37f51597541624

*/

​

const sketch = {

  fps: 30, // frames per second

  fpp: () => 30 * 5, // frames per period

};

​

let clock;

let bg, c1, c2, c3, c4

const size = 300;

​

function setup() {

  createCanvas(size, size, WEBGL);

  colorMode(HSB);

  clock = new PeriodicFrameClock(sketch.fpp());

​

  smooth();

  noFill();

  strokeWeight(0.4);

  blendMode(ADD);

​

  bg = color([0, 0, 10]);

  c1 = color([12, 100, 100]);

  c2 = color([102, 100, 100]);

  c3 = color([192, 100, 100]);

  c4 = color([282, 100, 100]);

}

​

const radius = 100;

const hexagonRadius = radius / 4;

const numberOfPoints = 240;

​

function draw() {

  background(bg);

  const t = clock.time();

  for (let i = 0; i < numberOfPoints; i++) {

    const p = i / numberOfPoints;

    const theta = TAU * p;

​

    const x = -radius * cos(theta) * clock.sin(t);

    const y = radius * sin(theta);

    const z = radius * cos(theta) * clock.cos(t);

​

    drawHexagon(x, y, z, p);

  }

}

​

function drawHexagon(x, y, z, p) {

  const r = hexagonRadius / (1 + 0.01 * z);

  const rp = ease(map(r, hexagonRadius, 2.01 * hexagonRadius, 0, 1));

  const rotation = -TAU * p;

  push();

  translate(x, y);

  beginShape();

  for (let i = 0; i <= TAU; i += TAU / 6) {

    const theta = i + rotation;

    const color = getColor(p, rp);

    stroke(color);

    vertex(r * cos(theta), r * sin(theta));

  }

  endShape();

  pop();

}

​

function ease(p) {

  p = constrain(p, 0, 1);

  return 3 * pow(p, 2) - 2 * pow(p, 3);

}

​

function getColor(p, rp) {

  let c;

  constrain(p, 0, 1);

  if (p < 0.25) {

    c = lerpColor(c1, c2, map(p, 0, 0.25, 0, 1));

  } else if (p < 0.45) {

    c = lerpColor(c2, c3, map(p, 0.25, 0.45, 0, 1));

  } else if (p < 0.75) {

    c = lerpColor(c3, c4, map(p, 0.45, 0.75, 0, 1));

  } else {

    c = lerpColor(c4, c1, map(p, 0.75, 1.0, 0, 1));

  }

  const b = map(rp, 0, 1, 0.85, 1) * brightness(c);

  const a = map(rp, 0, 1, 0.5, 0.08);

  return [hue(c),

    saturation(c),

    b,

    a

  ];

}