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

Groups > comp.lang.javascript > #22163

Re: dealing with multiple objects on Canvas

Show all headers | View raw

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.

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next 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