ZIM PARTICLE EMITTER TUTORIAL
<!doctype html> <html> <head> <meta charset="utf-8" /> <title>ZIM Fire Flame - Particle Emitter for HTML Canvas, JavaScript, CreateJS</title> <!-- Welcome to ZIM at http://zimjs.com - Code Interactive Media Pizzazz! --> <!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS http://createjs.com --> <!-- Founded by Inventor Dan Zen - http://danzen.com - Canadian New Media Award Winner --> <!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate --> <!-- as of ZIM 4.3.0 load createjs namespace first --> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <script>var zon = true; // true for comments from zim code</script> <script src="http://d309knd7es5f10.cloudfront.net/zim_5.js"></script> <script src="http://d309knd7es5f10.cloudfront.net/game_1.0.2.js"></script> <!-- use zimjs.com/code/distill for minified individual functions! --> <style> body {background-color:#000;} </style> <script> // SCALING OPTIONS // scaling can have values as follows with full being the default // "fit" sets canvas and stage to dimensions and scales to fit inside window size // "outside" sets canvas and stage to dimensions and scales to fit outside window size // "full" sets stage to window size with no scaling // "tagID" add canvas to HTML tag of ID - set to dimensions if provided - no scaling var scaling = "fit"; // fit scales to fit the browser window while keeping the aspect ratio var width = 1024; // can go higher... var height = 768; var frame = new zim.Frame(scaling, width, height); // see docs for more options and info frame.on("ready", function() { zog("ready from ZIM Frame"); var stage = frame.stage; var stageW = frame.width; var stageH = frame.height; frame.color = frame.darker; var meter = new zim.Meter(stage); // make a sink that the particles will gravitate towards // we will animate the sink down below with zim.wiggle() // this is what causes the particles to wave back and forth and up and down var sink = new zim.Circle(10, frame.pink).centerReg(stage).mov(0,-220).alp(0); // create a zim.Emitter for emitting particles var fire = new zim.Emitter({ // Here we specify the object to emit (the Emitter clones the object) // We can pass in a single object or any ZIM VEE value from which each particle will be picked // ZIM VEE values are as follows: // 1. an Array of values to pick from - eg. ["red", "green", "blue"] // 2. a Function that returns a value - eg. function(){return Date.now();} // 3. a ZIM RAND object literal - eg. {min:10, max:20, integer:true, negative:true} max is required (not applicable for the obj parameter) // 4. any combination of the above - eg. ["red", function(){x>100?["green", "blue"]:"yellow"}] zik is recursive // 5. a single value such as a Number, String, zim.Rectangle(), etc. this just passes through unchanged (like we have here) // the emitter will use zik() to pick for each particle it emits obj:new zim.Circle(32, frame.blue).alp(.6), // adjust properties randomly for each particle // the values for the properties can be any ZIM VEE value // can also use this to set a property of a cloned emitter - just put the value you want // for example: random:{x:300} would set the x of all the particles to 300 // see also horizontal and vertical parameters for random positioning... random:{ scaleX:{min:1.3, max:1.5}, scaleY:{min:2.3, max:2.5} }, // here is the sink that the particles will be attracted to // we dynamically change the sinkForce with zim.wiggle() down below sink:sink, sinkForce:2, interval:20, life:1500, fade:true, // default decayTime:1000, // default gravity:0, minForce:.6, maxForce:.8, minAngle:-90-40, maxAngle:-90+40, layers:"random", cache:zim.mobile() // default }) .centerReg(stage) .mov(0,120); // copy the flame and make it smaller and pink var pinkFire = fire.clone() .centerReg(stage) .alp(.2) .sca(.7) .mov(0,150); pinkFire.obj.color = frame.pink; pinkFire.interval = 10; pinkFire.maxForce = .5; pinkFire.minAngle = -90-90, pinkFire.maxAngle = -90+90, pinkFire.life = 2200; pinkFire.decayTime = 1800; pinkFire.random = { scaleX:{min:1.3, max:1.5}, scaleY:{min:1.9, max:2.1} }; // use zim.wiggle() to change values back and forth // target, property, baseAmount, minAmount, maxAmount, minTime, maxTime, ease, integer, id fire.wiggle("sinkForce", 4, 1, 1, 5000, 8000); sink.wiggle("x", stageW/2, 10, 30, 300, 1000); frame.loadAssets(["icon4.png", "flame.mp3", "burning.mp3"], "assets/"); frame.on("complete", function() { // play some sounds // iOS works fine if you press early enough - but if not, then only plays one of these // we use two sound files to hide the gap between the loop if (zim.mobile() != "ios") { frame.asset("flame.mp3").play({loop:-1, volume:.6}); zim.timeout(1000, function(){frame.asset("flame.mp3").play({loop:-1, volume:.6});}); } frame.asset("burning.mp3").play({volume:.6}); // make it so we change colors of the main flame when we click the icon var colors = [frame.blue, frame.yellow, frame.green, frame.purple, frame.orange]; var currentColor = 0; var icon = frame.asset("icon4.png").centerReg(stage).mov(0,200).sca(.75); icon.cursor = "pointer"; icon.on("click", function() { // the flame may have pooled particles with their color // so to change the color we need to stop using particles from the pool // this will let the current pooled particles finish and then fill the pool with new particles fire.clearPool(); // change the color of the flame fire.obj.color = colors[++currentColor%colors.length]; frame.asset("burning.mp3").play({volume:zim.rand(.5,1)}); }); var rect = new zim.Rectangle(icon.width, icon.height) .centerReg(stage).pos(icon.x, icon.y).alp(.3); // just darken the icon }); var label = new zim.Label({text:"ZIM EMITTER", color:frame.dark}) .addTo(stage).pos(30,30).ske(10); var menu = new zim.Tabs({ tabs:["MENU","CODE","ZIM"], width:400, currentEnabled:true, offColor:frame.dark, rollColor:frame.blue }).addTo(stage).pos(stageW-400, 14); menu.selectedIndex = -1; var urls = ["index.html","code/particle-emitter-flame.html","http://zimjs.com"]; menu.on("change", function() {zgo(urls[menu.selectedIndex]); menu.selectedIndex = -1;}); stage.update(); // update the stage to see any changes }); // end of ready </script> </head> <body> <!-- canvas with id="myCanvas" is made by zim Frame --> </body> </html>