Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource


Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.


Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.






                var assets = ["logo.png", "bomb.png", "fuse.mp3", "boom.mp3", "warble.mp3"];
var path = "";

const frame = new Frame("fit", 1024, 768, black, darker, assets, path, new Waiter({corner:0, backgroundColor:pink}));
frame.on("ready", ()=>{ // ES6 Arrow Function - similar to function(){}
    zog("ready from ZIM Frame"); // logs in console (F12 - choose console)

    // often need below - so consider it part of the template
    let stage = frame.stage;
    let stageW = frame.width;
    let stageH = frame.height;
    // REFERENCES for ZIM at
    // see for video and code tutorials
    // see for documentation
    // see for INTRO to ZIM
    // see for INTRO to CODE
    // THIS CODE was from a THREE HOUR build it exam for our Sheridan Interactive Media One-year Post Grad program.
    // Taken after 8 days of lessons - one day a week - class of 28 got an 80% average.
    // CODE HERE  

    // 1. Make a new label and assign it to label
    // Make the label white and have the text: "ZIM Fuse!  Light the fuse - then visit ZIM!"
    // set the alpha to .6 and the scale to .8 and position it on the stage at 30, 30
    const label = new Label({color:white, text:"ZIM Fuse!  Light the fuse - then visit ZIM!"})

    // 2. The points data comes from using a recordPoints(true) method - or see
    // Make the Squiggle have a thickness of 1 and not be interactive
    // Scale the Sqiggle twice as big and center it on the stage
    const points = [[-50.4,11.8,0,0,-30,0,30,0],[26.8,88.7,0,0,-36.7,3.7,36.7,-3.7],[12.2,-42.6,0,0,41.1,-23.5,-41.1,23.5],[82.7,23.9,0,0,-31.4,49.2,31.4,-49.2],[192.9,-73.4,0,0,-65.6,30.4,65.6,-30.4],[199.2,-19.4,0,0,-146.7,-105.1,146.7,105.1],[249.3,2.8,0,0,-5.7,-136.5,5.7,136.5],[164.7,80.7,0,0,-46.5,22.7,46.5,-22.7],[247.7,125.9,0,0,-39.2,5.5,39.2,-5.5],[181.7,27.7,0,0,57.7,17.8,-57.7,-17.8]];
    const fuse = new Squiggle({thickness:1, interactive:false, points:points}).sca(2).center();

    // 3. Make the bomb using the bomb image, scale it to .3, set its alpha to .5 and centerReg it on the stage
    const bomb = frame.asset("bomb.png")

    // 4. Create a match to light the fuse
    // this will be in a Container called match - do not set the dimensions of the container
    // add a 6x100 Rectangle with a color of tin to the match container
    // expand() the rectangle so that it is easier to drag
    const match = new Container();
    new Rectangle(6,100,tin).addTo(match).expand(); // make it easier to drag

    // 5. Create the fire with an Emitter()
    // a. The particle should be an orange circle with a radius of 5 and an alpha of .6
    // b. Use the random parameter of the Emitter to randomize the scaleX between 1.3 and 1.5
    // c. and the scaleY between 2.3 and 2.5 - this makes the flame taller than it is wide
    // d. Set the width and height of the Emitter to 20 and 40
    // e. Set the interval to 20, the life to 1000, the gravity to -2
    // f. Set the force to between a min of .2 and a max of .4 (using ZIM VEE)
    // g. Set the angle to between a min of -130 and a max of -50 (using ZIM VEE)
    // h. centerReg the Emitter and add it to the match - then move it up 40 pixels

    const fire = new Emitter({
      obj:new Circle(5, orange).alp(.6),
        scaleX:{min:1.3, max:1.5},
        scaleY:{min:2.3, max:2.5}
      force:{min:.2, max:.4},
      angle:{min:-90-40, max:-90+40}

    // 6. locate the match at the first point of the fuse - use the pointControls array (property of a Squiggle)
    // then move the match down 200
    // set the alpha of the match to 0 and animate in the alpha over 1 second to fade it in
    // set drag on the match with a drag boundary to a ZIM Boundary()
    // the Boundary() should have the match's current location in the x, 100 in the y
    // and no width (so it can't move in the x) and 500 for the height
      .animate({props:{alpha:1}, wait:1000})
      .drag({boundary:new Boundary(match.x,100,0,500), all:true});

    // 7. Make a zim Pen() and store it in pen
    // the pen will have a size of 4, a color of black and no damping
    // centerReg the pen on the stage
    // animate the pen props along the fuse path and orient false
    // wait 100 ms for the pen to be created
    // animate for a time of 10 seconds with a linear ease
    // EVENTUALLY, we will want set startPaused to true so the pen does not animate right away
    // so add this in and test it - comment it out as needed

    const pen = new Pen({damp:false, size:4, color:black}).centerReg().animate({
      props:{path:fuse, orient:false},      

    // 8. Create an emitter for the spark 
    // The emitter will use a shape object {type:shape} for its obj property
    // the shape object will also have a stroke (s) of either blue or white (use ZIM VEE)
    // and a strokeSize (ss) of 3
    // The emitter will have an interval of 50, a num of 10, a life of 200 and a decayTime of 200
    // EVENTUALLY, the emitter will have its startPaused parameter set to true - you can comment this to test, etc.
    // centerReg the emitter (important)
    const spark = new Emitter({
      obj:{type:"shape", s:[blue, white], ss:3},

    // 9. animate the emitter along the fuse squiggle with the SAME animate parameters as the Pen
    // and set the startPaused parameter to true - and comment as needed in testing, etc.
    // add a call parameter that calls a function that removes the spart and the fuse from the stage
    // In this function also call the makeExplosion() function to go to the next step
    // This way, the explosion will happen when the spark animation is done!
      props:{path:fuse, orient:false},      
      call:function () {

    // 10. Add a pressmove event to the match and collect the event object (e)
    // Inside the pressmove function, do a hitTestBounds for the following:
    // check if the first circle control point of the fuse squiggle is hitting the fire
    // use the pointCircles array property of the Squiggle - get the first element of the array
    // If these are hitting then do the following:
    // a. run the pen animation - use pauseAnimate(false)
    // b. run the spark animation
    // c. run the spark emitter - also use pauseEmitter(false)
    // d. animate the alpha of the match to 0 in 500 ms
    // e. animate the alpha of the label to 0 in 4000 ms - slow fade
    // f. assign the playing of the fuse sound to the variable fuseSound (do not use var)
    // adjust the sound with a sound object literal inside the play() method
    // make the sound be at a volume of .3 and a loop of -1 (sorry - that is CreateJS's way)
    // g. you have probably not seen this - but remove the event by using e.remove();
    // this will make it so we do not repeatedly do these things as the match continues to hit the fuse

    match.on("pressmove", function (e) {
      if (fuse.pointCircles[0].hitTestBounds(fire)) {
        match.animate({alpha:0}, 500);
        label.animate({alpha:0}, 4000);
        bomb.animate({props:{alpha:1}, time:2000, wait:8000});
        fuseSound = frame.asset("fuse.mp3").play({volume:.3, loop:-1});

    function makeExplosion() {

      // 11. Create the explosion Emitter and store it in an explosion variable (use var this time!)
      // set the obj to either a Rectangle 25x25 or a Circle with radius 15 (use ZIM VEE)
      // make the num 10 and a force of 10
      // randomize the following in the random parameter:
      // the rotation between a min of 0 and max of 360
      // the color to be blue or pink randomly
      // the regX to be a min of -50 and max of 50
      // the regY to be a min of -50 and max of 50
      // These make the particles start spread out over the bomb
      // pause the emitter with startPaused true
      var explosion = new Emitter({
        obj:[new Rectangle(25,25), new Circle(15)],
          rotation:{min:0, max:360},
          color:[blue, pink],
          regX:{min:-50, max:50},
          regY:{min:-50, max:50},

      // 12. On the next line make the emitter spurt() with a time of 500 ms
      // Play the boom sound
      // stop() the fuse sound ** comment this out if not running the other parts
      // animate the bomb to an alpha of 0 in 100 ms ** comment this out if not running the other parts
      bomb.animate({alpha:0}, 100);

      // 13. centerReg the logo asset on the stage
      // set its alpha to 0, its scale to 0
      // set the cur() to see a pointer
      // and expand() it to be clickable between the letters
        .centerReg() // make it scale from the middle
        .expand() // make it so we can click between the letters

      // 14. Animate the logo to props of alpha 1 and scale 1
      // wait 800 ms for explosion to almost finish
      // animate for 2300 ms with an elasticOut ease
      // once the animation has waited, call a function (use waitedCall)
      // and in this function play the warble sound at a volume of .8
      // When we click on the logo make it zgo() to in a new window
      // YOU ARE DONE!
          props:{alpha:1, scale:1},
          waitedCall:function () { // play the sound once we have waited
        .tap(function () {zgo("", "_blank");});

    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    stage.update(); // this is needed to show any changes

}); // end of ready