createCanvas(windowHeight * 0.5, windowHeight);

}

​

let t;

let frames = 250;

function draw() {

  t = fract(frameCount / frames);

  background(0);

  noStroke();

  fill(0);

  stroke(255);

  const funcs = [saw, tri, sinn, cosn, invCosn];

  let h = 0.5 / funcs.length;

  funcs.forEach((func, i) => {

    let offset = (i + 0.25) * (h * 2);

    const steps = 100;

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

      let f = x / steps;

      let f2 = (x + 1) / steps;

      line(

        f * width, 

        (offset + (1 - func(f)) * h) * height,

        f2 * width, 

        (offset + (1 - func(f2)) * h) * height

      );

    }

    fill(0);

    stroke(255,255,255);

​

    circle(

      0.5 * width, 

      (offset + 0.5 * h) * height,

      50 * func(t)

    );

    circle(

      func(t) * width, 

      (offset + 0.5 * h) * height,

      25

    );

    // fill(255);

    circle(

      t * width, 

      (offset + (1 - func(t)) * h) * height,

      10

    );

​

  });

}

​

const saw = (v) => fract(v);

const tri = (v) => 1 - abs(1 - fract(v) * 2);

const ssin = (v) => sin(v * TWO_PI);

const scos = (v) => cos(v * TWO_PI);

const sinn = (v) => ssin(v) * 0.5 + 0.5;

const cosn = (v) => scos(v) * 0.5 + 0.5;

const invCosn = (v) => 1 - cosn(v);

​