6 Replies Latest reply on Jan 21, 2015 12:50 PM by joel_pau

# Snow Animation

I have found an Script to get Snowflakes in my Edge-Animation:

http://www.heathrowe.com/edge/snowflakes/snowflakes.zip

My Question:

How can I get the Snowflakes above all the other objects?

At the Moment they are only in the background, behind the other objects.

Here is the Code that I use:

```

//canvas init

\$('<canvas id="canvas"></canvas>').appendTo("#Stage");

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

//canvas dimensions
var W = window.innerWidth;
var H = window.innerHeight;
canvas.width = W;
canvas.height = H;

//snowflake particles
var mp = 95; //max particles
var particles = [];
for(var i = 0; i < mp; i++)
{
particles.push({
x: Math.random()*W, //x-coordinate
y: Math.random()*H, //y-coordinate
d: Math.random()*mp //density
})
}

//Lets draw the flakes
function draw()
{
ctx.clearRect(0, 0, W, H);

ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
ctx.beginPath();
for(var i = 0; i < mp; i++)
{
var p = particles[i];
ctx.moveTo(p.x, p.y);
ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true);
}
ctx.fill();
update();
}

//Function to move the snowflakes
//angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes
var angle = 0;
function update()
{
angle += 0.01;
for(var i = 0; i < mp; i++)
{
var p = particles[i];
//Updating X and Y coordinates
//We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards
//Every particle has its own density which can be used to make the downward movement different for each flake
p.y += Math.cos(angle+p.d) + 1 + p.r/2;
p.x += Math.sin(angle) * 2;

//Sending flakes back from the top when it exits
//Lets make it a bit more organic and let flakes enter from the left and right also.
if(p.x > W+5 || p.x < -5 || p.y > H)
{
if(i%3 > 0) //66.67% of the flakes
{
particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d};
}
else
{
//If the flake is exitting from the right
if(Math.sin(angle) > 0)
{
//Enter from the left
particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d};
}
else
{
//Enter from the right
particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d};
}
}
}
}
}

//animation loop
setInterval(draw, 33);

```
• ###### 1. Re: Snow Animation

So you put your flakes within a rectangle.

sym.\$('<canvas id="canvas"></canvas>').appendTo( sym.\$("Rectangle") );

var canvas = document.getElementById("canvas"), ctx = canvas.getContext("2d"), W = sym.\$("Rectangle").innerWidth(), H = sym.\$("Rectangle").innerHeight();

canvas.width = W;

canvas.height = H;

Note:

jQuery file is required because: .appendTo(), .innerWidth(), .innerHeight()

• ###### 2. Re: Snow Animation

Unfortunately I am an absolute beginner in Scripting and

I've tried to put your code in my edge-file – but nothing worked.

Can you help me how I can combine my code that i've posted and

Thanks a lot.

• ###### 3. Re: Snow Animation

Old code:

\$('<canvas id="canvas"></canvas>').appendTo("#Stage");

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

//canvas dimensions

var W = window.innerWidth;

var H = window.innerHeight;

New code:

sym.\$('<canvas id="canvas"></canvas>').appendTo( sym.\$("Rectangle") );

var canvas = document.getElementById("canvas");

var ctx = canvas.getContext("2d");

var W = sym.\$("Rectangle").innerWidth();

var H = sym.\$("Rectangle").innerHeight();

Demo file: neige.zip - Box

• ###### 4. Re: Snow Animation

Thank you – all works perfect.

Your Demo-File helped me a lot :-)

One more Question:

Now I have a transparent Rectangle with the Snowflakes above my Animation.

There are some Buttons under the Rectangle – and now I can't klick them.

How can I fix that?

Greetings from Berlin

• ###### 5. Re: Snow Animation

ok, i look at your issue but tomorrow.

• ###### 6. Re: Snow Animation

Here is an update: neige.zip - Box

Each object has its own flakes.