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
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.