createCanvas(400, 400);

}

​

const FRAMES = 200;

const FPS = 60;

​

// good for simulations and real-time renders

// less jittery in case your clock cycles don't line up perfectly (hint: they don't)

// set up not to loop (so t goes beyond 1 after 200 frames)

// if a time loop is required use fract like getFrameT

function getRealtimeT() {

  const totalTime = FRAMES / (FPS / 1000); // in miliseconds

  return millis() / totalTime;

}

​

// good for recording and exact renders

// will give you the same value of t for every frame every time you render

// loops between 0 - 1, so you can see if your render loops perfectly

function getFrameT() {

  return fract(frameCount / FRAMES);

}

​

// control time with your mouse

// where is your god now?

function getMouseT() {

  return mouseX / width;

}

​

function draw() {

  let t1 = getRealtimeT(); // value between 0 - 1 for first 200 frames

  let t2 = getFrameT();    // value between 0 - 1 loops after 200 frames

  let t3 = getMouseT();    // value between 0 - 1 based on canvas width (can technically go over 1)

  background(0);

  circle(t1 * width, 0.25 * height, 50);

  circle(t2 * width, 0.50 * height, 50);

  circle(t3 * width, 0.75 * height, 50);

}