const assets = ["drabstract.jpg"];
const path = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/1604712/";
const frame = new Frame("outside", 1024, 768, black, black, assets, path);
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
   

    // ZIM Simplex Noise class
    const noise = new Noise();
    const numLines = 30;
    let count = 0;

    // create a tile of tall rectangles from blue to red
    // for the Tile object, use the ZIM VEE value of a function that returns a value
    // the function will return a set of rectangles from blue to red
    const tile = new Tile({
        obj:blend,
        cols:numLines,
        spacingH:-24,
    }).sca(50,2).center().noMouse();
    function blend() {
        // count/numLines will be a ratio between 0 and 1 for the colorRange
        return new Rectangle(25, stageH*1.2, colorRange(blue, red, count++/numLines))
            .centerReg({add:false}) // avoid automatically adding the rectangle to the stage
            .ble("difference");
    }

    // we are going to wiggle the speed and max angle
    // to do this these need to be properties of objects
    // just do not use speed as a property - it conflicts with animate's speed extra prop
    const speed = {val:.0006};
    const angle = {val:25};
    wiggle(speed, "val", speed.val, .0001, .0003, 5000, 10000);
    wiggle(angle, "val", speed.angle, 5, 10, 10000, 20000);
    // could use mouse position with Proportion or ProportionDamp to change these
    // or use a MotionController, sliders, dials, steppers, etc.

    // constantly add to change - this moves through the Noise equation in time
    // also move through the noise equation in i to get slightly different angles
    // the smaller this is, the less change between successive angles there will be
    // and we magnify that by multiplying by our max angle value
    let change = 0;
    Ticker.add(function () {
        change+=speed.val;
        tile.loop((rect,i)=>{
            rect.rot(noise.simplex2D(change, i/angle.val)*angle.val);
        });
    });

    new Tile({
        obj:asset("drabstract.jpg"),
        cols:2,
        spacingH:-130,
        mirrorH:true
    })
			.ble("soft-light")
			.scaleTo(stage, 100)
			.center()
    

    new Label({
        text:"D R  A B S T R A C T  D A N C I N G",
        size:20,
        font:"impact",
        color:white,
        labelWidth:10,
        align:CENTER,
        lineHeight:17
    }).sca(6,1).center().mov(0,-50).alp(.6);

    stage.update(); // this is needed to show any changes
	
    // DOCS FOR ITEMS USED
    // http://zimjs.com/docs.html?item=frame
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
		frame.makeIcon(null,darker)
			.sca(.5)
			.alp(.8)
			.center()
			.mov(0,175)
			.hov(1)
			.tap(()=>{zgo("https://zimjs.com", "_blank")});

}); // end of ready