Three.js ~ Chaos-like Motion #02

500 cubes moving & spinning sin sin sin motion seemingly chaotic with free added jiggling

by Theo Armour

HTML

<script src='http://mrdoob.github.com/three.js/build/three.min.js'></script>

CSS

body {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
    background-color: #f0f0f0;
}

JavaScript

var container, camera, scene, renderer;

var group = new THREE.Object3D();

var mouseX = 0,
    mouseY = 0;

var j = 0;

init();
animate();

function init() {
    container = document.createElement('div');
    document.body.appendChild(container);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
    // camera.target.position.set(0, 0, 0);
    camera.position.set(-5, -5, 5);
    camera.up.set(0, 0, 10);
    scene.add( camera );

    var material = new THREE.MeshBasicMaterial({
        color: 0xff0000
    });
    var geometry = new THREE.CubeGeometry(1, 1, 1);
    var mesh = new THREE.Mesh(geometry, material);
    mesh.position.set(0, 0, 0.5);
    scene.add(mesh);

    geometry = new THREE.CubeGeometry(2, 2, 2);
    material = new THREE.MeshNormalMaterial({
        opacity: 0.5
    });
    var rx, ry, rz;

    for (var i = 0; i < 500; i++) {
        mesh = new THREE.Mesh(geometry, material);

        rx = Math.sin(i * 0.7) * 5;
        ry = Math.cos(i * 0.3) * 5;
        rz = Math.sin(i * 0.2) * 5;

        mesh.position.x = rx;
        mesh.position.y = ry;
        mesh.position.z = rz;
        mesh.rotation.x = rx;
        mesh.rotation.y = ry;
        mesh.rotation.z = rz;
        group.add(mesh);
    }

    scene.add(group);

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    container.appendChild(renderer.domElement);

    container.onmousemove = onDocumentMouseMove;
}

function onDocumentMouseMove(event) {
    mouseX = (event.clientX - window.innerWidth / 2) * 0.05;
    mouseY = (event.clientY - window.innerHeight / 2) * 0.05;
}

function animate() {
    requestAnimationFrame(animate);
    render();
}

function render() {
    var tim = new Date().getTime();

    for (var i = 0; i < 500; i++) {
        group.children[i].rotation.x += Math.sin(tim * 0.0007) * 0.03;
        group.children[i].rotation.y += Math.sin(tim * 0.0003)...