continuous bezier
makes a shape of continuous beziers
HTML
<canvas id="myCanvas" width="578" height="2000"></canvas>
CSS
body {
margin: 0px;
padding: 0px;
}
JavaScript
function dBezierCurve() {
var args = Array.prototype.slice.call(arguments);
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
if (args[0].length > 2) {
args = args[0];
}
if (args.length<2)
{
throw new Error("not enough points");
return;
}
context.beginPath();
context.moveTo(args[0].x , args[0].y);
for (var i = 1; i < args.length +1; i++) {
//these get the args before and after arg[i] it is so long because i am checking to make sure it actually exists if not it gets the remainder of it divided by the total args
var before = new Point(args[(i+(args.length-1)) % args.length].x,args[(i+(args.length-1)) % args.length].y);
var after = new Point(args[(i+(args.length+1)) % args.length].x,args[(i+(args.length+1)) % args.length].y);
var current = new Point(args[(i+(args.length)) % args.length].x,args[(i+(args.length)) % args.length].y);
var before2 = new Point(args[(i+(args.length-2)) % args.length].x,args[(i+(args.length-2)) % args.length].y);
//these are taking the difference of the points before and after divides it by controlpoint and adds or subtracts that from the middle point to get the bezier control points
var mid1 = new Point(before.x-((before2.x-current.x)/controlpoint),before.y-((before2.y-current.y)/controlpoint));
var mid2 = new Point(current.x+((before.x-after.x)/controlpoint),current.y+((before.y-after.y)/controlpoint));
context.bezierCurveTo(mid1.x,mid1.y,mid2.x,mid2.y,current.x,current.y);
}
}
function Point(x, y) {
this.x = x;
this.y = y;
this.d = Math.sqrt(x * x + y * y);
}
Point.prototype = {
slopeTo: function (p) {
return (this.y - p.y) / (this.x - p.x);
},
distanceTo: function (p) {
return (Math.sqrt(((this.y - p.y) * (this.y - p.y)) + ((this.x - p.x) * (this.x - p.x))));
},
distanceByAxis: function (p) {
return (new Point(this.x - p.x, this.y -...