const FRAMESPERSTAGE = 200;

const FRAMES = FRAMESPERSTAGE * STAGES;

const FPS = 24;

​

let rec;

​

function setup() {

  const canvas = createCanvas(1080, 1920);

  frameRate(FPS);

​

  rec = setupRecording("test", canvas, FRAMES, {

    avi: {

      fps: FPS,

      quality: 0.92,

    }

  });

}

​

function keyPressed(evt) {

  if(evt.key == "Enter"){

    if(!rec.recording){

      rec.start();

    }else{

      rec.stop();

    }

  }

}

​

let step = 0;

let t;

function draw() {

  step = floor(frameCount / FRAMESPERSTAGE);

  t = fract(frameCount / FRAMESPERSTAGE);

  console.log(frameCount, step, t)

  // when we count FRAMESPERSTAGE, step = 1, before that = 0, and so on

  // so, step  = 1, means we are in the second milestone

  // your milestone goes here

  background(0)

  m[step]?.(t)

  // then, you save the frame

  if(rec.recording){

    rec.recordFrame();

  }

}

​

​

​

function m2(){

  noStroke()

  fill(255*sin(millis()/1000), 255*cos(millis()/1000), 255*sin(2*millis()/1000))

  square(width / 2, height / 2, 500*sin(millis()/1000))

}

​

let m = [m2, m1]