1 Correct answer
Hi.
While Clay doesn't give you a proper answer, to fill up the whole screen at the beginning just remove the minus sign when the y position is set.
Instead of this:
snow.y = -stage.canvas.height * Math.random();
Write this:
snow.y = stage.canvas.height * Math.random();
To randomize the snow flakes, create an array with the classes you want (the class name must be set in the linkage column of the Library panel). Then get a random index out of this array. Like this:
...var snow;
var snowTypes = [lib.Snow, l
34
Replies
Hi.
While Clay doesn't give you a proper answer, to fill up the whole screen at the beginning just remove the minus sign when the y position is set.
Instead of this:
snow.y = -stage.canvas.height * Math.random();
Write this:
snow.y = stage.canvas.height * Math.random();
To randomize the snow flakes, create an array with the classes you want (the class name must be set in the linkage column of the Library panel). Then get a random index out of this array. Like this:
var snow;
var snowTypes = [lib.Snow, lib.Square, lib.Star];
...
snow = new snowTypes[Math.floor(Math.random() * snowTypes.length)]();
Anyway, I played with your code a bit. Here is the result (please ignore the GIF speed and other limitations):
JS code:
const SNOW_NUM = 200;
var container = this.globe.container;
var snowTypes = [lib.Snow, lib.Square, lib.Star];
var snowA = [];
function start()
{
createSnowF();
createjs.Ticker.timingMode = createjs.Ticker.RAF;
createjs.Ticker.addEventListener("tick", animateSnowF);
container.alpha = 0;
createjs.Tween.get(container).to({alpha:1}, 2000);
}
function createSnowF()
{
var snow;
for (var i = 0; i < SNOW_NUM; i++)
{
snow = new snowTypes[Math.floor(Math.random() * snowTypes.length)]();
snow.scaleX = snow.scaleY = 0.5 + Math.random() * 0.5;
snow.alpha = snow.scaleX;
snow.x = stage.canvas.width * Math.random();
snow.baseX = snow.x;
snow.angle = 0;
snow.angleSpeed = Math.random() * 0.05;
snow.rangeX = 15 * Math.random();
snow.y = stage.canvas.height * Math.random();
snow.rot = 2 * Math.round(Math.random()) - 1;
snow.sp = 1 + Math.random() * 1;
container.addChild(snow);
snowA = snow;
}
}
function animateSnowF()
{
for (var i = SNOW_NUM - 1; i >= 0; i--)
{
var snow = snowA;
snow.rotation += 5 * snow.rot;
snow.x = snow.baseX + Math.cos(snow.angle) * snow.rangeX;
snow.y += snow.sp;
snow.angle += snow.angleSpeed;
if (snow.y > stage.canvas.height / stage.scaleY + snow.nominalBounds.height)
{
snow.x = (stage.canvas.width / stage.scaleX) * Math.random();
snow.y = -snow.nominalBounds.height;
}
}
}
start();
FLA download:
animate_cc_html5_snow.zip - Google Drive
Notice that I didn't use an actual mask for performance sake.
Regards,
JC
AdChoices