3D Pixel renderer - strange attractor
CSS
body {
background:black;
margin:0px;
overflow:hidden;
}
JavaScript
var canvas = document.createElement('canvas'),
width = canvas.width = window.innerWidth,
height = canvas.height = window.innerHeight,
halfWidth = width / 2,
halfHeight = height / 2,
fov = 250,
counter = 0,
mouseX = 120,
mouseY = 73;
var context = canvas.getContext('2d');
document.body.appendChild(canvas);
document.body.addEventListener("mousemove", onMouseMove);
var pixels = [];
// some variables to calculate the strange attractor
var x = 0.1, y=0.1, z=0.1;
var a = 5,
b = 15,
c = 1,
interval = 0.01;
for(var i = 0; i<8000; i++) {
// this is the maths for the strange attractor
newX = x - (a * x) * interval + (a * y) * interval;
newY = y + (b * x) * interval - y * interval - (z * x) * interval;
newZ = z - (c * z) * interval + (x * y) * interval;
x = newX;
y = newY;
z = newZ;
// add a pixel particle at that position
// (we're scaling it up and pushing it
// back a little too)
pixels.push(new Pixel3D(x*10,y*10,(z*10)-200));
}
// call the render function 30 times a second
setInterval(render, 1000 / 30);
function render() {
counter++;
// fill the canvas with transparent black
// to create a trails effect
context.fillStyle = "rgba(0,0,0,0.2)";
context.fillRect(0, 0, width, height);
// and get the imagedata out of it
var imagedata = context.getImageData(0, 0, canvas.width, canvas.height);
// iterate through every point in the array
var i = pixels.length;
while (i--) {
var pixel = pixels[i];
// here's the 3D to 2D formula, first work out
// scale for that pixel's z position (distance from
// camera)
var scale = fov / (fov + pixel.z);
// and multiply our 3D x and y to get our
// 2D x and y. Add halfWidth and halfHeight
// so that our 2D origin is in the middle of
// the screen.
var x2d = (pixel.x * scale) +...