gibney.org
:
Technology
:
Javascript
:
Experiments
:
supervoxels2
(Entry Nr. 2095, by user 1 |
edit
)
<html><body> <input type=checkbox id=render label="render it" checked="true"> render <script src="http://raw.gibney.org/requestAnimationFrame.js"></script> <script src="http://raw.gibney.org/three.js"></script> <script> 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.1*dx*(1-dist); y1+=0.1*dy*(1-dist); x2-=0.1*dx*(1-dist); y2-=0.1*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