const frame = new Frame("fit", 1024, 768, black, black);
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
	
	// See Bloob at https://codepen.io/zimjs/pen/XWjrmoQ 
	// for an explanation about Noise and Generator 
	// Also see Eye of the Dragon at https://codepen.io/danzen/pen/ExgQRjW
   
    const segments = 30; // how many lines
    const delta = 360/segments; // angle between each line
    const inner = 100; // inner radius
    const outer = 300; // outer radius
    const variation = outer-inner; // maximum noise
    
    let c = 1;    // curve factor 
    let s = .02;    // speed factor
    let t = 0;      // time
    
    // The ZIM Generator() works somewhat like Processing / P5js.
    // Setting stamp instead of draw will draw all generations immediately 
    // rather than one generation at a time.
    var g = new Generator({
        stamp:gen,
        strokeWidth:2,
        maxCount:segments        
    });

    function gen(count) {  
        let angle = delta*count*RAD;  // (0-360 degrees in radians)                   
        let noise = g.noise(c*Math.sin(angle), c*Math.cos(angle), t);
        let radius = inner+variation*noise;
        g.push()
			g.push().line(0,0,radius,0).pop().line(radius,-5,0,10);
        g.pop()   
        g.rotate(delta); // rotate delta each time         
    }
    
    Ticker.add(function () {
        t+=s; // set the speed through the noise
        g.restamp();
    });
	
    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
    createIcon(); 

}); // end of ready