JSFiddle - React, Tailwind, and code Playground

by Jake Cattrall

HTML

Start X <input type="text" id="startx" value="1" />
Start Y <input type="text" id="starty" value="1" /><br />
End X <input type="text" id="endx" value="300" />
End Y <input type="text" id="endy" value="300" /><br />
Pull X <input type="text" id="pullx" value="250" />
Pull Y <input type="text" id="pully" value="200" />
<input id="go" type="button" value="go" />
<div class="container">
    
</div>

CSS

.container{
    position: relative;
    border: 1px solid black;
    width: 450px;
    height: 350px;
}

.point{
    position: absolute;
    width: 1px;
    height: 1px;
    background: black;
}
.bigpoint{
    position: absolute;
    width: 5px;
    height: 5px;
    background: red;    
}

JavaScript

//====================================\\
// 13thParallel.org Beziér Curve Code \\
//   by Dan Pupius (www.pupius.net)   \\
//====================================\\

var coord = function (x,y) {
  if(!x) var x=0;
  if(!y) var y=0;
  return {x: x, y: y};
}

function B1(t) { return t*t*t }
function B2(t) { return 3*t*t*(1-t) }
function B3(t) { return 3*t*(1-t)*(1-t) }
function B4(t) { return (1-t)*(1-t)*(1-t) }

function getBezier(percent,C1,C2,C3,C4) {
  var pos = new coord();
  pos.x = C1.x*B1(percent) + C2.x*B2(percent) + C3.x*B3(percent) + C4.x*B4(percent);
  pos.y = C1.y*B1(percent) + C2.y*B2(percent) + C3.y*B3(percent) + C4.y*B4(percent);
  return pos;
}

var container = $('.container');
var elems = "";

function newElement(classs, _id, point){
    elems += "<div class='"+classs+"' id='"+_id+"' title='"+_id+"' style='left:"+point.x+"px;top:"+point.y+"px'></div>";
}

function generatePoints(p1, p2, p3){
    container.empty();
    elems = "";
    var newpoint = [(endx - startx) / 2, (endy - starty) / 2];
    var point4 = coord(newpoint[0],newpoint[1]);
    
    newElement('bigpoint', 'bp1', p1);
    newElement('bigpoint', 'bp2', p2);
    newElement('bigpoint', 'bp3', p3);
    newElement('bigpoint', 'bp4', point4);
    
    for (var i = 0; i < 1; i += 0.01){
        var newpos = getBezier(i, point1, point4, point3, point2);
        newElement('point', 'point'+i, newpos);
    }
    
    container.html(elems);
}

$('#go').click(function(){
    var point1, point2, point3;
    var startx = parseInt($('#startx').val());
    var starty = parseInt($('#startx').val());
    var endx = parseInt($('#endx').val());
    var endy = parseInt($('#endy').val());
    var pullx = parseInt($('#pullx').val());
    var pully = parseInt($('#pully').val());
    point1 = coord(startx,starty);
    point2 = coord(endx,endy);
    point3 = coord(pullx,pully);
    generatePoints(point1, point2, point3);
});

$('.bigpoint').draggable({
    stop: function( event, ui ) {
       ...