Create your blog and photo album with postbit
Create your blog and photo album

Create new post

Content:

Upload a picture:
Tags (keywords separated by comma)

Save Cancel
The JavaScript Blog js:   Followers: 3 ; Following: 3

Explore The JavaScript Blog's photo albums:
Javascript tools (2)
Photos from posts (7)

Particle waves demo



Using javascript and canvas html5 element. Using "three js" framework.

Interactrive demo:
http://mrdoob.github.com/three.js/examples/canvas_particles_waves.html

Source code of the render function to generate the particles-wave:

function render() {

camera.position.x += ( mouseX - camera.position.x ) * .05;
camera.position.y += ( - mouseY - camera.position.y ) * .05;
camera.lookAt( scene.position );

var i = 0;

for ( var ix = 0; ix < AMOUNTX; ix ++ ) {

for ( var iy = 0; iy < AMOUNTY; iy ++ ) {

particle = particles[ i++ ];
particle.position.y = ( Math.sin( ( ix + count ) * 0.3 ) * 50 ) + ( Math.sin( ( iy + count ) * 0.5 ) * 50 );
particle.scale.x = particle.scale.y = ( Math.sin( ( ix + count ) * 0.3 ) + 1 ) * 2 + ( Math.sin( ( iy + count ) * 0.5 ) + 1 ) * 2;
}
}

renderer.render( scene, camera );
count += 0.1;

}

Post by The JavaScript Blog (2012-08-01 12:29)

Post your comment:

Name: Email: Site:




| Explore users | New posts | Create your blog | Create your photo album |
| About Postbit | Our blog | Terms of use | Contact Postbit |


Copyright © 2017 - postbit.com