CODEWITHSUNDEEP
javascripthtml5-canvas
Wang'l Pakhrin
Wang'l Pakhrin

Reputation: 868

loop a canvas animation co-ordinates

I am new to HTML5 canvas and been practicing it for a while.

I've made a particle style canvas where particles float in y axis. i just need to figure out that when a particle goes out of the cavnas, it needs to be looped again.

here is the fiddle, Kindly have a look please : ) Here is what i have done so far ==

var canvas = document.getElementById('canvas');
        //*****************************************
        //set context
        var ctx = canvas.getContext('2d');    

        //canvas dimensions
        var w = window.innerWidth;
        var h = window.innerHeight;
        canvas.width = w;
        canvas.height = h;

        //*****************************************
        //Lets create an array of particles
        var particles = [];
        for(var i = 0; i < 50; i++)
        {
          //This will add 50 particles to the array with random positions
          particles.push({
            x: Math.random()*w, //x-coordinate
            y: Math.random()*h, //y-coordinate
          })
        }

        //lets create a random particle posiition function
        function randomPosition(){
                this.x = Math.random()*w;
                this.y = Math.random()*h;
        }


        //***************************************** 
        //lets animate the particle
        var x =100; var y=100;
        function draw(){
                  //*****************************************
                  //lets paint the canvas with gradient colors
                  ctx.rect(0,0,w,h);
                  // add linear gradient
                  var grd = ctx.createLinearGradient(0, 0,0, h);
                  // light blue
                  grd.addColorStop(0, '#1695A3');   
                  // dark blue
                  grd.addColorStop(1, '#B5E6D7');
                  ctx.fillStyle = grd;
                  ctx.fill();

                  //Lets draw particles from the array now
                  for(var t = 0; t < particles.length; t++)
                  {
                        var p = particles[t];

                        ctx.beginPath();
                        ctx.fillStyle = "#ACF0F2";
                        ctx.arc(p.x, p.y, 2, Math.PI*2, false);
                        ctx.fill();

                    //p.x++;
                    p.y--;

                    if(p.y < 0){

                          y = Math.random()*h;
                    }

                  }
        }
        //draw();
        setInterval(draw,10);

Link ---------------------------------- http://jsfiddle.net/wangel12/cBra2/

Upvotes: 0

Views: 82

Answers (1)

markE
markE

Reputation: 105015

Given a particle (p), here's how to test if it's moved off-canvas and then recycle it:

var radius=2;

if( 
    p.x < -radius || 
    p.x > canvas.width+radius ||
    p.y < -radius ||
    p.y > canvas.height+radius
){
    p.x = Math.random()*canvas.width;
    p.y = Math.random()*canvas.height;
}

Upvotes: 1

Related Questions