Bezier Curve | Zona Land Education

Click this button to see the computer language code that creates this animation.
Here's the code that runs the above animation.
You can change the code, if you like, and then click the following 'Reevaluate code' button. The program will then work as per your changes. Of course, your changes, especially random changes, can introduce errors, miscalculations, and browser crashes. If you need to get things back to their original condition, just reload this page using your browser's reload button.
The intention here is to conveniently show the inner workings of this program so that you understand how the diagram is drawn.
Click the 'Code' button again to close this section.
// Point2D

Point2D = function() 
{
	this.x = 0;
	this.y = 0;

	this.vx = 0;
	this.vy = 0;

	this.ax = 0;
	this.ay = 0;

	this.isOn = function(x, y, tolerance) 
	{
		var xTest = x - Point2D.offsetX;
		var yTest = y - Point2D.offsetY;

		var xMin = Math.floor(this.x - tolerance);
		var xMax = Math.floor(this.x + tolerance);
		var yMin = Math.floor(this.y - tolerance);
		var yMax = Math.floor(this.y + tolerance);

		return (xTest >= xMin && xTest <= xMax && yTest >= yMin && yTest <= yMax); 
	};
	

	this.setToMouse = function(x, y) 
	{
		if(x >= 0 && x <= Point2D.width - 1 && y >= 0 && y <= Point2D.height - 1)
		{
			this.x = x - Point2D.offsetX;
			this.y = y - Point2D.offsetY;
		}
	};


	this.draw = function(canvasCG, radius)
	{
		var x1;
		var y1;
		var width;
		var height;

		x1 = this.x - radius + Point2D.offsetX;
		y1 = this.y - radius + Point2D.offsetY;
		width  = radius * 2;
		height = radius * 2;

		canvasCG.fillStyle = Point2D.interior;
		canvasCG.fillRect(x1, y1, width, height);
	};
	
	
	this.tic = function()
	{
		// new position for control points
		this.x += this.vx * Point2D.dt + 0.5 * this.ax * Point2D.dt * Point2D.dt;
		this.y += this.vy * Point2D.dt + 0.5 * this.ay * Point2D.dt * Point2D.dt;

		// new acceleration for control points
		this.vx += this.ax * Point2D.dt;
		this.vy += this.ay * Point2D.dt;
	};


	this.bounce = function()
	{
		// turn around if over the edge
		
		if(this.x <= Point2D.minX)
		{
			this.vx = -this.vx;
		}
		else if(this.x >= Point2D.maxX)
		{
			this.vx = -this.vx;
		}

		if(this.y <= Point2D.minY)
		{
			this.vy = -this.vy;
		}
		else if(this.y >= Point2D.maxY)
		{
			this.vy = -this.vy;
		}
	};
};


Point2D.foreground = 'yellow';
Point2D.background = 'blue';
Point2D.border     = 'black';
Point2D.interior   = 'green';

Point2D.width   = 400;
Point2D.height  = 400;
Point2D.offsetX = 200; // width / 2
Point2D.offsetY = 200; // height / 2

Point2D.minX = -200;
Point2D.maxX =  200;
Point2D.minY = -200;
Point2D.maxY =  200;

Point2D.lineWidth = 3;

Point2D.dt = 0.1;


Point2D.setup = function(_foreground, _background, _border, _interior, _width, _height, _offsetX, _offsetY)
{
	Point2D.foreground = _foreground;
	Point2D.background = _background;
	Point2D.border     = _border;
	Point2D.interior   = _interior;
	Point2D.width      = _width;
	Point2D.height     = _height;
	Point2D.offsetX    = _offsetX;
	Point2D.offsetY    = _offsetY;
};


Point2D.drawLine = function(canvasGC, p1, p2)
{
	var x1;
	var y1;
	var x2;
	var y2;

	x1 = p1.x + Point2D.offsetX;
	y1 = p1.y + Point2D.offsetY;
	x2 = p2.x + Point2D.offsetX;
	y2 = p2.y + Point2D.offsetY;

	canvasGC.strokeStyle = Point2D.foreground;
	canvasGC.lineWidth   = Point2D.lineWidth;

	canvasGC.beginPath();
	canvasGC.moveTo(x1, y1);
	canvasGC.lineTo(x2, y2);
	canvasGC.closePath();
	canvasGC.stroke();
};


// Bezier 1 Animation

var selectedPointIndex = 0;
var isMouseDown        = false;
var width              = 400;
var height             = 400;
var halfWidth          = width / 2;
var halfHeight         = height / 2;

// This version must have numPoints = 4.
var numPoints = 4;

point2D = new Array();

// Point radius.
var pointRadius = 4;

// Current mouse position.
var mouseX;
var mouseY;

// Animation time per frame.
var animationPeriod = 50;


initializeBezier = function(canvas)
{
	canvas.addEventListener('mousedown', onMouseDown);
	
	var i;
	for(i = 0; i < numPoints; i++)
	{
		point2D[i] = new Point2D();
	}

	point2D[0].x  = -150;
	point2D[0].y  =  150;
	point2D[0].vx = randomRealRange(-5, 5);
	point2D[0].vy = randomRealRange(-5, 5);
	point2D[0].ax = randomRealRange(-2, 2);
	point2D[0].ay = randomRealRange(-2, 2);

	point2D[1].x  =  -50;
	point2D[1].y  = -150;
	point2D[1].vx = randomRealRange(-5, 5);
	point2D[1].vy = randomRealRange(-5, 5);
	point2D[1].ax = randomRealRange(-2, 2);
	point2D[1].ay = randomRealRange(-2, 2);

	point2D[2].x  =   50;
	point2D[2].y  =  150;
	point2D[2].vx = randomRealRange(-5, 5);
	point2D[2].vy = randomRealRange(-5, 5);
	point2D[2].ax = randomRealRange(-2, 2);
	point2D[2].ay = randomRealRange(-2, 2);

	point2D[3].x  =  150;
	point2D[3].y  = -150;
	point2D[3].vx = randomRealRange(-5, 5);
	point2D[3].vy = randomRealRange(-5, 5);
	point2D[3].ax = randomRealRange(-2, 2);
	point2D[3].ay = randomRealRange(-2, 2);

	Point2D.dt = 0.1;	
};


paint = function(canvasGC)
{
	canvasGC.clearRect(0, 0, 400, 400);
	
	var c1 = new Point2D();
	var c2 = new Point2D();

	var step = 20;
		
	var dot = new Array();
		
	var i;
	for(i = 0; i < step + 1; i++)
	{
		dot[i] = new Point2D();
	}
	
	var B;
		
	var t = 0;
	
	c1.x = c1.y = 0;

	var i;
	for(i = 0; i <= 3; i++)
	{
		B = Bernstein(i, t / step);
		c1.x += point2D[i].x * B;
		c1.y += point2D[i].y * B;
	}

	var t;
	for(t = 1; t <= step; t++)
	{
		c2.x = c2.y = 0.0;
		
		var i;
		for(i = 0; i <= 3; i++)
		{
			B = Bernstein(i, t / step);
			c2.x += point2D[i].x * B;
			c2.y += point2D[i].y * B;
		}

		dot[t].x = c2.x;
		dot[t].y = c2.y;

		Point2D.foreground = 'red';
		
		Point2D.drawLine(canvasGC, c1, c2);
		c1.x = c2.x;
		c1.y = c2.y;
	}
		
	Point2D.interior = 'blue';
	
	point2D[0].draw(canvasGC, pointRadius);
	point2D[3].draw(canvasGC, pointRadius);
	
	var i;
	for(i = 1; i < step; i++)
	{
		dot[i].draw(canvasGC, pointRadius);
	}	
};


// Cubic Bernstein polynomial
// Works with 4 points
Bernstein = function(c, u)
{
	switch(c)
	{
		case 0:
	
			return (Math.pow((1.0 - u), 3));

		case 1:
	
			return (3.0 * u * Math.pow((1.0 - u), 2));

		case 2:
	
			return (3.0 * Math.pow(u, 2) * (1.0 - u));

		default:
	
			return (Math.pow(u, 3));
	}
};


animationLoop = function()
{
	updateAnimation();
	
	paint(canvasGC);
	
	animationTimeout = setTimeout(animationLoop, animationPeriod);
};


updateAnimation = function()
{
	var i;
	for(i = 0; i < numPoints; i++)
	{
		point2D[i].tic();
		point2D[i].bounce();
	}
};


onMouseDown = function(event)
{
	point2D[0].x  = randomRealRange(-150, 150);
	point2D[0].y  = randomRealRange(-150, 150);
	point2D[0].vx = randomRealRange(-30, 30);
	point2D[0].vy = randomRealRange(-30, 30);
	point2D[0].ax = randomRealRange(-100, 100);
	point2D[0].ay = randomRealRange(-100, 100);

	point2D[1].x  = randomRealRange(-150, 150);
	point2D[1].y  = randomRealRange(-150, 150);
	point2D[1].vx = randomRealRange(-30, 30);
	point2D[1].vy = randomRealRange(-30, 30);
	point2D[1].ax = randomRealRange(-100, 100);
	point2D[1].ay = randomRealRange(-100, 100);

	point2D[2].x  = randomRealRange(-150, 150);
	point2D[2].y  = randomRealRange(-150, 150);
	point2D[2].vx = randomRealRange(-30, 30);
	point2D[2].vy = randomRealRange(-30, 30);
	point2D[2].ax = randomRealRange(-100, 100);
	point2D[2].ay = randomRealRange(-100, 100);

	point2D[3].x  = randomRealRange(-150, 150);
	point2D[3].y  = randomRealRange(-150, 150);
	point2D[3].vx = randomRealRange(-30, 30);
	point2D[3].vy = randomRealRange(-30, 30);
	point2D[3].ax = randomRealRange(-100, 100);
	point2D[3].ay = randomRealRange(-100, 100);

};


randomRealRange = function(min, max)
{
	return min + Math.random() * (max - min);
};