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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation


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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

              var assets = ["logo.png", "bomb.png", "fuse.mp3", "boom.mp3", "warble.mp3"];
var path = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1604712/";

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 http://zimjs.com
    // see http://zimjs.com/learn.html for video and code tutorials
    // see http://zimjs.com/docs.html for documentation
    // see https://www.youtube.com/watch?v=pUjHFptXspM for INTRO to ZIM
    // see https://www.youtube.com/watch?v=v7OT0YrDWiY 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 https://zimjs.com/nio/paths.html
    // 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 https://zimjs.com in a new window
      // YOU ARE DONE!
          props:{alpha:1, scale:1},
          waitedCall:function () { // play the sound once we have waited
        .tap(function () {zgo("https://zimjs.com", "_blank");});

    // https://zimjs.com/docs.html?item=Frame
    // https://zimjs.com/docs.html?item=Container
    // https://zimjs.com/docs.html?item=Circle
    // https://zimjs.com/docs.html?item=Rectangle
    // https://zimjs.com/docs.html?item=Squiggle
    // https://zimjs.com/docs.html?item=Label
    // https://zimjs.com/docs.html?item=Waiter
    // https://zimjs.com/docs.html?item=tap
    // https://zimjs.com/docs.html?item=drag
    // https://zimjs.com/docs.html?item=hitTestBounds
    // https://zimjs.com/docs.html?item=animate
    // https://zimjs.com/docs.html?item=pauseAnimate
    // https://zimjs.com/docs.html?item=cur
    // https://zimjs.com/docs.html?item=pos
    // https://zimjs.com/docs.html?item=mov
    // https://zimjs.com/docs.html?item=alp
    // https://zimjs.com/docs.html?item=sca
    // https://zimjs.com/docs.html?item=addTo
    // https://zimjs.com/docs.html?item=removeFrom
    // https://zimjs.com/docs.html?item=centerReg
    // https://zimjs.com/docs.html?item=center
    // https://zimjs.com/docs.html?item=expand
    // https://zimjs.com/docs.html?item=Emitter
    // https://zimjs.com/docs.html?item=Boundary
    // https://zimjs.com/docs.html?item=zog
    // https://zimjs.com/docs.html?item=zgo
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    stage.update(); // this is needed to show any changes

}); // end of ready
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.