const frame = new Frame("fit", 1024, 768, "#000", "#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
  
    // make the points for the Blobs
    // a horizontal rectangle with top and bottom middle points
    // with no control points, these will be of controlType="none"
    // so not be curvy but rather angular
    const points = [
        [0,0], // top left point
        [stageW/2,0], // top middle point
        [stageW,0,0], // top right point
        [stageW,stageH/3], // bottom right point
        [stageW/2,stageH/3], // bottom middle point
        [0,stageH/3] // bottom left point
    ]

    // here are the primary colors
    const colors = ["#F44336", "#FDD835", "#1E88E5"];
    // loop through the colors and position the blobs
    loop(colors, (color, i)=>{
        // if the property name is the same as a variable for the value
        // then in ES6, you can just put the property name
        // so below is the same as color:color and points:points
        let blob = new Blob({color, points, showControls:false}).loc(0,stageH*i/3)
        // apply the blendMode to the shape only
        // really only makes a difference if the Blob controls are showing
        // click on a Blob to see and use its controls
        blob.shape.blendMode = "difference";
    });

    // we will move the middle blob's middle top and bottom control point
    const middleBlob = stage.getChildAt(1);

    // wiggle the two middle points in the y direction
    middleBlob.pointControls[1].wiggle({ // the top middle point
      property:"y",
      baseAmount:0,
      minAmount:100,
      maxAmount:500,
      minTime:2000,
      maxTime:5000,
      startType:"negative"
    });
    middleBlob.pointControls[4].wiggle({ // the bottom middle point
      property:"y",
      baseAmount:0,
      minAmount:100,
      maxAmount:500,
      minTime:2000,
      maxTime:5000,
      startType:"positive"
    });

    // optionally wiggle the points in the x direction
    // note, here we use regular parameter
    // because we don't have to get to the startType parameter
    // which would mean adding 5 nulls...
    // middleBlob.pointControls[1].wiggle("x",stageW/2,50,100,2000,5000);
    // middleBlob.pointControls[4].wiggle("x",stageW/2,50,100,2000,5000);

    // blobs and squiggles need to be updated if moved with code
    Ticker.add(()=>{
        // this would move the colors together
        // also would comment out the loc of the controls in the loop below
        // stage.getChildAt(0).pointControls[4].loc(middleBlob.pointControls[1]);
        // stage.getChildAt(2).pointControls[1].loc(middleBlob.pointControls[4]);
        stage.loop(blob=>{
            // set the mid controls of the other two rectangles
            // to the middle rectangle's point
            blob.pointControls[1].loc(middleBlob.pointControls[1])
            blob.pointControls[4].loc(middleBlob.pointControls[4])
            blob.update();
        });
    });  
  
    // DOCS FOR ITEMS USED
    // https://zimjs.com/docs.html?item=Frame
    // https://zimjs.com/docs.html?item=Blob
    // https://zimjs.com/docs.html?item=wiggle
    // https://zimjs.com/docs.html?item=loop
    // https://zimjs.com/docs.html?item=loop
    // https://zimjs.com/docs.html?item=zog
    // https://zimjs.com/docs.html?item=Ticker
  
}); // end of ready