Contour animation

A companion script for http://petr.blahos.com/blog/shape-warping-js/ author(s): Petr Blahoš

HTML

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

CSS

#anim {
	width: 800px;
	height: 800px;
}

JavaScript

var Animator = function (canvas_id, c1, c2) {
	this.canvas_id = canvas_id;
	this.scale = 2000.0;
	this.start = null;
	this.canvas = null;
	this.diff = [];
	this.c1 = c1;
	this.c2 = c2;
};
Animator.prototype = {
	go: function() {
		this.canvas = document.getElementById(this.canvas_id);
		this.diff = [];
		for (var i = 0;i < this.c1.length; i++) {
			var p0 = this.c1[i];
			var p1 = this.c2[i];
			this.diff.push([p1[0] - p0[0], p1[1] - p0[1]]);
		}
		var that = this;
		window.requestAnimationFrame(function(x) {that.make_step(x);});
	},
	make_step: function(timestamp) {
		var c = [];

		if (this.start == null) {
			this.start = timestamp;
		}
		var step = timestamp - this.start;
		var scale = this.scale;

		var c1 = this.c1;

		for (var i = 0;i < this.diff.length; i++) {
			var p0 = c1[i];
			var d = this.diff[i]
			c.push([p0[0] + d[0]*step/scale,
				  p0[1] + d[1]*step/scale]);
		}

		var ctx = this.canvas.getContext('2d');
		ctx.lineWidth = 10;
		ctx.lineCap = "round";
		ctx.lineJoin = "round";
		ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
		ctx.beginPath();
		ctx.moveTo(c[0][0], c[0][1]);
		for (var i = 0; i < c.length; i++) {
			ctx.lineTo(c[i][0], c[i][1]);
		}
		ctx.lineTo(c[0][0], c[0][1]);
		ctx.stroke();

		if (step > scale) {
			this.start = timestamp;
		}
		var that = this;
		window.requestAnimationFrame(function(x) {that.make_step(x);});
	}
};

var a;

	a = new Animator(
		"anim",
		[ [374,73], [297,99], [249,170], [223,292], [223,373], [246,488], [294,562], [371,591], [424,591], [500,564], [547,494], [573,372], [573,293], [548,172], [501,102], [422,73] ],
		[ [422,73], [385,108], [348,144], [294,177], [307,184], [353,161], [383,132], [414,103], [414,343], [414,583], [422,591], [430,583], [430,457], [430,332], [430,206], [430,81] ]
	      );
	a.go();