​

function setup() {

  createCanvas(100, 100);  

  windowResized();

  colorMode(HSB, 1);

}

​

function windowResized() {

  const size = min(windowWidth, windowHeight);

  resizeCanvas(size, size);  

}

​

function constructShape(steps, obj, fn) {  

  let shape = [];

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

    shape.push(obj);

    obj = fn(obj);

  }

  return shape;

}

​

function lerpShape(shape, f) {

  const v = f * shape.length;

  const i1 = constrain(floor(v), 0, shape.length-1)

  const i2 = constrain(ceil(v) , 0, shape.length-1)

  const p1 = shape[i1];

  const p2 = shape[i2];

​

  const lf = fract(v);

  return {

    x: lerp(p1.x, p2.x, lf) * 0.5 + 0.25,

    y: lerp(p1.y, p2.y, lf) * 0.5 + 0.25,

  }

}

​

let t = 0;

let mx, my;

let opacity = 1;

function draw() {

  t = frameCount / frames;

  mx = mouseX / width;

  my = mouseY / height;

  background(0);

  noFill();

  const lt = t  

  const start = 34;

  const stop = 35;

  const steps = 131;

  strokeWeight(1);

  const count = 25;

  const offset = -0.05;

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

    const f = i / count;

    opacity = 5 / count;

    const drawSteps = lerp(start, stop, invCosn(f * offset + lt));

    drawShape(

      steps,

      drawSteps

    );

  }

  strokeWeight(5);

  opacity = 1;

  const drawSteps = lerp(start, stop, invCosn(lt));

  drawShape(

    steps,

    drawSteps

  );

​

​

  // noLoop();

}

​

function update(obj) {

   let { x, y, xVel, yVel } = obj;

    if (x >= 1 || x < 0) {

      xVel *= -1;

    }

    if (y >= 1 || y < 0) {

      yVel *= -1;

    }

    x += xVel;

    y += yVel;

    return { x, y, xVel, yVel };

}

​

function drawShape(steps, drawSteps) {

  const lt = 1; //invCosn(t);

  const v = lt * 0.1;

  const initial = {

    x: 0.0001, y: 0,

    xVel: 0.1, yVel: 0.1,

  }

​

  let shape = constructShape(steps, initial, update);

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

    const f = i / drawSteps;

    const sstep = lt / drawSteps;

    const sf = i * sstep;

    let p1 = lerpShape(shape, sf - 1 * sstep);

    let p2 = lerpShape(shape, sf + 0 * sstep);

    let p3 = lerpShape(shape, sf + 1 * sstep);

    let p4 = lerpShape(shape, sf + 2 * sstep);

​

    const hue = fract(f * 0.5 - 0.4);

    stroke(hue, 0.75, 1, opacity);

    // circle(

    //   p1.x * width,

    //   p1.y * height,

    //   10

    // );

    // line(

    //   p1.x * width,

    //   p1.y * height,

    //   p2.x * width,

    //   p2.y * height

    // );

    curve(

      p1.x * width, p1.y * height,

      p2.x * width, p2.y * height,

      p3.x * width, p3.y * height,

      p4.x * width, p4.y * height

    )

  }

}

​

function cosn(v) {

  return cos(v * TAU) * 0.5 + 0.5;

}

function invCosn(v) {

  return 1 - cosn(v);

}