PSV easings

by mistic100

HTML

<canvas></canvas>

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

JavaScript

const EASINGS = {
   inQuad: (t) => t * t,
   outQuad: (t) => t * (2 - t),
   inOutQuad: (t) => t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t,

   inCubic: (t) => t * t * t,
   outCubic: (t) => (--t) * t * t + 1,
   inOutCubic: (t) => t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1,

   inQuart: (t) => t * t * t * t,
   outQuart: (t) => 1 - (--t) * t * t * t,
   inOutQuart: (t) => t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t,

   inQuint: (t) => t * t * t * t * t,
   outQuint: (t) => 1 + (--t) * t * t * t * t,
   inOutQuint: (t) => t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t,

   inSine: (t) => 1 - Math.cos(t * (Math.PI / 2)),
   outSine: (t) => Math.sin(t * (Math.PI / 2)),
   inOutSine: (t) => .5 - .5 * Math.cos(Math.PI * t),

   inExpo: (t) => Math.pow(2, 10 * (t - 1)),
   outExpo: (t) => 1 - Math.pow(2, -10 * t),
   inOutExpo: (t) => (t = t * 2 - 1) < 0 ? .5 * Math.pow(2, 10 * t) : 1 - .5 * Math.pow(2, -10 * t),

   inCirc: (t) => 1 - Math.sqrt(1 - t * t),
   outCirc: (t) => Math.sqrt(1 - (t - 1) * (t - 1)),
   inOutCirc: (t) => (t *= 2) < 1 ? .5 - .5 * Math.sqrt(1 - t * t) : .5 + .5 * Math.sqrt(1 - (t -= 2) * t)
 };

 const nb = Object.keys(EASINGS).length;
 const nbRow = 3;
 const nbCol = Math.ceil(nb / nbRow);
 const l = 100;
 const p = 10;

 const canvas = document.querySelector('canvas');
 canvas.width = l * nbCol + p * (nbCol + 1);
 canvas.height = l * nbRow + p * (nbRow + 1);

 const ctx = canvas.getContext('2d');
 ctx.translate(0.5, 0.5);

 ctx.strokeWidth = '1px';
 ctx.textBaseline = 'middle';
 ctx.font = '12px sans-serif';

 let row = 0;
 let col = 0;
 for (let [name, fn] of Object.entries(EASINGS)) {
   const offsetX = col * l + (col + 1) * p;
   const offsetY = row * l + (row + 1) * p;

   ctx.strokeStyle = 'black';
   ctx.strokeRect(offsetX, offsetY, l, l);

   ctx.strokeStyle = 'red';
   ctx.beginPath();
   ctx.moveTo(offsetX, l + offsetY);

   for (let i = 1; i < l; i++) {
     const x = i + offsetX;
 ...