Question

170

Random images falling like rain in canvas (Javascript)

rated 0 times [ 172] [ 2] / answers: 1 / hits: 21511 / 12 Years ago, mon, october 29, 2012, 12:00:00

So I have been playing around with canvas. Trying to simulate random falling objects, drawing the background image is no problem and not the 2nd img that is supposed to simulate a rain drop.

I can get the drop to come down at a random x but now I am not really sure on how to loop the drop image x times set by the variable noOfDrops.

I left my loop commented out, the working code with just one drop falling randomly is:

<!DOCTYPE html>

<html lang=en>

<head>

<title>Canvas Regn</title>

<script type=text/javascript>

var ctx;

var imgBg;

var imgDrops;

var x = 0;

var y = 0;

var noOfDrops = 50;

var fallingDrops = [];



    function setup() {

        var canvas = document.getElementById('canvasRegn');



        if (canvas.getContext) {

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

        setInterval('draw();', 36);

        imgBg = new Image();

        imgBg.src = 'dimma.jpg';



        imgDrops = new Image();

        imgDrops.src = 'drop.png';



        /*for (var i = 0; i < noOfDrops; i++) {

            var fallingDr = imgDrops[i];

            fallingDr.x = Math.random() * 600;

            fallingDrops.push(fallingDr);

            }*/



        }

    }





    function draw() {

        drawBackground();

        ctx.drawImage (imgDrops, x, y); //The rain drop



        y += 3; //Set the falling speed

        if (y > 450) {  //Repeat the raindrop when it falls out of view

        y = -25 //Account for the image size

        x = Math.random() * 600;    //Make it appear randomly along the width

        }

    }



    function drawBackground(){  

        ctx.drawImage(imgBg, 0, 0); //Background

    }

</script>

</head>

<body onload=setup();>

<canvas id=canvasRegn width=600 height=450style=margin:100px;></canvas>

</body>

</html>

If anyone has some good ideas on how to implement that, I would appreciate it alot.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

darennevina

Add To Favorites

Follow

Total Points: 422

Total Questions: 128

Total Answers: 105

Location: Comoros

Member since Tue, Mar 14, 2023

1 Year ago

darennevina questions

1 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'address')

Sun, Jun 5, 22, 00:00, 2 Years ago

1 change the active list when scrolling navbar

Fri, Nov 12, 21, 00:00, 3 Years ago

1 DiscordjsError: Request to use token, but token was unavailable to the client

Wed, Nov 25, 20, 00:00, 4 Years ago

1 How to check a checkbox in Google Apps Script and uncheck all the other cells?

Wed, Sep 23, 20, 00:00, 4 Years ago

1 How do I extract data from this NodeList?

Fri, Sep 18, 20, 00:00, 4 Years ago

View All

answered 12 Years ago geovannil · Accepted Answer

Your loop is actually pretty close. The biggest problem you would have is that you can't just maintain 1 x and 1 y value, you have to maintain that per image. So I modified your loop a bit to push an object on the array that has an x,y, and speed value. The speed value gives you nice randomization of the movement, so everything doesn't come down at the same speed:

var ctx;

var imgBg;

var imgDrops;

var x = 0;

var y = 0;

var noOfDrops = 50;

var fallingDrops = [];





    function drawBackground(){  

        ctx.drawImage(imgBg, 0, 0); //Background

    }



    function draw() {

        drawBackground();



        for (var i=0; i< noOfDrops; i++)

        {

        ctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y); //The rain drop



        fallingDrops[i].y += fallingDrops[i].speed; //Set the falling speed

        if (fallingDrops[i].y > 450) {  //Repeat the raindrop when it falls out of view

        fallingDrops[i].y = -25 //Account for the image size

        fallingDrops[i].x = Math.random() * 600;    //Make it appear randomly along the width    

        }



        }

    }



    function setup() {

        var canvas = document.getElementById('canvasRegn');



        if (canvas.getContext) {

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



                    imgBg = new Image();

            imgBg.src = http://lorempixel.com/600/600/sports/;

        setInterval(draw, 36);

        for (var i = 0; i < noOfDrops; i++) {

            var fallingDr = new Object();

            fallingDr[image] =  new Image();

        fallingDr.image.src = 'http://lorempixel.com/10/10/sports/';



            fallingDr[x] = Math.random() * 600;

            fallingDr[y] = Math.random() * 5;

            fallingDr[speed] = 3 + Math.random() * 5;

            fallingDrops.push(fallingDr);

            }



        }

    }



setup();

Here is a fiddle demo: http://jsfiddle.net/L4Qfb/21/