Need help with snow effect

[Vraith11]

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;

}}}

[ReFreezed]

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:

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;
        }
    }
}

[Vraith11]

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 ?

[bundat]

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

y[i] = -21;

with

y[i] = -1 * parseInt(450 * Math.random());

[ReFreezed]

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