supervoxels

gibney.org : Technology : Javascript : Experiments : supervoxels

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

<input type=checkbox id=render label="render it" checked="true"> render

function ge_halton(index,base)
{
 // var base=2; // base must be a prime number
 var r = 0;
 var f = 1 / base;
 var i = index;
 while (i > 0) 
 {
  r += f * (i % base);
  i = Math.floor(i / base);
  f = f / base;
 }
 return r;
}

DD=
{
};

DD.pixelIteration=function(x,y,cx,cy)
{
 var xt = x * x - y * y + cx;
 var yt = 2 * x * y + cy;
 return {x: xt,y: yt};
}

DD.isInSet=function(cx,cy,cz)
{
 var bq = 0; 
 var i  = 0;
 var x1  = 0; 
 var y1  = 0;
 var x2  = 0; 
 var y2  = 0;

var o1;
 var o2;

while ( bq < 4 && i < 125 )
 {
  o1=this.pixelIteration(x1,y1,cx,cy);
  o2=this.pixelIteration(x2,y2,cx,cz);
  x1=o1.x;
  y1=o1.y;
  x2=o2.x;
  y2=o2.y;

// leak:
/*
  x1+=(x1-o2.x)*cz;
  y1+=(y1-o2.y)*cz;
  x2+=(x2-o1.x)*cy;
  y2+=(y2-o1.y)*cy;
*/

// ketten:
  var dx=x1-x2;
  var dy=y1-y2;
  var dist=Math.sqrt(dx*dx+dy*dy);
  x1+=0.5*dx*(1-dist);
  y1+=0.5*dy*(1-dist);
  x2-=0.5*dx*(1-dist);
  y2-=0.5*dy*(1-dist);

i++;
  bq = x1 * x1  + x2 * x2 + y1 * y1  + y2 * y2 ;
 }
 return (i>100 && i<125);
}

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;
 nr_tries=0;

particles=[];

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

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

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 generateSprite() 
{
 var canvas = document.createElement( 'canvas' );
 canvas.width  = 16;
 canvas.height = 16;
 var context = canvas.getContext( '2d' );
 var gradient = context.createRadialGradient( canvas.width / 6, canvas.height / 6, 0, canvas.width / 2, canvas.height / 2, canvas.width / 2 );
 gradient.addColorStop( 0,   'rgba(255,255,255,1)' );
 gradient.addColorStop( 0.99,   'rgba(0,0,0,1)' );
 gradient.addColorStop( 1,   'rgba(0,0,0,0)' );
 context.fillStyle = gradient;
 context.fillRect( 0, 0, canvas.width, canvas.height );
 return canvas;
}

function addParticle(x,y,z)
{
 // var material=new THREE.ParticleCanvasMaterial( { color: 0, program: program } );

var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture( generateSprite() ) } );
  particle = new THREE.Particle( material );
  particle.position.x = x;
  particle.position.y = y;
  particle.position.z = z;
  particle.scale.x = 1;
  particle.scale.y = 1;
  particles[nr_particles]=particle;
  group.addChild( particles[nr_particles] );
  nr_particles++;
}

function render()
{

for (var i=0; i<10000; i++)
 {
  var x=ge_halton(nr_tries,2)*8-4;
  var y=ge_halton(nr_tries,3)*8-4;
  var z=ge_halton(nr_tries,5)*8-4;
  nr_tries++;
  if (DD.isInSet(x,y,z)) addParticle(x*500,y*500,z*500);
 }
 document.title="nr_particles: "+nr_particles;
 step_nr++;

if (document.getElementById("render").checked)
 {
  // camera.position.x += ( mouseX - camera.position.x ) * 0.05;
  // camera.position.y += ( - mouseY - camera.position.y ) * 0.05;

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

group.rotation.y+=0.05;

renderer.render( scene, camera );
 }

}

</script>

</body></html>

Create a new entry at this position