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

Groups > comp.lang.javascript > #22117 > unrolled thread

dealing with multiple objects on Canvas

Back to article view | Back to comp.lang.javascript

Contents

  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

#22117 — dealing with multiple objects on Canvas

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>

[toc] | [next] | [standalone]

#22121

On Thursday, November 21, 2013 8:49:21 PM UTC-6, Kale 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:


First thing I'd look at (besides formatting a proper HTML document), is the variable "c". what is "var c" in your code?

[toc] | [prev] | [next] | [standalone]

#22122

C is the x or y axis for one of the circles

[toc] | [prev] | [next] | [standalone]

#22124

On Thursday, November 21, 2013 10:09:59 PM UTC-6, Kale wrote:
> C is the x or y axis for one of the circles

var c= k.getContext('2d'); 

...

var c= 25;

...

c.fillRect(0, 0, W, H);

...

[toc] | [prev] | [next] | [standalone]

#22158

Thanks I didn't catch that but with that variable name fixed the program. All the circles generate and move now but all of them are connected for some reason like this https://sites.google.com/site/kalegroup24/ how can I fix this?

[toc] | [prev] | [next] | [standalone]

#22159

On Friday, November 22, 2013 8:35:12 PM UTC-6, Kale wrote:
> Thanks I didn't catch that but with that variable name fixed the program. All the circles generate and move now but all of them are connected for some reason like this https://sites.google.com/site/kalegroup24/ how can I fix this?

The program is relatively short, so I think what I'd like to do is follow the Socratic Method just a little longer if you'll bear with it. First off, I made a very minor change to your presented code:

<!doctype html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8"/>
        <title>Snowy</title>
            <style type="text/css">
                body{
                    background-color:#2B0B9E;
                }
                canvas{
                    margin:0;
                }
            </style>        
        </head>        
        <body>
            <canvas id="can">no support</canvas>
            <div id="vardisp"></div>
            <script type="text/javascript">
                var k = document.getElementById('can');
                var ctx = 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;

                function anim(){
                    var xx = Math.random() * (Math.random()*1.25);
                    var yy = Math.random();
                    ctx.fillStyle = "#2B0B9E";
                    ctx.fillRect(0, 0, W, H);
        
                    ctx.beginPath();
                    ctx.fillStyle = 'white';

                    ctx.arc(x,y,ur*6,2,20*Math.PI);
                    ctx.fill();
                    ctx.arc(a,b,ur*6,2,20*Math.PI);;
                    ctx.arc(c,d,ur*6,2,20*Math.PI);
                    ctx.arc(e,f,ur*6,2,20*Math.PI);
                    ctx.arc(g,h,ur*6,2,20*Math.PI);
                    ctx.fill();

                    x += xx;
                    y += yy;
                    a += xx;
                    b += yy;
                    c += xx;
                    d += yy;
                    e += xx;
                    f += yy;
                    g += xx;
                    h += yy;
                }
                
                setInterval(anim,ur*50);
        </script>
    </body>
</html>

So my question is, can you tell me what it is your code is trying to do in an English pseudo-code? In other words, what was in your mind as the steps you thought you wanted to take when you wrote this? If we were sitting at a bar and I asked you how to create a snowflake, what would you tell me? 

If you don't have the patience for it, I'll post some code I wrote about 10 years ago to generate random snowflakes (embarrassing code in the age of <canvas/> I must admit). 

[toc] | [prev] | [next] | [standalone]

#22160

What I am doing is first making a ton of variables to use later for x and y axes. Then I am creating some variables to change the position of the snowflake randomly. Next, I am creating an interval that goes for a random amount time to fluctuate the flake speed. In the interval I am first clearing the canvas to get rid of other flakes to prevent a line from being drawn. Next in the interval I am drawing a bunch of snowflakes at positions specified by variables. I then add random numbers to the x and y positions to make the flake move randomly in a slow state. Then when I run the code it all works fine except all the flakes have a line drawn between as shown here: https://sites.google.com/site/kalegroup24/ Thanks for all trying to help

[toc] | [prev] | [next] | [standalone]

#22161

Also on https://sites.google.com/site/kalegroup24 my new code is posted where the flakes all move in different math.Random()'s so they don't stay together. I am very confused but for some reason wherever I put the flakes they connect unless I take out the movement in the code

[toc] | [prev] | [next] | [standalone]

#22163

Kale wrote on 23 nov 2013 in comp.lang.javascript:

> Also on https://sites.google.com/site/kalegroup24 my new code is
> posted where the flakes all move in different math.Random()'s so they
> don't stay together. I am very confused but for some reason wherever I
> put the flakes they connect unless I take out the movement in the code 

Try this, far from perfect, but based ond old non-canvas experience:

<!DOCTYPE html>
<html>
<head>
 
 <title>Snowflakes</title>
<style type="text/css">
    	body{background-color:navy;}
</style> 

</head> 
<body> 
<canvas id="can" >no support</canvas>

<script>
var k= document.getElementById('can')
var c = k.getContext('2d');

var W = window.innerWidth;
var H = window.innerHeight;
k.width = W;
k.height = H;
var startang = 0*Math.PI;
var endang = 2*Math.PI;
var y = 5;
var n = 50;

var wind,fl,flakes = []
for (fl=0;fl<n;fl++){
	flakes[fl] = [W*Math.random()-W/4, y, 3+16*Math.random()];
};

function ark(a) {
	c.arc(a[0],a[1],a[2],startang,endang);
};

setInterval(function(){
	c.fillStyle = "navy";
	c.fillRect(0, 0, W, H);
	c.fillStyle = 'white';
	wind = Math.random()*7;
	for (fl=0;fl<n;fl++){
		if (Math.random()>.7) 
    	    	    	flakes[fl][0] += 2*(Math.random()*1-.4)*flakes[fl][2];
		flakes[fl][0] += wind;
		flakes[fl][1] += flakes[fl][2]/3
		if (flakes[fl][1] > H) {
			flakes[fl][0]=W*Math.random()-W/4;
			flakes[fl][1] = y;
			flakes[fl][2]=3+16*Math.random()
		};
		c.beginPath();
		ark(flakes[fl]);
		c.fill();
	};
},50);

</script>
</body> 
</html>

-- 
Evertjan.

[toc] | [prev] | [next] | [standalone]

#22183

Thanks this works great but could you or someone else clear up how the for loop and list work together.

[toc] | [prev] | [next] | [standalone]

#22185

Kale wrote on 26 nov 2013 in comp.lang.javascript:

> Thanks this works great but could you or someone else clear up how the
> for loop and list work together. 

Please quote what you are talking about, this is not email. 

[toc] | [prev] | [next] | [standalone]

#22190

Kale wrote:
^^^^
Who?

> Thanks this

What?

> works great but could you

Who?

> or someone else clear up how the for
> loop

Which “for” loop?

> and list

Which list?

> work together.
               ^
Is that a question?

<http://PointedEars.de/faq#posting>

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#22180

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web