var startDelay = 1000;

var endDelay = 500;

​

var counter = 0;

​

function setup() {

  createCanvas(400, 400);

  background(220);

}

​

function draw() {

  noStroke();

​

  // clear drawing space only

  fill(220);

  rect(0, 75, width, height);

​

  // normalize time between [0, 1]

  var t = (millis() % (interval + startDelay + endDelay));

  if (t < startDelay) {

    t = 0;

  } else if (t > interval + startDelay) {

    t = 1;

  } else {

    t = (t - startDelay) / interval;

  }

  // clear t-chart

  fill(220);

  rect(counter, 0, 1, 75);

​

  // sawtooth

  var saw = abs(t - 0.5) * 2;

  // sine

  var sine = (sin(t * TWO_PI) + 1) * 0.5;

  // exponential

  var power = 2;

  var expo = pow(t, power);

  var sawExpo = pow(saw, power);

  var sineExpo = pow(sine, power);

  // square

  var square = round(t);

  // stepped

  var step = ceil(t * 10) / 10;

​

  // draw

  var ratio = square;

​

  fill(100, 100, 255);

  rect(counter, 75 * (1 - ratio), 1, 75 * ratio);

​

  fill(255, 100, 100);

  circle(width * 0.5, height * 0.6, 150 * ratio);

​

  counter++;

  if (counter > width) {

    counter = 0;

  }

}

​