tmcw/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
  <style>
    body { margin:0; padding:0; }
  </style>
</head>
<body>
<canvas id='c'></canvas>
<script src='index.js'></script>
</body>
</html>

## index.js
var width = 640,
height = 480;

var c = document.getElementById('c');
c.width = width;
c.height = height;

var ctx = c.getContext('2d'),
    focal_length = 1,
    scene_scale = height / 2,
    scene_xoff = width / 2,
    points = [],
    parts = 300;


function fillPoints() {
    points = [];
    for (var i = 0; i < parts; i++) {
        for (var j = 0; j < parts; j++) {
            var rad1 = Math.cos((j / parts) * 2 * Math.PI) * 2;
            var rad = ((i / parts) * 2 * Math.PI) - (Math.PI);
            points.push([
                Math.cos(rad) * rad1,
                Math.sin(rad) * rad1,
                -2
            ]);
        }
    }
}


function rotation(a) {
    return [
        1, 0, 0,
        0, Math.cos(a), Math.sin(a),
        0, Math.sin(a), Math.cos(a)
    ];
}

function multiply(a, b) {
    var result = [];
    for (var i = 0; i < 3; i++) {
        for (var j = 0; j < 1; j++) {
            var sum = 0;
            for (var k = 0; k < 3; k++) {
                sum += a[(i * 3) + k] * b[(k * 3) + j];
            }
            result[i] = sum;
        }
    }
    return result;
}

function pinhole(p) {
    var v = focal_length / -p[2];
    var scale = scene_scale;
    return {
        x: p[0] * v * scale + scene_xoff,
        y: p[1] * v * -scale + scale
    };
}

function render() {
    for (var i = 0; i < parts * parts; i++) {
        var pt = pinhole(points[i]);
        ctx.fillRect(~~pt.x, ~~pt.y, 2, 2);
    }
}

var n = 0;

function tick() {
    parts = ~~((Math.sin(n += 0.005) + 1) * 50);
    fillPoints();
    c.width = c.width;
    render();
    setTimeout(tick, 1);
}

tick();
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title></title>
	<style>
	body { margin:0; padding:0; }
	</style>
	</head>
	<body>
	<canvas id='c'></canvas>
	<script src='index.js'></script>
	</body>
	</html>
	var width = 640,
	height = 480;

	var c = document.getElementById('c');
	c.width = width;
	c.height = height;

	var ctx = c.getContext('2d'),
	focal_length = 1,
	scene_scale = height / 2,
	scene_xoff = width / 2,
	points = [],
	parts = 300;


	function fillPoints() {
	points = [];
	for (var i = 0; i < parts; i++) {
	for (var j = 0; j < parts; j++) {
	var rad1 = Math.cos((j / parts) * 2 * Math.PI) * 2;
	var rad = ((i / parts) * 2 * Math.PI) - (Math.PI);
	points.push([
	Math.cos(rad) * rad1,
	Math.sin(rad) * rad1,
	-2
	]);
	}
	}
	}


	function rotation(a) {
	return [
	1, 0, 0,
	0, Math.cos(a), Math.sin(a),
	0, Math.sin(a), Math.cos(a)
	];
	}

	function multiply(a, b) {
	var result = [];
	for (var i = 0; i < 3; i++) {
	for (var j = 0; j < 1; j++) {
	var sum = 0;
	for (var k = 0; k < 3; k++) {
	sum += a[(i * 3) + k] * b[(k * 3) + j];
	}
	result[i] = sum;
	}
	}
	return result;
	}

	function pinhole(p) {
	var v = focal_length / -p[2];
	var scale = scene_scale;
	return {
	x: p[0] * v * scale + scene_xoff,
	y: p[1] * v * -scale + scale
	};
	}

	function render() {
	for (var i = 0; i < parts * parts; i++) {
	var pt = pinhole(points[i]);
	ctx.fillRect(~~pt.x, ~~pt.y, 2, 2);
	}
	}

	var n = 0;

	function tick() {
	parts = ~~((Math.sin(n += 0.005) + 1) * 50);
	fillPoints();
	c.width = c.width;
	render();
	setTimeout(tick, 1);
	}

	tick();