Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #22180

Re: dealing with multiple objects on Canvas

Show all headers | View raw

On Thu, 21 Nov 2013 20:49:21 -0600, Kale <kalezwe@gmail.com> wrote:

> I am trying to make snow but when I try to add more than one flake to  
> the canvas with different variables it doesn't work. Can anyone figure  
> out why this is? Here is my code:
>
> <!DOCTYPE html>
> <html>
> <head>
> 	
> 	
> 	<title>Snowy</title>
> <style type="text/css">
> body{background-color:#2B0B9E}
> canvas{margin:"0px"}
>
> </style>	
>
> </head>	
> <body>	
> <canvas id="can" >no support</canvas>
> <div id="vardisp"></div>
>
>
> <script>
> var k=document.getElementById('can');
> var c= k.getContext('2d');
> var y= 5;
> var x= 5;
> var a= 15;
> var b= 15;
> var c= 25;
> var d= 25;
> var e= 35;
> var f= 35;
> var g= 45;
> var h= 45;
> var W = window.innerWidth;
> var H = window.innerHeight;
> var ur=Math.random();
> k.width=W;
> k.height=H;
>
> setInterval(function(){
> 	var xx=Math.random()*(Math.random()*1.25);
> 	var yy=Math.random();
> 	c.fillStyle = "#2B0B9E";
> 	c.fillRect(0, 0, W, H);
> 	
> c.beginPath();
> c.fillStyle = 'white';
>
> c.arc(x,y,ur*6,2,20*Math.PI);
> c.fill();
> c.arc(a,b,ur*6,2,20*Math.PI);;
> c.arc(c,d,ur*6,2,20*Math.PI);
> c.arc(e,f,ur*6,2,20*Math.PI);
> c.arc(g,h,ur*6,2,20*Math.PI);
> c.fill();
>
> x+=xx;
> y+=yy;
> a+=xx;
> b+=yy;
> c+=xx;
> d+=yy;
> e+=xx;
> f+=yy;
> g+=xx;
> h+=yy;
>
>
>
> },ur*50);
>
>
> </script>
> </body>	
> </html>

You are reassigning c to a number so you can't access your canvas object...
Also you are sharing your pseudo-random numbers with all of your flakes,  
so when one gets a random number, they all get the same one making them  
all act the exact same.

Also, as opposed to having 1001 different variables all incrementing one  
at a time, something that you could likely utilize well here is function  
scope; make a function to hold your snowflake code. That way you can have  
multiple flakes with their own values in a somewhat protected environment.  
All you would need to do to add another flake would be to call the  
function and be done with it. (Perhaps utilizing for loop for the amount  
you want.)

-- 
The arch foe

Back to comp.lang.javascript | Previous | Next — Previous in thread | Find similar | Unroll thread

Thread

dealing with multiple objects on Canvas Kale <kalezwe@gmail.com> - 2013-11-21 18:49 -0800
  Re: dealing with multiple objects on Canvas "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2013-11-21 19:47 -0800
    Re: dealing with multiple objects on Canvas Kale <kalezwe@gmail.com> - 2013-11-21 20:09 -0800
      Re: dealing with multiple objects on Canvas "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2013-11-21 21:11 -0800
        Re: dealing with multiple objects on Canvas Kale <kalezwe@gmail.com> - 2013-11-22 18:35 -0800
          Re: dealing with multiple objects on Canvas "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2013-11-22 19:55 -0800
            Re: dealing with multiple objects on Canvas Kale <kalezwe@gmail.com> - 2013-11-22 21:40 -0800
  Re: dealing with multiple objects on Canvas Kale <kalezwe@gmail.com> - 2013-11-22 21:49 -0800
    Re: dealing with multiple objects on Canvas "Evertjan." <exjxw.hannivoort@interxnl.net> - 2013-11-23 15:26 +0000
      Re: dealing with multiple objects on Canvas Kale <kalezwe@gmail.com> - 2013-11-25 17:37 -0800
        Re: dealing with multiple objects on Canvas "Evertjan." <exjxw.hannivoort@interxnl.net> - 2013-11-26 06:50 +0000
        Re: dealing with multiple objects on Canvas Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-11-26 23:09 +0100
  Re: dealing with multiple objects on Canvas Archenoth <Archenoth@live.something> - 2013-11-25 06:09 -0600

csiph-web