www.webdeveloper.com
Results 1 to 5 of 5

Thread: Need help with snow effect

  1. #1
    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. #2
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    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 04:33 PM.

  3. #3
    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. #4
    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. #5
    Join Date
    Aug 2008
    Location
    Sweden
    Posts
    227
    Just make their starting y-position random further outside the canvas. Try maybe y[i] = -21-450*Math.random();

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles