alaingilbert · May 25, 2012 00:42
diff --git a/index.html b/index.html
 <!doctype html>
 <html>
 <head>
 </head>
 <body>

 <canvas id="canvas" width="800" height="600"></canvas>

 <script type="text/javascript">
 var ctx       = document.getElementById('canvas').getContext('2d')
  , triangle  = null
  , lastFrame = null
  , ctrl1     = { x: 40, y:300 }
  , ctrl2     = { x: 80, y: 20 }
  , ctrl3     = { x:500, y:580 }
  , ctrl4     = { x:700, y:300 };


 //--- Bezier curve related -----------------------------------------------------
 var lerp = function (a, b, t) {
   var dest = { x:0, y:0 };
   dest.x = a.x + (b.x - a.x) * t;
   dest.y = a.y + (b.y - a.y) * t;
   return dest;
 };

 var bezier = function (a, b, c, d, t) {
   var ab, bc, abbc, bccd, dest;
   ab   = lerp(   a,    b, t);
   bc   = lerp(   b,    c, t);
   cd   = lerp(   c,    d, t);
   abbc = lerp(  ab,   bc, t);
   bccd = lerp(  bc,   cd, t);
   dest = lerp(abbc, bccd, t);
   return dest;
 };

 var getPoint = function (pct) {
   return bezier(ctrl1, ctrl2, ctrl3, ctrl4, pct);
 };


 //--- Triangle object ----------------------------------------------------------
 var Triangle = function () {
   var params     = arguments[0] || {};
   this.x         = params.x     || 0;
   this.y         = params.y     || 0;
   this.angle     = params.angle || 0;
   this.velocity  = { x:100, y:100 };
   this.startTime = new Date().getTime();
   this.duration  = 10000;
   this.status    = true;
 };

 Triangle.prototype.update = function (dt) {
   var pct = (new Date().getTime() - this.startTime) / this.duration;
   if (pct < 1) {
      var pt1 = getPoint(pct)
        , pt2 = getPoint(pct+0.01);
      this.angle = Math.atan2(pt2.y - pt1.y, pt2.x - pt1.x);
      this.x = pt1.x;
      this.y = pt1.y;
   } else {
      this.status = false;
   }
 };

 Triangle.prototype.render = function () {
   ctx.save();
   ctx.translate(this.x, this.y);
   ctx.rotate(this.angle);
   ctx.scale(2, 2);
   ctx.beginPath();
   ctx.moveTo(10,  0);
   ctx.lineTo(-5,  5);
   ctx.lineTo(-5, -5);
   ctx.closePath();
   ctx.strokeStyle = '#000';
   ctx.stroke();
   ctx.restore();
 };

 Triangle.prototype.getTimer = function () {
   return this.status ? new Date().getTime() - this.startTime : this.duration;
 };


 //--- Animation core -----------------------------------------------------------
 var update = function (dt) {
   triangle.update(dt);
 };

 var render = function () {
   // Render Points/Line
   ctx.save();
   ctx.fillStyle = 'green';
   ctx.strokeStyle = '#f00';
   ctx.beginPath();
   ctx.arc(ctrl1.x, ctrl1.y, 5, 0, 2*Math.PI);
   ctx.arc(ctrl2.x, ctrl2.y, 5, 0, 2*Math.PI);
   ctx.arc(ctrl3.x, ctrl3.y, 5, 0, 2*Math.PI);
   ctx.arc(ctrl4.x, ctrl4.y, 5, 0, 2*Math.PI);
   ctx.closePath();
   ctx.fill();

   ctx.beginPath();
   ctx.moveTo(ctrl1.x, ctrl1.y);
   ctx.bezierCurveTo(ctrl2.x, ctrl2.y, ctrl3.x, ctrl3.y, ctrl4.x, ctrl4.y);
   ctx.stroke();
   ctx.restore();

   // Render Triangle
   triangle.render();

   // Render timer
   ctx.save();
   ctx.font = '20px sans-serif';
   ctx.textBaseline = 'bottom';
   ctx.textAlign = 'right';
   ctx.translate(800, 600);
   ctx.fillText(triangle.getTimer(), 0, 0);
   ctx.restore();
 };

 var cycle = function () {
   var dt = new Date().getTime() - lastFrame.getTime();
   ctx.clearRect(0, 0, 800, 600);
   update(dt);
   render();
   ctx.strokeRect(0, 0, 800, 600);
   lastFrame = new Date();
   webkitRequestAnimationFrame(cycle);
 };


 //--- Init everything ----------------------------------------------------------
 var main = function () {
   triangle = new Triangle({ x:ctrl1.x, y:ctrl1.y });
   lastFrame = new Date();
   cycle();
 };

 main();

 </script>

 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	</head>
	<body>

	<canvas id="canvas" width="800" height="600"></canvas>

	<script type="text/javascript">
	var ctx = document.getElementById('canvas').getContext('2d')
	, triangle = null
	, lastFrame = null
	, ctrl1 = { x: 40, y:300 }
	, ctrl2 = { x: 80, y: 20 }
	, ctrl3 = { x:500, y:580 }
	, ctrl4 = { x:700, y:300 };


	//--- Bezier curve related -----------------------------------------------------
	var lerp = function (a, b, t) {
	var dest = { x:0, y:0 };
	dest.x = a.x + (b.x - a.x) * t;
	dest.y = a.y + (b.y - a.y) * t;
	return dest;
	};

	var bezier = function (a, b, c, d, t) {
	var ab, bc, abbc, bccd, dest;
	ab = lerp( a, b, t);
	bc = lerp( b, c, t);
	cd = lerp( c, d, t);
	abbc = lerp( ab, bc, t);
	bccd = lerp( bc, cd, t);
	dest = lerp(abbc, bccd, t);
	return dest;
	};

	var getPoint = function (pct) {
	return bezier(ctrl1, ctrl2, ctrl3, ctrl4, pct);
	};


	//--- Triangle object ----------------------------------------------------------
	var Triangle = function () {
	var params = arguments[0] \|\| {};
	this.x = params.x \|\| 0;
	this.y = params.y \|\| 0;
	this.angle = params.angle \|\| 0;
	this.velocity = { x:100, y:100 };
	this.startTime = new Date().getTime();
	this.duration = 10000;
	this.status = true;
	};

	Triangle.prototype.update = function (dt) {
	var pct = (new Date().getTime() - this.startTime) / this.duration;
	if (pct < 1) {
	var pt1 = getPoint(pct)
	, pt2 = getPoint(pct+0.01);
	this.angle = Math.atan2(pt2.y - pt1.y, pt2.x - pt1.x);
	this.x = pt1.x;
	this.y = pt1.y;
	} else {
	this.status = false;
	}
	};

	Triangle.prototype.render = function () {
	ctx.save();
	ctx.translate(this.x, this.y);
	ctx.rotate(this.angle);
	ctx.scale(2, 2);
	ctx.beginPath();
	ctx.moveTo(10, 0);
	ctx.lineTo(-5, 5);
	ctx.lineTo(-5, -5);
	ctx.closePath();
	ctx.strokeStyle = '#000';
	ctx.stroke();
	ctx.restore();
	};

	Triangle.prototype.getTimer = function () {
	return this.status ? new Date().getTime() - this.startTime : this.duration;
	};


	//--- Animation core -----------------------------------------------------------
	var update = function (dt) {
	triangle.update(dt);
	};

	var render = function () {
	// Render Points/Line
	ctx.save();
	ctx.fillStyle = 'green';
	ctx.strokeStyle = '#f00';
	ctx.beginPath();
	ctx.arc(ctrl1.x, ctrl1.y, 5, 0, 2*Math.PI);
	ctx.arc(ctrl2.x, ctrl2.y, 5, 0, 2*Math.PI);
	ctx.arc(ctrl3.x, ctrl3.y, 5, 0, 2*Math.PI);
	ctx.arc(ctrl4.x, ctrl4.y, 5, 0, 2*Math.PI);
	ctx.closePath();
	ctx.fill();

	ctx.beginPath();
	ctx.moveTo(ctrl1.x, ctrl1.y);
	ctx.bezierCurveTo(ctrl2.x, ctrl2.y, ctrl3.x, ctrl3.y, ctrl4.x, ctrl4.y);
	ctx.stroke();
	ctx.restore();

	// Render Triangle
	triangle.render();

	// Render timer
	ctx.save();
	ctx.font = '20px sans-serif';
	ctx.textBaseline = 'bottom';
	ctx.textAlign = 'right';
	ctx.translate(800, 600);
	ctx.fillText(triangle.getTimer(), 0, 0);
	ctx.restore();
	};

	var cycle = function () {
	var dt = new Date().getTime() - lastFrame.getTime();
	ctx.clearRect(0, 0, 800, 600);
	update(dt);
	render();
	ctx.strokeRect(0, 0, 800, 600);
	lastFrame = new Date();
	webkitRequestAnimationFrame(cycle);
	};


	//--- Init everything ----------------------------------------------------------
	var main = function () {
	triangle = new Triangle({ x:ctrl1.x, y:ctrl1.y });
	lastFrame = new Date();
	cycle();
	};

	main();

	</script>

	</body>
	</html>