h2.js

let canvas = document.createElement("canvas");
canvas.width = 400;
canvas.height = 400;
let ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

function lerp(a, b, t) {
  return a * (1-t) + b * t;
}

function h2(t) {
  let sq = t * t;
  let cb = sq * t;
  return (-2 * cb + 3 * sq);
}

const MAX = canvas.width - 1;

for(let i = 0, x = 0; i < MAX; i++, x++) {
  
  let t = i/MAX;
  let t2 = h2(t);
  
  ctx.fillStyle = "steelblue";
  ctx.fillRect(canvas.height - x, 
               lerp(0, MAX, t), 2, 2);
  
  ctx.fillStyle = "orange";
  ctx.fillRect(canvas.height - x,
               lerp(0, MAX, t2), 2, 2);
}