3D Pixel renderer - strange attractor

by sebleedelisle

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*15,y*15,(z*15)-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) +...