​

let ellipseWidth;

​

// with lerp

let ellipse1x;

let ellipse1destination;

let acceleration;

​

// without lerp

let ellipse2x;

let ellipse2destination;

​

function setup() {

  createCanvas(400, 400);

  textAlign(CENTER, CENTER);

  noStroke();

​

  ellipseWidth = 80;

  ellipse1x = 0;

  ellipse2x = 0;

  ellipse1destination = width - ellipseWidth;

  ellipse2destination = width - ellipseWidth;

  acceleration = 0.1;

​

}

​

function draw() {

​

  background(0);

  fill(255);

  text("Lerp vs. no lerp", 60, 30);

​

  // with lerp

  ellipse(ellipse1x + ellipseWidth / 2, height / 2 - ellipseWidth, ellipseWidth, ellipseWidth);

  fill(0);

  text("lerp", ellipse1x + ellipseWidth / 2, height / 2 - ellipseWidth);

​

  ellipse1x = lerp(ellipse1x, ellipse1destination, acceleration);

​

  // without lerp

  fill(255);

  ellipse(ellipse2x + ellipseWidth / 2, height / 2 + ellipseWidth, ellipseWidth, ellipseWidth);

  fill(0);

  text("no lerp", ellipse2x + ellipseWidth / 2, height / 2 + ellipseWidth);

​

  if (ellipse2x <= ellipse2destination) {

    ellipse2x++;

  }

​

}

​

function mousePressed() {

  ellipse1x = 0;

  ellipse2x = 0;

}