const frame = new Frame(FIT, 1024, 768, darker, darker);
frame.on("ready", () => {
	const stage = frame.stage;
	const stageW = frame.width;
	const stageH = frame.height;

	// remake of Michelle Barker's beautiful pen at
	// https://codepen.io/michellebarker/pen/GRMBVYX
	// ZIM is 62% the size of HTML CSS JS GSAP SVG
	// And we think it is quite readable
	
	// this part is a copy of the math in raw js
	function createPoints(radius1, radius2, ratio) {
		let points = [];    	
		for(let i = 0; i <= Math.PI * 2; i+= 0.01) {
			const x = radius1 * Math.cos(i) + radius2 * Math.cos(i * ratio);
			const y = radius1 * Math.sin(i) + radius2 * Math.sin(i * ratio);    		
			points.push({x,y});
		}    	
		return points;
	}

	// making a container for the shapes lets us easily remove them
	const shapes = new Container(stageW, stageH).addTo();     
	function makeShapes() {
		shapes.disposeAllChildren(); // remove previous shapes
		let r = rand(180,200); // outer radius
		// could use same HSL but want to use ZIM colors
		let colors = shuffle([green,yellow,pink,orange,blue,red,purple]);
		loop(3, i => {
			let s = new Shape()
				.center(shapes)
				.s(colors.pop())
				.ss(2)
				.sca(0)
				.animate({
					props:{scale:1}, 
					ease:"backOut",
					wait:i*.3,
					time:1.5
				});            
			spline(createPoints(r, r*rand(.2,.7), rand(5,60)), 1, true, s);
			r *= rand(.4,.8);
		});
	}
	makeShapes();        
	new Button({label:"REGEN"}).sca(.7).loc(50,50).tap(makeShapes);

	// DOCS FOR ITEMS USED
	// https://zimjs.com/docs.html?item=Frame
	// https://zimjs.com/docs.html?item=Container
	// https://zimjs.com/docs.html?item=Shape
	// 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=loop
	// https://zimjs.com/docs.html?item=loc
	// https://zimjs.com/docs.html?item=sca
	// https://zimjs.com/docs.html?item=addTo
	// https://zimjs.com/docs.html?item=center
	// https://zimjs.com/docs.html?item=shuffle
	// https://zimjs.com/docs.html?item=rand
	// https://zimjs.com/docs.html?item=spline

	// FOOTER
	// call remote script to make ZIM icon - you will not need this
	createIcon(); 

}); // end of ready