Bezier Curve Formula

by Ben Clayton

HTML

<div id='world'>
    
    <div id='man' >&#165;</div>
    <div id='C1' class="epoint" >.</div>
    <div id='C2' class="cpoint" >.</div>
    <div id='C3' class="cpoint" >.</div>
    <div id='C4' class="epoint" >.</div>
    
</div>

CSS

#world {
    width:500px;
    height:500px;
    position:relative;
    border:1px solid green;
}

#man {
    position:absolute;
    top:20px;
    left:30px;
}
.epoint {
    color:red;
    position:absolute;
    
}
.cpoint {
    color:blue;
    position:absolute;
}

JavaScript

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

coord = function (x,y) {
  x= x | 0;
  y= y | 0;
  return {x: x, y: y};
}

function B1(t) { return (1-t)*(1-t)*(1-t) }
function B2(t) { return 3*t*(1-t)*(1-t) }
function B3(t) { return 3*t*t*(1-t) }
function B4(t) { return t*t*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;
}

function doit(){
    var manpos = getBezier(percent,C1,C2,C3,C4)
    console.log(percent,manpos);
    $('#man').css({top:manpos.y,left:manpos.x});
    if (percent<1){
        percent+=0.002;  
        setTimeout(doit,10);
    }
}

var percent=0;
var C1 = coord(0,200); // start point
var C2 = coord(100,150);// bezier control point
var C3 = coord(400,150);// bezier control point
var C4 = coord(500,200);// endpoint

    $('#C1').css({top:C1.y,left:C1.x});
    $('#C2').css({top:C2.y,left:C2.x});
    $('#C3').css({top:C3.y,left:C3.x});
    $('#C4').css({top:C4.y,left:C4.x});




doit();