# Thread: Need help with snow effect

1. Registered User
Join Date
Oct 2012
Posts
18

## Need help with snow effect

Hello. As the title says i want to do a snow effect. The problem is that i can only get 1 snowflake in my picture. I really want to know how to copy the snow img so that i get many snowflakes falling from the top of the screen. Somewhere in here i have to add a code that duplicates the img "imgSnow".

if (canvas.getContext) {
ctx = canvas.getContext('2d');

function draw() {
drawBackground();
ctx.drawImage (imgSnow, x, y);

//------- Code i need ----------//

y += 9;

if (y > 450 ) {
y = -21;
x = Math.random () * 650;

}}}

2. You can draw the same picture several times to the canvas at the same time. You'll just have to switch your x and y variables with arrays. Something like this:

Code:
```var x = [];
var y = [];

for (var i = 0; i < 20; i++)
{
y[i] = -21;
x[i] = Math.random () * 650;
}

function draw()
{
drawBackground();

for (i = 0; i < x.length; i++)
{
ctx.drawImage (imgSnow, x[i], y[i]);

y[i] += 9;

if (y[i] > 450 ) {
y[i] = -21;
x[i] = Math.random () * 650;
}
}
}```
Last edited by ReFreezed; 10-29-2012 at 03:33 PM.

3. Registered User
Join Date
Oct 2012
Posts
18
Not bad, thank you very much.

This JC world seems so distance to me :P. Only one problem remains. All the snowflakes are falling at the same time:P, looks more lika a wave then a snowstorm. Any variable to make the snowflakes fall at random time ?

4. Member
Join Date
Oct 2012
Posts
9
A quick hack would be to use random negative values for your initial y values, so that they have different starting points.

Something like... replacing the first
Code:
`y[i] = -21;`
with
Code:
`y[i] = -1 * parseInt(450 * Math.random());`

5. Just make their starting y-position random further outside the canvas. Try maybe y[i] = -21-450*Math.random();