Skip to content

Instantly share code, notes, and snippets.

@alaingilbert
Created May 26, 2012 03:58
Show Gist options
  • Save alaingilbert/2792095 to your computer and use it in GitHub Desktop.
Save alaingilbert/2792095 to your computer and use it in GitHub Desktop.
:)
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment