グラフィックに役立つ(とは限らない)算数

知ってる人は常識だろうし、知らない人には全く関係ない2D→3D変換。

function uv(p, f){ // fは焦点距離
    return {
        u: f * p.x / p.z,
        v: f * p.y / p.z
    };
}

canvasで。

Array.prototype.each = function(f){
	for(var i = 0; i < this.length; i++)
		f(this[i], i);
};

function P(x, y, z){
	this.x = x;
	this.y = y;
	this.z = z;
}

function UV(p, f){
	this.u = p.x * f / p.z;
	this.v = p.y * f / p.z;
}

window.onload = function(){
	var canvas = document.getElementsByTagName("canvas")[0].getContext("2d");

	var f = 30;
	var points = [
		new P(10, 10, 10),
		new P(10, 20, 10),
		new P(20, 20, 10),
		new P(20, 10, 10),
		new P(10, 10, 30),
		new P(10, 20, 30),
		new P(20, 20, 30),
		new P(20, 10, 30)
	];

	[
	[0, 1, 2, 3, 0],
	[3, 2, 6, 7, 3],
	[7, 6, 5, 4, 7],
	[0, 4, 5, 1, 0],
	[0, 3, 7, 4, 0],
	[1, 5, 6, 2, 1]
	].each(function(ns){
		canvas.beginPath();
		ns.each(function(v){
			var uv = new UV(points[v], f);
			canvas.lineTo(uv.u, uv.v);
		});
		canvas.closePath();
		canvas.stroke();
	});
};

追記: どうでもいいところを微妙に修正。