Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

more work

  • Loading branch information...
commit 6fd488785c1d9136409aa6fb166e9a1dd456d9bd 1 parent 5097b54
@jeromeetienne authored
View
28 examples/flamethrower/index.html
@@ -17,8 +17,7 @@
<script src="../plugins/effect.dieifcontained.js"></script>
-<script src="./loadflames.js"></script>
-<script src="./gowiththeflow.js"></script>
+<script src="../vendor/loadtremulousparticles.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 height = image.height * 2;
- ctx.drawImage(image,
- position.x - width/2 - 250,
- position.y - height/2,
- 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();
- }
+
+ var width = image.width * 2;
+ var height = image.height * 2;
+ ctx.drawImage(image,
+ position.x - width /2 - 250,
+ position.y - height/2,
+ width, height)
}).pushTo(emitter);
- //emitter.pushRendererCanvasImage();
-
emitter.start();
var deltaTime = 1/60;
View
5 examples/flamethrower/loader.html
@@ -19,8 +19,7 @@
<script src="../canvas/fireworks.renderer.canvas.js"></script>
-<script src="loadflames.js"></script>
-<script src="gowiththeflow.js"></script>
+<script src="../vendor/loadtremulousparticles.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');
View
38 examples/flamethrower/loadflames.js → examples/flamethrower/loadtremulousparticles.js
@@ -1,15 +1,15 @@
-function loadFlames(urls, callback){
- var images = [];
+function loadTremulousParticles(urls, callback){
+ 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);
+ }
+ }
+ }
+ };
}
View
136 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>
+
+
+
+
+
+
+
+
+
+
+
View
91 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>
+
+
+
+
+
+
+
+
+
+
+
View
2  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()
View
1  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,
View
93 examples/vendor/loadtremulousparticles.js
@@ -0,0 +1,93 @@
+function loadTremulousParticles(urls, callback){
+ var images = new Array(urls.length);
+
+ // load all the images and convert them
+ var flow = Flow();
+ 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[idx] = resultImage;
+ next();
+ });
+ };
+ image.src = url;
+ });
+ });
+
+ // build the function which is run once all is loaded
+ flow.seq(function(){
+ //console.log("all flow completed")
+ // notify the caller
+ callback(images, urls);
+ })
+
+ /**
+ * 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*16
+ */
+ function convertTremulousImage(image, callback){
+ // create a canvas
+ var canvas = document.createElement('canvas');
+ canvas.width = image.width;
+ canvas.height = image.height;
+ var ctx = canvas.getContext('2d');
+ // draw the image in it
+ ctx.drawImage(image, 0, 0);
+
+ // create an alpha channel based on color luminance
+ var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ var p = imgData.data;
+ for(var i = 0, y = 0; y < canvas.height; y++){
+ for(var x = 0; x < canvas.width; x++, i += 4){
+ var luminance = (0.2126*p[i+0]) + (0.7152*p[i+1]) + (0.0722*p[i+2]);
+
+ luminance = luminance/255;
+ //luminance = luminance * luminance * luminance* luminance;
+ //luminance = luminance * luminance;
+ p[i+3] = Math.floor(luminance * 16 * 255);
+ //p[i+3] = luminance * 4;
+ }
+ }
+ // put the generated image in the canvas
+ ctx.putImageData(imgData, 0, 0);
+ // produce a Image object based on canvas.toDataURL
+ var newImage = new Image;
+ newImage.onload = function(){
+ // notify the caller
+ callback(newImage, image);
+ };
+ 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);
+ }
+ }
+ }
+ };
+}
Please sign in to comment.
Something went wrong with that request. Please try again.