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

// REFERENCES for ZIM at https://zimjs.com
// see https://zimjs.com/intro.html for an intro example
// see https://zimjs.com/learn.html for video and code tutorials
// see https://zimjs.com/docs.html for documentation
// see https://codepen.io/topic/zim/ for ZIM on CodePen
	
const frame = new Frame({
	color:black,
	outerColor:black,
	assets:"dark_forest__qtw6ey.webp", 
	path:"https://res.cloudinary.com/dgwef8ttm/image/upload/v1732945710/", 
	ready:ready
});

function ready() {
	
	// a remake of the lovely Fireflies: Dancing Luminescence by Vanessa Victorino	
	// https://codepen.io/grauconejo13/pen/raBaRxd
	
	// with ZIM at 46% the size of the HTML, CSS, JS

	// given F (Frame), S (Stage), W (width), H (height)
   // put code here
	
	
	const forest = new Pic("dark_forest__qtw6ey.webp");
	const world = new Container(forest.width, forest.height);
	forest.addTo(world);	
	loop(50, ()=>{
		new Circle(rand(5,20), new RadialColor([white,clear]))
			.loc(rand(world.width), rand(world.height), world)
			// property, startValue, minValue, maxValue, minTime, maxTime
			.wiggle("x", null, 10, 150, 3, 10)
			.wiggle("y", null, 10, 150, 3, 10)
			.wiggle("alpha", .5, .2, .5, .5, 2)		
	});	
	F.on("resize", ()=>{
		world.scaleTo().center();
	});	
}

// Docs for items used:
// https://zimjs.com/docs.html?item=Frame
// https://zimjs.com/docs.html?item=Pic
// https://zimjs.com/docs.html?item=Container
// https://zimjs.com/docs.html?item=Circle
// 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=scaleTo
// https://zimjs.com/docs.html?item=addTo
// https://zimjs.com/docs.html?item=center
// https://zimjs.com/docs.html?item=rand
// https://zimjs.com/docs.html?item=RadialColor
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.