createCanvas(400, 400);

}

​

minX = 0

maxX = 100

​

linearX = 0;

sineX = 0;

​

​

function draw() {

  background(0);

  fill(255);

  linearX = frameCount; // using inbuilt frameCount as the reference counter

  linearX %= maxX; // resest to 0 after maxX is hit

​

  rangeComplete = normalise(linearX,0,maxX) // this normalizes the movement. We will use this rangeComplete in our calculations

​

  // linear movement

  text('Linear', 10, 30);

  rect(linearX, 40, 5, 5);  

​

  // Sine easeIn movement

  text('Sine Ease In', 10, 70);

  rect(maxX*easeInSine(rangeComplete), 80, 5, 5);

​

  // Sine easeOut movement  

  text('Sine Ease Out', 10, 110);

  rect(maxX*easeOutSine(rangeComplete), 120, 5, 5);

  // Sine easeInOut movement

  text('Sine Ease In and Out', 10, 150);

  rect(maxX*easeInOutSine(rangeComplete), 160, 5, 5);

}

​

function normalise(n, rangeStart, rangeEnd) {

  x = (n-rangeStart)/(rangeEnd-rangeStart)

  return x

}

​

function easeInSine(n) {

  return 1 - Math.cos((n * Math.PI) / 2);

}

​

function easeOutSine(n) {

  return Math.sin((x * Math.PI) / 2);

}

​

function easeInOutSine(n) {

  return -(Math.cos(Math.PI * x) - 1) / 2;

}

​

//Check this link for more easings https://easings.net/#