import zim from "https://zimjs.org/cdn/017/zim";

// see https://zimjs.com
// and https://zimjs.com/learn
// and https://zimjs.com/docs

new Frame(FILL, 1024, 768, interstellar, dark, ready);
function ready() {

	// Given F, S, W, H or frame, stage, stageW, stageH
	
	// this will attract the snowflakes - and we will move this around (set alp(1) to see)
	// to move the sink around and change its force we will use zim.wiggle() down below
	// animating the sink is what causes the snow to swirl slightly like the wind is gusting
	const sink = new Circle(10, pink).centerReg().alp(0);

	// create the emitter for the snow
	const snow = new Emitter({
		// Here we specify the object to emit (the Emitter clones the object)
		// We can pass in a single object or any ZIM VEE value from which each particle will be picked
		// ZIM VEE values are as follows:
		// 1. an Array of values to pick from - eg. ["red", "green", "blue"]
		// 2. a Function that returns a value - eg. function(){return Date.now();} (like we have here)
		// 3. a ZIM RAND object literal - eg. {min:10, max:20, integer:true, negative:true} max is required (not applicable for the obj parameter)
		// 4. any combination of the above - eg. ["red", function(){x>100?["green", "blue"]:"yellow"}] zik is recursive
		// 5. a single value such as a Number, String, zim.Rectangle(), etc. this just passes through unchanged
		// the emitter will use zik() to pick for each particle it emits
		obj:makeFlake,

		// Send in a custom animation object
		// The animation object uses zik to pick between 360 and -360... array means pick one of the elements
		// Note the quotes around these values meaning it will use relative rotation
		// as each of the snowflakes are rotated randomly to start - see the random parameter next
		// The animation also uses zik to pick the time for the rotation... object means pick the range
		animation:{obj:{rotation:["360","-360"]}, loop:true, time:{min:3, max:8}, ease:"linear"},

		// adjust properties randomly for each particle
		// the values for the properties can be any ZIM VEE value
		// can also use this to set a property of a cloned emitter - just put the value you want
		// for example: random:{x:300} would set the x of all the particles to 300
		// see also horizontal and vertical parameters for random positioning...
		random:{
			rotation:{min:0, max:360},
			scale:{min:1, max:2}
		},

		// here is the sink that the particles will be attracted to
		// we dynamically change the sinkForce with zim.wiggle() down below
		sink:sink,
		sinkForce:.5,
		cache:M, // cache on mobile
		interval:.25,
		life:7,
		decayTime:2,
		gravity:0,
		force:1,
		angle:90,
		width:W+400, // for swirling
		horizontal:true,
		pool:100,
		warm:true
	})
		.loc(W/2,-20);
		

	// use wiggle() to change values back and forth
	// property, baseAmount, minAmount, maxAmount, minTime, maxTime
	snow.wiggle("sinkForce", .4, .2, .3, 5, 8);
	sink.wiggle("x", W/2, 30, 500, 3, 8)
		.wiggle("y", H/2, 30, 300, 3, 8);

	// here is a function to make random snowflakes
	function makeFlake() {
		const flake = new Container(200,200);
		const rect = new Container(60,60);
			loop(3, i=>{new Rectangle(30,5,white).centerReg(rect).rot(120*i);})		
		const hex = new Container(60,60);
			new Poly(20,6,{min:.7,max:.8},white).center(hex)
			new Poly(12,6,0,white).center(hex);
			if (odds(40)) loop(6, i=>{new Circle(2,white).center(hex).reg(-20).rot(30+60*i);})		
		const shapes = [rect,hex];
		loop(rand(2,4), ()=>{
			pluck(shapes)
				.clone()
				.centerReg(flake)
				.sca(rand(.5,2))
				.alp(rand(.1,.3));
		});
		return flake;
	}	
	
	F.madeWith({box:white.toAlpha(.1), text:"", slats:true})
		.sca(2)
		.centerReg()
		.wiggle("scale",2,.05,.5,2,5)
		.wiggle("rotation",0,2,4,1,3);
	
} // end ready

// Docs for items used
// https://zimjs.com/docs.html?item=Frame
// https://zimjs.com/docs.html?item=Container
// https://zimjs.com/docs.html?item=Circle
// https://zimjs.com/docs.html?item=Rectangle
// https://zimjs.com/docs.html?item=Poly
// https://zimjs.com/docs.html?item=wiggle
// https://zimjs.com/docs.html?item=loop
// https://zimjs.com/docs.html?item=loc
// https://zimjs.com/docs.html?item=alp
// https://zimjs.com/docs.html?item=rot
// https://zimjs.com/docs.html?item=reg
// https://zimjs.com/docs.html?item=sca
// https://zimjs.com/docs.html?item=centerReg
// https://zimjs.com/docs.html?item=center
// https://zimjs.com/docs.html?item=Emitter
// https://zimjs.com/docs.html?item=toAlpha