voxelclock

gibney.org : Technology : Javascript : Experiments : voxelclock

(Entry Nr. 2087, by user 1 | edit)

var container, stats;
var camera, scene, renderer, group, particle;
var mouseX = 0, mouseY = 0;

var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

init();
animate();

function init()
{
 nr_particles=0;
 step_nr=0;

particles=[];

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

camera = new THREE.Camera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
 camera.position.z = 1000;

scene = new THREE.Scene();

var PI2 = Math.PI * 2;
 program = function ( context )
 {
  context.beginPath();
  context.arc( 0, 0, 1, 0, PI2, true );
  context.closePath();
  context.fill();
 }

group = new THREE.Object3D();
 scene.addObject( group );

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

/*
 stats = new Stats();
 stats.domElement.style.position = '';
 stats.domElement.style.top = '0px';
 container.appendChild( stats.domElement );
 */

document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 document.addEventListener( 'touchmove', onDocumentTouchMove, false );
}

function onDocumentMouseMove( event )
{
 mouseX = event.clientX - windowHalfX;
 mouseY = event.clientY - windowHalfY;
}

function onDocumentTouchStart( event )
{
 if ( event.touches.length == 1 )
 {
  event.preventDefault();
  mouseX = event.touches[ 0 ].pageX - windowHalfX;
  mouseY = event.touches[ 0 ].pageY - windowHalfY;
 }
}

function onDocumentTouchMove( event )
{
 if ( event.touches.length == 1 )
 {
  event.preventDefault();
  mouseX = event.touches[ 0 ].pageX - windowHalfX;
  mouseY = event.touches[ 0 ].pageY - windowHalfY;
 }
}

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

function render()
{

if (window.nr_particles<1000)
 {
  var material=new THREE.ParticleCanvasMaterial( { color: Math.random() * 0x808008 + 0x808080, program: program } );
  particle = new THREE.Particle( material );
  var dist=Math.pow(nr_particles,0.5);
  particle.position.x = 0;
  particle.position.y = 0;
  particle.position.z = 0;
  particle.scale.x = particle.scale.y = 10;
  particles[nr_particles]=particle;
  group.addChild( particles[nr_particles] );
  window.nr_particles++;
 }

for (var i=0; i<nr_particles;i++)
 {
  var dist=Math.pow(i,0.5);

var radius=i*(600/nr_particles)*0.8;
  var speed=-i/20000;

particles[i].position.x=Math.cos(step_nr*speed)*radius;
  particles[i].position.y=Math.sin(step_nr*speed)*radius;
  particles[i].position.z=Math.sin(particles[i].position.x/150)*60+Math.cos(particles[i].position.y/150)*60;

// particles[i].position.x=Math.sin(i/100) * 20*dist-100;;
  // particles[i].position.y=Math.cos(i/100) * 20*dist-100;;
 }

step_nr++;

// camera.position.x += ( mouseX - camera.position.x ) * 0.05;
 // camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

group.rotation.y += 0.01;
 // group.rotation.x = 0.01*mouseY;

renderer.render( scene, camera );
}

</script>

</body></html>

Create a new entry at this position