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