JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<canvas id="canvas" width="500" height="500"></canvas>

JavaScript

// http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/
var c = document.getElementById('canvas');
var g = c.getContext('2d');

function cubic(t, w, x, y, z) {
    var ti = 1 - t;
    var ts = ti * ti;
    // linear combination of two quadratic curves
    return ti * (ts * w + 2 * ti * t * x + t * t * z) + t * (ts * w + 2 * ti * t * y + t * t * z);
}

var curve = [0,1,1,0];

function dot(x,y,r,c) {
    g.beginPath();
    g.arc(x,y,r,0,Math.PI*2);
    g.strokeStyle = c || '#000';
    g.stroke();
}

function plot(curve) {
    
    dot( curve[0] * c.width, curve[1] * c.height, 10, '#ff0000');
    dot( curve[2] * c.width, curve[3] * c.height, 10, '#ff0000');
    
    for( var t = 0; t < 1; t += 0.01 ) {
        var x = t * c.width;
        var y = cubic(t, curve[0],curve[1],curve[2],curve[3]) * c.height;
        dot(x,y,2);
    }
}

plot( curve );