HTML Bezier Curve Test

by Jake Cattrall

HTML

<h1>Drag the red blocks around</h1>
<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: 10px;
    height: 10px;
    background: red;
    cursor: crosshair;
}

JavaScript

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

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;
}

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

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, p4){
    container.empty();
    elems = "";
    
    newElement('bigpoint', 'bp1', p1);
    newElement('bigpoint', 'bp2', p2);
    newElement('bigpoint', 'bp3', p3);
    newElement('bigpoint', 'bp4', p4);
    
    for (var i = 0; i < 1; i += 0.01){
        var newpos = getBezier(i, p1, p4, p3, p2);
        newElement('point', 'point'+i, newpos);
    }
    
    container.html(elems);
    $('.bigpoint').draggable({
        stop: function( event, ui ) {
            var bp1pos = $('#bp1').position();
            var bp2pos = $('#bp2').position();
            var bp3pos = $('#bp3').position();
            var bp4pos = $('#bp4').position();
            bp1pos = coord(bp1pos.left, bp1pos.top);
            bp2pos = coord(bp2pos.left, bp2pos.top);
            bp3pos = coord(bp3pos.left, bp3pos.top);
            bp4pos = coord(bp4pos.left, bp4pos.top);
            generatePoints(bp1pos, bp2pos, bp3pos,...