00 How it works 01 Objects - Constructor 02 Objects - Constructor (drawing) 03 Objects - Constructor (timing) 04 Objects - Prototype (sequential declaration) 05 Objects - Prototype (declaring all at once)

Code goes here:

var _things = 0;
var _cross = 7.0 / 2;
// The properties (variables) aren't in the constructor anymore...
function Thing(angle) {
    var thing_num = ++_things;
    this.getThingNum = function() {
        return thing_num;
    }
    if(angle) {
        this.alpha = angle / 180.0*Math.PI;
    }
}
// Create a prototype for Thing()'s, this time, use the JSON-like declaration.
Thing.prototype = {
    x: 0,
    y: 0,
    alpha: 0,
    
    step: function(distance) {
        this.x += distance * Math.cos(this.alpha);
        this.y += distance * Math.sin(this.alpha);
        return this;
    },
    turn_degrees: function(degrees) {
        this.alpha += degrees / 180.0*Math.PI;
        return this;
    },
    update: function(canvas, domelement) {
        console.log("Thing #" + this.getThingNum() + " is at:", it01.x, 'x', it01.y,
            "and looks at", this.alpha * 180.0/Math.PI, "degrees");
        return this;
    },
    draw: function(ctx2d) {
        ctx2d.save();
        ctx2d.setTransform(1, 0, 0, 1, 0, 0);
        ctx2d.translate(ctx.canvas.width / 2, ctx.canvas.height / 2);
        ctx2d.rotate(this.alpha);
        ctx2d.beginPath();
        ctx2d.moveTo(this.x - _cross, this.y);
        ctx2d.lineTo(this.x + _cross, this.y);
        ctx2d.moveTo(this.x, this.y - _cross);
        ctx2d.lineTo(this.x, this.y + _cross);
        ctx2d.stroke();
        ctx2d.restore();
        return this;
    },
    mark: function(elem) {
       elem.style.position = 'absolute';
       elem.style.top = this.y + 'px';
       elem.style.left = this.x + 'px';
       return this;
    }
};

function Delayed(func, ms) {
	var self = this;
	this.next = null;
	this.delay = function(next) {
		this.next = new Delayed(next, ms);
                return this.next;
	};
	this.run = function(a) {
		setTimeout(function() {
			try {
				func(a);
			} catch(e) {
				console.log('error running delayed function: ', e);
			}
			if(self.next != null) {
				self.next.run(a+1);
			}
		}, ms);
	}
}
function delay(func) {
	var delayed = new Delayed(func, 100);
	delayed.run(0);
	return delayed;
}

var it01 = new Thing();
var it02 = new Thing();
var dom_marker = document.getElementById('dom_marker1');
var dom_marker = document.getElementById('dom_marker2');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = canvas.parentNode.offsetWidth;
canvas.height = canvas.parentNode.offsetHeight;

ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);

var plan = delay(function(x) {
	it01 .update().draw(ctx).mark(dom_marker1);
	it02 .update().draw(ctx).mark(dom_marker2);
}).delay(function(x) {
	it01 .turn_degrees(10).step(10) .update().draw(ctx).mark(dom_marker1);
	it02 .turn_degrees(-10).step(10) .update().draw(ctx).mark(dom_marker2);
}).delay(function(x) {
	it01 .turn_degrees(5).step(10) .update().draw(ctx).mark(dom_marker1);
	it02 .turn_degrees(-5).step(10) .update().draw(ctx).mark(dom_marker2);
}).delay(function(x) {
	it01 .turn_degrees(0).step(10) .update().draw(ctx).mark(dom_marker1);
	it02 .turn_degrees(0).step(10) .update().draw(ctx).mark(dom_marker2);
}).delay(function(x) {
	it01 .turn_degrees(-5).step(10) .update().draw(ctx).mark(dom_marker1);
	it02 .turn_degrees(5).step(10) .update().draw(ctx).mark(dom_marker2);
});

for (var i = 0; i < 25; i++) {
	plan = plan.delay(function() {
		it01 .turn_degrees(-35 + i).step(10) .update().draw(ctx).mark(dom_marker1);
		it02 .turn_degrees(30 - i).step(10) .update().draw(ctx).mark(dom_marker2);
	})
}

Logs show up here:

Here, we draw on a canvas

And finally, DOM + CSS

x

o