jlebrech · September 11, 2010 14:56 · jlebrech · Sep 11, 2010
diff --git a/gistfile1.js b/gistfile1.js
 <html>
 <head>
  <script type="application/javascript">
    var blts = [];c=100;w=800;h=600;f=0;fps=40;
    function rd(a){return Math.floor(Math.random()*a)};
    function neg(a){if (a < 0){return -1}else{return 1}}

    function draw() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "black";
        ctx.fillRect(0, 0, w, h);
 		    for(var i in blts){
          ctx.strokeStyle = blts[i].clr;//"white";
          console.log(ctx.strokeStyle);
          //ctx.fillRect (blts[i].x, blts[i].y, 5, 5);
          ctx.beginPath();
          ctx.moveTo(blts[i].x,blts[i].y);
          ctx.lineTo(blts[i].px,blts[i].py);
          ctx.closePath();
          ctx.stroke();
        }
      }
    }
    
    function mov(){
      for (var i in blts){
         b = blts[i];

         b.px = b.x;//previous x,y
         b.py = b.y;
         
         b.x+=b.xv; // only ever move objects by one, but skip movement
         b.y+=b.yv; // when it's not the right frame to do so
      }
    }
    
    function cld(){
       for (var i in blts){
         b = blts[i];
         if ((b.x < 0 || b.x > w)||(b.y < 0 || b.y > h)||(b.xv+b.yv==0)){
            blts.splice(i,1);
         }
      }
    }
    
    function blt(x,y){
       this.x = x; 
       this.y = y;
       this.xv = rd(10)-5; // pixels per second
       this.yv = rd(10)-5;
       this.clr = "rgba(" + (rd(255)+200)%255 + "," + (rd(255)+200)%255 + "," + (rd(255)+200)%255 + ",1)";
    }
    
    function crt(){
      if (blts.length<150){
 	    for (i=0;i<50;i++){
 	      blts.push(new blt(rd(w)+(w/2),rd(h)+(h/2)));
 	    }
 	  }
    }
    
    setInterval(function(){crt();mov();cld();draw();f++;},1000/fps);
    
  </script>
 </head>
 <body onload="draw();">
   <canvas id="canvas" width="800" height="600" style="border:solid 1px black;"></canvas>
 </body>
 </html>
	<html>
	<head>
	<script type="application/javascript">
	var blts = [];c=100;w=800;h=600;f=0;fps=40;
	function rd(a){return Math.floor(Math.random()*a)};
	function neg(a){if (a < 0){return -1}else{return 1}}

	function draw() {
	var canvas = document.getElementById("canvas");
	if (canvas.getContext) {
	var ctx = canvas.getContext("2d");
	ctx.fillStyle = "black";
	ctx.fillRect(0, 0, w, h);
	for(var i in blts){
	ctx.strokeStyle = blts[i].clr;//"white";
	console.log(ctx.strokeStyle);
	//ctx.fillRect (blts[i].x, blts[i].y, 5, 5);
	ctx.beginPath();
	ctx.moveTo(blts[i].x,blts[i].y);
	ctx.lineTo(blts[i].px,blts[i].py);
	ctx.closePath();
	ctx.stroke();
	}
	}
	}

	function mov(){
	for (var i in blts){
	b = blts[i];

	b.px = b.x;//previous x,y
	b.py = b.y;

	b.x+=b.xv; // only ever move objects by one, but skip movement
	b.y+=b.yv; // when it's not the right frame to do so
	}
	}

	function cld(){
	for (var i in blts){
	b = blts[i];
	if ((b.x < 0 \|\| b.x > w)\|\|(b.y < 0 \|\| b.y > h)\|\|(b.xv+b.yv==0)){
	blts.splice(i,1);
	}
	}
	}

	function blt(x,y){
	this.x = x;
	this.y = y;
	this.xv = rd(10)-5; // pixels per second
	this.yv = rd(10)-5;
	this.clr = "rgba(" + (rd(255)+200)%255 + "," + (rd(255)+200)%255 + "," + (rd(255)+200)%255 + ",1)";
	}

	function crt(){
	if (blts.length<150){
	for (i=0;i<50;i++){
	blts.push(new blt(rd(w)+(w/2),rd(h)+(h/2)));
	}
	}
	}

	setInterval(function(){crt();mov();cld();draw();f++;},1000/fps);

	</script>
	</head>
	<body onload="draw();">
	<canvas id="canvas" width="800" height="600" style="border:solid 1px black;"></canvas>
	</body>
	</html>