​

const left = 50;

const right = 350;

​

function setup() {

  createCanvas(400, 400);

  background(220);

}

​

function draw() {

  if (t < 1.0) {

    fill(0, 10);

    rect(0, 0, width, height);

    t += 0.02;

  }

  stroke(255);

  fill(255);

  const steadyX = lerp(left, right, t);

  const easedX = lerp(left, right, easePatakk(t));

  line(left, 150, left, 250);

  line(right, 150, right, 250);

  circle(steadyX, 150, 10);

  circle(easedX, 250, 10);

}

​

function mousePressed() {

  background(220);

  t = 0;

}

​

// from https://patakk.tumblr.com/post/88602945835/heres-a-simple-function-you-can-use-for-easing

function easePatakk(p, g = 4) {

  if (p < 0.5) return 0.5 * pow(2 * p, g);

  else return 1 - 0.5 * pow(2 * (1 - p), g);

}

// from easings.net

​

function easeOutElastic(x) {

  const c4 = (2 * Math.PI) / 3;

  return x === 0

    ? 0

    : x === 1

    ? 1

    : Math.pow(2, -10 * x) * Math.sin((x * 10 - 0.75) * c4) + 1;

}

​