alaingilbert · May 26, 2012 03:58
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
  , bezier    = null
  , lastFrame = null;


 //--- Bezier curve related -----------------------------------------------------
 var Bezier = function (pts) {
   this.pts = [];
   for (var i=0; i<pts.length; i++) {
      this.pts.push(pts[i]);
   }
 };

 Bezier.prototype.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;
 };

 Bezier.prototype.rec = function (newPts, pts, t) {
   if (pts.length >= 2) {
      newPts.push(this.lerp(pts[0], pts[1], t));
      pts.shift();
      this.rec(newPts, pts, t);
   }
 };

 Bezier.prototype.get = function (pct) {
   var pts = this.pts.slice(0);
   var nb = pts.length - 1;
   var newPts = [];
   this.rec(newPts, pts, pct);
   for (var i=1; i<nb; i++) {
      pts = newPts.slice(0);
      newPts = [];
      this.rec(newPts, pts, pct);
   }
   return newPts[0];
 };

 Bezier.prototype.render = function () {
   ctx.save();
   ctx.fillStyle = '#f00';
   for (var i=0; i<this.pts.length; i++) {
      var pt = this.pts[i];
      ctx.beginPath();
      ctx.arc(pt.x, pt.y, 5, 0, 2*Math.PI);
      ctx.fill();
   }
   ctx.restore();
 };


 //--- 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 = bezier.get(pct)
        , pt2 = bezier.get(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();

   var nb = 20;
   for (var i=0; i<nb; i++) {
      var pt = bezier.get(i/(nb-1));
      ctx.beginPath();
      ctx.arc(pt.x, pt.y, 5, 0, 2*Math.PI);
      ctx.fill();
   }
   
   ctx.restore();

   bezier.render();

   // 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 () {
   bezier    = new Bezier([ { x: 40, y:300 }
                          , { x: 80, y: 20 }
                          , { x:500, y:580 }
                          , { x:700, y:300 }
                          , { x:600, y:100 }
                          , { x:300, y:100 }
                          ]);
   triangle  = new Triangle(bezier.get(0));
   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
	, bezier = null
	, lastFrame = null;


	//--- Bezier curve related -----------------------------------------------------
	var Bezier = function (pts) {
	this.pts = [];
	for (var i=0; i<pts.length; i++) {
	this.pts.push(pts[i]);
	}
	};

	Bezier.prototype.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;
	};

	Bezier.prototype.rec = function (newPts, pts, t) {
	if (pts.length >= 2) {
	newPts.push(this.lerp(pts[0], pts[1], t));
	pts.shift();
	this.rec(newPts, pts, t);
	}
	};

	Bezier.prototype.get = function (pct) {
	var pts = this.pts.slice(0);
	var nb = pts.length - 1;
	var newPts = [];
	this.rec(newPts, pts, pct);
	for (var i=1; i<nb; i++) {
	pts = newPts.slice(0);
	newPts = [];
	this.rec(newPts, pts, pct);
	}
	return newPts[0];
	};

	Bezier.prototype.render = function () {
	ctx.save();
	ctx.fillStyle = '#f00';
	for (var i=0; i<this.pts.length; i++) {
	var pt = this.pts[i];
	ctx.beginPath();
	ctx.arc(pt.x, pt.y, 5, 0, 2*Math.PI);
	ctx.fill();
	}
	ctx.restore();
	};


	//--- 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 = bezier.get(pct)
	, pt2 = bezier.get(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();

	var nb = 20;
	for (var i=0; i<nb; i++) {
	var pt = bezier.get(i/(nb-1));
	ctx.beginPath();
	ctx.arc(pt.x, pt.y, 5, 0, 2*Math.PI);
	ctx.fill();
	}

	ctx.restore();

	bezier.render();

	// 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 () {
	bezier = new Bezier([ { x: 40, y:300 }
	, { x: 80, y: 20 }
	, { x:500, y:580 }
	, { x:700, y:300 }
	, { x:600, y:100 }
	, { x:300, y:100 }
	]);
	triangle = new Triangle(bezier.get(0));
	lastFrame = new Date();
	cycle();
	};

	main();

	</script>

	</body>
	</html>