Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
69 lines (58 sloc) 2.06 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Parcycle. A JavaScript particle system</title>
<style type="text/css">
body { background-color: #fff; font-size:8pt; }
#canvas { background-color: #000; }
</style>
</head>
<body>
<canvas id="canvas" width="500" height="300"></canvas>
<br/>
Check my site for a more complete example of <a href="http://www.mrspeaker.net/dev/parcycle">Parcyle in action</a>
<script src="particle.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
/* handle canvas mouse events and init */
window.addEventListener( "load", function(){
controller.init();
}, "false");
// Test controller for the particle system.
var controller = {
canvas : null,
context : null,
init : function(){
this.canvas = document.getElementById( "canvas" );
this.context = this.canvas.getContext( "2d" );
this.context.globalCompositeOperation = "lighter"; //"source-over", "lighter", "darker", "xor" are good
this.p1 = new cParticleSystem();
this.p2 = new cParticleSystem();
// Set some properties - check the class
this.p2.position = Vector.create( 300, 190 );
this.p2.startColourRandom = [ 255, 255, 255, 1 ];
this.p2.endColourRandom = [ 255, 255, 255, 1 ];
this.p2.size = 20;
this.p2.maxParticles = 20;
this.p2.duration = 10;
this.p1.init();
this.p2.init();
this.main();
},
main : function(){
this.update();
this.draw();
setTimeout( function(){ controller.main(); }, 100 );
},
update : function(){
this.p1.update( 1 ); // "1" is used as a delta... should be calculated as time between frames
this.p2.update( 1 );
},
draw : function(){
this.context.clearRect( 0, 0, 690, 452 );
this.p1.render( this.context );
this.p2.render( this.context );
}
};
</script>
</body>
</html>