const frame = new Frame("fit", 1024, 768, darker, dark);
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
	
	// create a path for the ZIM Beads
	const blob = new Blob({
		points:10,
		radius:200,
		borderColor:green,
		controlType:"none",
		interactive:false,
		strokeObj:{joints:"bevel"} // so mitered ends do not point out
	})
	
	// Make ZIM beads - put Rectangles on Blob path
	const shape = new Beads({
		path:blob,
		obj:new Rectangle({
			width:{min:40,max:80},
			color:green,
		}).centerReg(),
		count:250
	})
		.center()
		.effect(new GlowEffect({
			color:"violet",
			blurX:60,
			blurY:60,
			strength:3,
			// hideObject:true,
			// knockout:true		
		}),-stageW/2,-stageW/2,stageW,stageW); // blob grows bigger than cache area
	
	// set rectangles to random rotations and animate rotation
	shape.beads.loop(bead=>{
		bead.rot(rand(360)).animate({
			props:{rotation:["360","-360"]},
			time:{min:.3, max:.7},
			loop:true,
			ease:"linear"
		});
	});	
	
	// wiggle the blob points
	loop(shape.path.pointControls, control=>{
		control.wiggle("x", control.x, 50, 400, 2,6);
		control.wiggle("y", control.y, 50, 300, 2,6);
	});

	// update the blob, beads and effects
	Ticker.add(()=>{
		shape.path.update();
		shape.resize();
		shape.updateEffects()
	});
   

	// not needed with animation
    // 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=Rectangle
	// https://zimjs.com/docs.html?item=Blob
	// https://zimjs.com/docs.html?item=effect
	// https://zimjs.com/docs.html?item=updateEffects
	// https://zimjs.com/docs.html?item=animate
	// https://zimjs.com/docs.html?item=wiggle
	// https://zimjs.com/docs.html?item=loop
	// https://zimjs.com/docs.html?item=rot
	// https://zimjs.com/docs.html?item=centerReg
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=Beads
	// https://zimjs.com/docs.html?item=GlowEffect
	// https://zimjs.com/docs.html?item=zog
	// https://zimjs.com/docs.html?item=Ticker
  
    // FOOTER
    // call remote script to make ZIM Foundation for Creative Coding icon
    createIcon(); 

}); // end of ready