Snow Effect

[Supra]

Just for fun I'm working on a snow effect. I'm trying to optimize the speed since generating 1000 labels slows down the browser quite a bit. At 2 in the morning my mind is low on batteries If anyone has any suggestions, feel free to give some input.

<style>
BODY { overflow: hidden; background-color: #000000; font-family: Courier New; font-size: 10px; color: #FFFFFF }
.particle { width: 1px; height: 1px; position: absolute; top: 0px; left: 300px }
#Stat { color: LimeGreen; font-size: 11px }
#Options { border: 1px solid #FFFFFF; font-size: 9px; width: 200px; height: 150px; overflow: hidden }
.txt { font-family: Courier New; font-size: 12px }
.ipt { font-family: Courier New; font-size: 11px; border: 1px solid #FFFFFF; background-color: #000000; color: #FFFFFF; text-align: center }
</style>

<script>
<!--

pCount = 0;
maxSpew = 2;
maxTotal = 500;
mound = new Array();
running = false;
speed = 500;

onload = init;

function init() {
	mound.length = document.body.clientWidth;
		for (c=0; c<mound.length; c++) {
			mound[c] = 0;
		}
}

function Spew(n) {
	for (c=0; c<n; c++) {
		Generator.innerHTML += "<label class='particle' id='p"+pCount+"'>.</label>";
		pID = eval("document.all.p" + pCount);
		pID.style.pixelLeft = Math.round(Math.random() * document.body.clientWidth);
		Control(pID);
		pCount++;
	}
	if (pCount < maxTotal && running == true) {
		setTimeout("Spew("+spewCount+")",speed);
	}
}	

function Control(obj) {
	obj.style.pixelTop+=3;
	moundSize = 0;
		if (obj.style.pixelTop >= document.body.clientHeight - 10) {
			mound[obj.style.pixelLeft]++;
			moundSize = mound[obj.style.pixelLeft];
			obj.style.pixelTop -= moundSize;
		} else {
			setTimeout("Control("+obj.id+")",0);
		}
}

function Toggle(obj) {
	if (obj.innerText == "<<") {
		Options.style.height = "20px";
		obj.innerText = ">>";
	} else {
		Options.style.height = "150px";
		obj.innerText = "<<";
	}
}

function Run() {
	if (running == false) {
		running = true;
		maxSpew = mSpew.value;
		maxTotal = mTotal.value;
		speed = mSpeed.value;
		spewCount = Math.round(Math.random() * maxSpew);
		Spew(spewCount);
	} else {
		running = false;
	}
}
//-->
</script>

<div id="Generator"></div>
<div id="Stat"></div>
<div id="Options">
<table height="100%" width="100%" class="txt" cellpadding="0" cellspacing="0">
<tr>
<td align="left" valign="top">
Options
<hr>
</td>
<td align="right" valign="top">
<a style="cursor: default" onclick="Toggle(this)"><<</a>
<hr>
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="2">
<input type="textbox" class="ipt" value="2" size="3" id="mSpew"> Max Spew Particles
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="2">
<input type="textbox" class="ipt" value="1000" size="4" id="mTotal"> Max Particles Total
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="2">
<input type="textbox" class="ipt" value="500" size="4" id="mSpeed"> Speed (Milliseconds)
</td>
</tr>
<tr>
<td align="center" valign="top" colspan="2">
<input type="button" class="ipt" value="Toggle Particles" onClick="Run()" HIDEFOCUS>
</td>
</tr>
</table>
</div>

You can also look at it here:

http://e.toolz.tripod.com/snip/Snow.html

 

[Supra]

Hmm.. works locally but not remotely. Copy & paste it instead.

 

[Supra]

Fixed the problem with it not working remotely. The code above is obselete now. If anyone's interested in making the effect run more smoothly, view the source of the page here:

http://e.toolz.tripod.com/snip/Snow.html

 

[Supra]

No love for the snow! :\