more work

jeromeetienne · Jul 13, 2012 · 6fd4887 · 6fd4887
1 parent 5097b54
commit 6fd4887
Show file tree

Hide file tree

Showing 8 changed files with 365 additions and 29 deletions.
diff --git a/examples/flamethrower/index.html b/examples/flamethrower/index.html
@@ -17,8 +17,7 @@
 <script src="../plugins/effect.dieifcontained.js"></script>
 
 
-<script src="./loadflames.js"></script>
+<script src="../vendor/loadtremulousparticles.js"></script>
-<script src="./gowiththeflow.js"></script>
 
 <body><script>
 	var urls	= [
@@ -72,7 +71,7 @@
 	ctx.globalCompositeOperation	= 'lighter';
 
 
-	loadFlames(urls, function(images){
+	loadTremulousParticles(urls, function(images){
 		//console.log("images", images)
 		console.log("all images loaded")
 
@@ -111,24 +110,15 @@
 			var canonAge	= particle.xAge.curAge / particle.xAge.maxAge;
 			var imageIdx	= Math.floor(canonAge * images.length);
 			var image	= images[imageIdx];
-			if( true ){
+
-				var width	= image.width	* 2;
+			var width	= image.width	* 2;
-				var height	= image.height	* 2;
+			var height	= image.height	* 2;
-				ctx.drawImage(image, 
+			ctx.drawImage(image, 
-					position.x - width/2 - 250,
+				position.x - width /2 - 250,
-					position.y - height/2,
+				position.y - height/2,
-					width, height)
+				width, height)
-			}
-			if(false){
-				ctx.fillStyle	= "rgb(200,0,0)";
-				ctx.beginPath();
-				ctx.arc(position.x, position.y, 4, 0, Math.PI*2, true); 
-				ctx.fill();				
-			}
 		}).pushTo(emitter);
 
-		//emitter.pushRendererCanvasImage();
-
 		emitter.start();
 
 		var deltaTime	= 1/60;

diff --git a/examples/flamethrower/loader.html b/examples/flamethrower/loader.html
@@ -19,8 +19,7 @@
 <script src="../canvas/fireworks.renderer.canvas.js"></script>
 
 
-<script src="loadflames.js"></script>
+<script src="../vendor/loadtremulousparticles.js"></script>
-<script src="gowiththeflow.js"></script>
 
 <body><script>
 	var urls	= [
@@ -52,7 +51,7 @@
 	];
 	var images	= null;
 
-	loadFlames(urls, function(images){
+	loadTremulousParticles(urls, function(images){
 		console.log("images", images)
 		// create a canvas
 		var canvas	= document.createElement('canvas');

diff --git a/examples/flamethrower/loadflames.js → ...es/flamethrower/loadtremulousparticles.js b/examples/flamethrower/loadflames.js → ...es/flamethrower/loadtremulousparticles.js
@@ -1,15 +1,15 @@
-function loadFlames(urls, callback){
+function loadTremulousParticles(urls, callback){
-	var images	= [];
+	var images	= new Array(urls.length);
 
 	// load all the images and convert them
 	var flow	= Flow();
-	urls.forEach(function(url){
+	urls.forEach(function(url, idx){
 		flow.par(function(next){
 			var image	= new Image;
 			image.onload	= function(){
 				convertTremulousImage(image, function(resultImage, originalImage){
 					//console.log("image converted", resultImage);
-					images.push(resultImage);
+					images[idx]	= resultImage;
 					next();
 				});
 			};
@@ -28,7 +28,7 @@ function loadFlames(urls, callback){
 	 * Convert images from tremulous. 
 	 * They are originally in .tga without alpha channel.
 	 * The alpha channel is created based on the luminance of each pixel.
-	 * alpha === luminance*4
+	 * alpha === luminance*16
 	*/
 	function convertTremulousImage(image, callback){
 		// create a canvas
@@ -50,7 +50,7 @@ function loadFlames(urls, callback){
 				//luminance	= luminance * luminance * luminance* luminance;
 				//luminance	= luminance * luminance;
 				p[i+3]		= Math.floor(luminance * 16 * 255);
-				//p[i+3]		= luminance * 4;
+				//p[i+3]	= luminance * 4;
 			}
 		}
 		// put the generated image in the canvas
@@ -64,4 +64,30 @@ function loadFlames(urls, callback){
 		newImage.src	= ctx.canvas.toDataURL();
 	}
 
+	return;
+
+	// from gowiththeflow.js - https://github.com/jeromeetienne/gowiththeflow.js
+	function Flow(){
+		var self, stack = [], timerId = setTimeout(function(){ timerId = null; self._next(); }, 0);
+		return self = {
+			destroy : function(){ timerId && clearTimeout(timerId); },
+			par	: function(callback, isSeq){
+				if(isSeq || !(stack[stack.length-1] instanceof Array)) stack.push([]);
+				stack[stack.length-1].push(callback);
+				return self;
+			},seq	: function(callback){ return self.par(callback, true);	},
+			_next	: function(err, result){
+				var errors = [], results = [], callbacks = stack.shift() || [], nbReturn = callbacks.length, isSeq = nbReturn == 1;
+				for(var i = 0; i < callbacks.length; i++){
+					(function(fct, index){
+						fct(function(error, result){
+							errors[index]	= error;
+							results[index]	= result;		
+							if(--nbReturn == 0)	self._next(isSeq?errors[0]:errors, isSeq?results[0]:results)
+						}, err, result)
+					})(callbacks[i], i);
+				}
+			}
+		}
+	};
 }
diff --git a/examples/newapi/canvas_flamethrower.html b/examples/newapi/canvas_flamethrower.html
@@ -0,0 +1,136 @@
+<!doctype html><title>Example of firework.js</title>
+
+<script src="../../src/core.js"></script>
+<script src="../../src/emitter.js"></script>
+<script src="../../src/particle.js"></script>
+<script src="../../src/effect.js"></script>
+<script src="../../src/spawner.js"></script>
+<script src="../../src/shape.js"></script>
+<script src="../../src/vector.js"></script>
+
+
+<script src="../plugins/spawner.rate.js"></script>
+<script src="../plugins/shape.box.js"></script>
+<script src="../plugins/shape.sphere.js"></script>
+<script src="../plugins/shape.point.js"></script>
+
+<script src="./effect.friction.js"></script>
+<script src="./effect.lifetime.js"></script>
+<script src="./effect.position.js"></script>
+<script src="./effect.velocity.js"></script>
+<script src="./effect.acceleration.js"></script>
+<script src="./effect.radialvelocity.js"></script>
+<script src="./effect.randomvelocitydrift.js"></script>
+<script src="./effect.rendertocanvas.js"></script>
+
+<script src="../vendor/loadtremulousparticles.js"></script>
+
+<body><script>
+	// build canvas element
+	var canvas	= document.createElement('canvas');
+	canvas.width	= window.innerWidth;
+	canvas.height	= window.innerHeight;
+	document.body.appendChild(canvas);
+	// canvas.style
+	canvas.style.position	= "absolute";
+	canvas.style.left	= 0;
+	canvas.style.top	= 0;
+	// setup ctx
+	var ctx		= canvas.getContext('2d');
+
+	// clear canvas and center it
+	ctx.fillStyle	= 'rgba(0,0,0,1)';
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+	ctx.translate(canvas.width/2, canvas.height/2)
+
+	ctx.globalAlpha			= 0.2;
+	ctx.globalCompositeOperation	= 'lighter';
+
+	var urls	= [
+		"../assets/images/flame/flame00.png",
+		"../assets/images/flame/flame01.png",
+		"../assets/images/flame/flame02.png",
+		"../assets/images/flame/flame03.png",
+		"../assets/images/flame/flame04.png",
+		"../assets/images/flame/flame05.png",
+		"../assets/images/flame/flame06.png",
+		"../assets/images/flame/flame07.png",
+		"../assets/images/flame/flame08.png",
+		"../assets/images/flame/flame09.png",
+		"../assets/images/flame/flame10.png",
+		"../assets/images/flame/flame11.png",
+		"../assets/images/flame/flame12.png",
+		"../assets/images/flame/flame13.png",
+		"../assets/images/flame/flame14.png",
+		"../assets/images/flame/flame15.png",
+		"../assets/images/flame/flame16.png",
+		"../assets/images/flame/flame17.png",
+		"../assets/images/flame/flame18.png",
+		"../assets/images/flame/flame19.png",
+		"../assets/images/flame/flame20.png",
+		"../assets/images/flame/flame21.png",
+		"../assets/images/flame/flame22.png",
+		"../assets/images/flame/flame23.png",
+		"../assets/images/flame/flame24.png"
+	];
+
+
+	loadTremulousParticles(urls, function(images){
+		//console.log("images", images)
+		console.log("all images loaded")
+		var emitter	= Fireworks.createEmitter({nParticles : 400})
+			.useSpawnerSteadyRate(60)
+			.effectsStackBuilder()
+				.position(Fireworks.createShapeSphere(0, 0, 0, 10))
+				.velocity(Fireworks.createShapeSphere(750, 0, 0, 150))
+				.acceleration({
+					effectId	: 'gravity',
+					shape		: Fireworks.createShapePoint(0, -180, 0)
+				})
+				.lifeTime(1.5)
+				.randomVelocityDrift(Fireworks.createVector(0, 1000, 0))
+				.createEffect("renderer")
+					.onRender(function(particle){
+						var position	= particle.get('position').vector;
+						var canonAge	= particle.get('lifeTime').normalizedAge();
+						var imageIdx	= Math.floor(canonAge * (images.length-3));
+						var image	= images[imageIdx+3];
+
+						var width	= image.width	* 2;
+						var height	= image.height	* 2;
+						ctx.drawImage(image
+							, position.x - width /2 - 450
+							, position.y - height/2
+							, width, height)
+					}).back()
+				.back()
+			.start();
+
+		setInterval(function(){
+			// clear the screen
+			ctx.save();
+			ctx.globalAlpha			= 1;
+			ctx.globalCompositeOperation	= 'copy';
+			ctx.fillStyle = "rgb(0,0,0)";
+			ctx.fillRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
+			ctx.restore();
+			// set the fillStyle of the particles
+			ctx.fillStyle	= 'rgba(127,0,255, 0.2)';
+
+			// update emitter and render it
+			var deltaTime	= 1/60;
+			emitter.update(deltaTime).render();
+		}, 1000/60);
+	});
+</script></body>
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/newapi/canvas_smoke.html b/examples/newapi/canvas_smoke.html
@@ -0,0 +1,91 @@
+<!doctype html><title>Example of firework.js</title>
+
+<script src="../../src/core.js"></script>
+<script src="../../src/emitter.js"></script>
+<script src="../../src/particle.js"></script>
+<script src="../../src/effect.js"></script>
+<script src="../../src/spawner.js"></script>
+<script src="../../src/shape.js"></script>
+<script src="../../src/vector.js"></script>
+
+
+<script src="../plugins/spawner.rate.js"></script>
+<script src="../plugins/shape.box.js"></script>
+<script src="../plugins/shape.sphere.js"></script>
+<script src="../plugins/shape.point.js"></script>
+
+<script src="./effect.friction.js"></script>
+<script src="./effect.lifetime.js"></script>
+<script src="./effect.position.js"></script>
+<script src="./effect.velocity.js"></script>
+<script src="./effect.radialvelocity.js"></script>
+<script src="./effect.randomvelocitydrift.js"></script>
+<script src="./effect.rendertocanvas.js"></script>
+
+<body><script>
+	// build canvas element
+	var canvas	= document.createElement('canvas');
+	canvas.width	= window.innerWidth;
+	canvas.height	= window.innerHeight;
+	document.body.appendChild(canvas);
+	// canvas.style
+	canvas.style.position	= "absolute";
+	canvas.style.left	= 0;
+	canvas.style.top	= 0;
+	// setup ctx
+	var ctx		= canvas.getContext('2d');
+
+	// clear canvas and center it
+	ctx.fillStyle	= 'rgba(0,0,0,1)';
+	ctx.fillRect(0, 0, canvas.width, canvas.height);
+	ctx.translate(canvas.width/2, canvas.height/2)
+
+
+	var emitter	= Fireworks.createEmitter({nParticles : 400})
+		.useSpawnerSteadyRate(40)
+		.effectsStackBuilder()
+			.position(Fireworks.createShapeSphere(0, 0, 0, 10))
+			.radialVelocity(100, 200)
+			.createEffect('gravity', {
+					gravity	: new Fireworks.Vector(0, 2, 0)
+				}).onUpdate(function(particle, deltaTime){
+					var velocity	= particle.get('velocity').vector;
+					var gravity	= this.opts.gravity;
+					velocity.addSelf( gravity )
+				}).back()
+			.friction(0.985)
+			.lifeTime(2, 3)
+			.randomVelocityDrift(Fireworks.createVector(600, 600, 0))
+			.renderToCanvas({
+				ctx	: ctx,
+				type	: 'arc'
+			})
+			.back()
+		.start();
+
+	setInterval(function(){
+		// clear the screen
+		ctx.save();
+		ctx.globalAlpha = 0.025;
+		ctx.fillStyle = "rgb(0,0,0)";
+		ctx.fillRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
+		ctx.restore();
+		// set the fillStyle of the particles
+		ctx.fillStyle	= 'rgba(127,0,255, 0.2)';
+
+		// update emitter and render it
+		var deltaTime	= 1/60;
+		emitter.update(deltaTime).render();
+	}, 1000/60);
+</script></body>
+
+
+
+
+
+
+
+
+
+
+
diff --git a/examples/newapi/effect.acceleration.js b/examples/newapi/effect.acceleration.js
@@ -8,7 +8,7 @@ Fireworks.EffectsStackBuilder.prototype.acceleration	= function(opts)
 	console.assert( opts.shape instanceof Fireworks.Shape );
 	// create the effect itself
 	Fireworks.createEffect(effectId, {
-		shape	: this.opts.shape
+		shape	: opts.shape
 	}).onCreate(function(particle){
 		particle.set('acceleration', {
 			vector	: new Fireworks.Vector()

diff --git a/examples/newapi/effect.lifetime.js b/examples/newapi/effect.lifetime.js
@@ -9,6 +9,7 @@ Fireworks.EffectsStackBuilder.prototype.lifeTime	= function(minAge, maxAge)
 	if( maxAge === undefined )	maxAge	= minAge;
 	console.assert( maxAge !== undefined )
 	// create the effect itself
+	var emitter	= this._emitter;
 	Fireworks.createEffect('lifeTime', {
 		minAge	: minAge,
 		maxAge	: maxAge,