const frame = new Frame("fit", 800, 600, "#555", "#555");
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

  // CODE HERE
  
  // THE ONE STATEMENT WOULD LOOK LIKE THIS:
  // new Pen({
  //  damp:.8, 
  //  draggable:false,
  //    color:series("#FCEEB5", "#EE786E")
  // })
  //  .center()
  //  .animate({
  //    props:{path:new Squiggle().sca(2).center({add:false})}, 
  //    time:2000, 
  //    ease:"linear"
  //  }).animate({
  //    props:{size:50}, 
  //    rewind:true,
  //    time:1000
  //  });
  
  // a series returns a function - so colors will be a function
  // every time the function is run, it gets the next thing in the series 
  // and wraps to the first thing again forever!
  var colors = series("#FCEEB5", "#EE786E", "#A2CCB6");

  const path = new Squiggle()
    .sca(2)
    .center({add:false})
    .mov(0,40);

  var pen = new Pen({damp:.8, draggable:false}).center();
  
  new Label({
    text:"ONE\nSTATEMENT", 
    font:"courier", 
    lineHeight:40, 
    align:"center"
  }).center().mov(0,-130).alp(.7);
  
  const again = new Button({
    label:"AGAIN",
    width:180,
    height:180,
    corner:90,
    color:dark,
    rollColor:light,
    backgroundColor:white,
    rollBackgroundColor:dark,
    shadowColor:-1
  }).sca(.5).center().alp(0).mov(0, 140).tap(()=>{
    make();
  });
  
  function make() {
    again.alp(0);
    pen.clear();  
    pen.loc(path.pointControls[0]); // move pen to beginning of path
    pen.immediate(pen.x, pen.y); // go there without drawing to there
    colors(); // cycle colors
    frame.color = colors();
    pen.color = series(colors(), colors());
    pen.animate({ // animate position
      props:{path:path},
      ease:"linear",
      time:2000
    })
    .animate({ // animate size
      props:{size:50},
      rewind:true,
      time:1000,
      call:()=>{
        again.animate({ // animate in the button
          props:{alpha:.8}, 
          time:500,
          wait:500
        });
      }
    });
  }
  make();


  stage.update(); // this is needed to show any changes

  // DOCS FOR ITEMS USED
  // https://zimjs.com/docs.html?item=Frame
  // https://zimjs.com/docs.html?item=Squiggle
  // https://zimjs.com/docs.html?item=Label
  // https://zimjs.com/docs.html?item=Button
  // https://zimjs.com/docs.html?item=tap
  // https://zimjs.com/docs.html?item=animate
  // 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=center
  // https://zimjs.com/docs.html?item=series
  // https://zimjs.com/docs.html?item=zog

  // FOOTER
  // call remote script to make ZIM Foundation for Creative Coding icon
  createIcon(frame); 

}); // end of ready

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://d309knd7es5f10.cloudfront.net/createjs_1.1_min.js
  2. https://d309knd7es5f10.cloudfront.net/zim_9.5.0.js
  3. https://d309knd7es5f10.cloudfront.net/codepen/icon.js