snow script

[arwes]

I use a JavaScript to generate snowflakes on a HTML page.
I want to calculate the size of the snowflakes by using th
Math.random() function to get a great variety of snow flakes. I jus
can't find the right method to do so.

The line where it's all about (to my opinion) is:

document.all["dot"+i].scaleX = document.all["dot"+i].scaleY
20+Math.random()*30;

<script language="JavaScript1.2">

var number = 30; // number of snowflakes
var speed = 20; //lower number=faster snowflakes
var snowflake = "snow4.gif";

var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var dx, xp, yp; // coordinates and position of variables
var am, stx, sty; // amplitude and steps of variables
var i, doc_width = 800, doc_height = 600;

if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}

dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();

for (i = 0; i < number; ++ i) {
dx[i] = 0; // set coordinate variables
xp[i] = Math.random()*(doc_width-50); // set position on X and Y
yp[i] = Math.random()*doc_height;
am[i] = Math.random()*20; // set amplitude
stx[i] = 0.02 + Math.random()/10; // set number steps X
sty[i] = 0.7 + Math.random(); // set number steps Y
if (ie4up) { // set div voor IE
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION:absolute
Z-INDEX: "+ i +"; VISIBILITY:visible; TOP: 15px; LEFT: 15px;\"><im
src='"+snowflake+"' border=\"0\"></div>");
} else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION:absolute
Z-INDEX: "+ i +"; VISIBILITY:visible; TOP: 15px; LEFT: 15px;\"><im
src='"+snowflake+"' border=\"0\"></div>");
}
}
}
function snowIE() { // IE main animation function
for (i = 0; i <number; ++ i) { // iterate for every dot
yp[i] += sty[i];

if (yp[i] > doc_height-50) {
xp[i] = Math.random()*(doc_width-am[i]-30);
yp[i] = 0;
stx[i] = 0.02 + Math.random()/10;
sty[i] = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
document.all["dot"+i].scaleX = document.all["dot"+i].scaleY
20+Math.random()*30;
}
dx[i] += stx[i];
document.all["dot"+i].style.pixelTop = yp[i];
document.all["dot"+i].style.pixelLeft = xp[i] + am[i]*Math.sin(dx[i]);

}
setTimeout("snowIE()", speed);
}

if (ns4up) {
snowNS();
} else if (ie4up) {
snowIE();
}

</script>

Thnx

Arwe

arwe
-----------------------------------------------------------------------
Posted via http://www.forum4designers.co
-----------------------------------------------------------------------
View this thread: http://www.forum4designers.com/message28165.htm

[Lasse Reichstein Nielsen]

arwes <ar*********@mail.forum4designers.com> writes:

I use a JavaScript to generate snowflakes on a HTML page.
I want to calculate the size of the snowflakes by using the
Math.random() function to get a great variety of snow flakes. I just
can't find the right method to do so.

The line where it's all about (to my opinion) is:

document.all["dot"+i].scaleX = document.all["dot"+i].scaleY =
20+Math.random()*30;
I would probably round it to an integer, i.e.,
Math.floor(20+Math.random()*30)
That gives a integer in the range 20-49 inclusive.

Also, the properties "scaleX" and "scaleY" are not used anywhere, and
they don't do anything in themselves.
Try:
var dotStyle = document.all["dot"+i].style;
dotStyle.width = dotStyle.height = Math.floor(20+Math.random()*30)+"px";
<script language="JavaScript1.2">
<script type="text/javascript">

In HTML 4, the type attrribute is *required*. The language attribute
is never needed, and if you use it, at least use another version
number than 1.2 (using JavaScript1.2 can make Netscape go into 1.2
compatability mode, which has some subtle but annoying differences
from normal Javascript ... there is a reason 1.2 was only the default
for Netscape 4.0 to 4.05, then they changed to 1.3).
var number = 30; // number of snowflakes
var speed = 20; //lower number=faster snowflakes
var snowflake = "snow4.gif";

var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;

Warning! A sure sign of a script written by someone who is not very
good at Javscript, is that they use numbers to represent boolean
values. Javascript has "true" and "false" built in. It is not C.

Also, this code is obviously from back when Netscape 4 and IE were the
only browsers. Not so any more, and this script will fail in, e.g.,
Mozilla/Netscape 6+

I'm pretty sure I have seen this script before here, and I recommended
finding a more up-to-date script. This one should be dead and buried
long ago.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Janwillem Borleffs]

Lasse Reichstein Nielsen wrote:

Also, the properties "scaleX" and "scaleY" are not used anywhere, and
they don't do anything in themselves.
Try:
var dotStyle = document.all["dot"+i].style;
dotStyle.width = dotStyle.height =
Math.floor(20+Math.random()*30)+"px";

This will not resize the image, only the containing <div />.

You can fix this by adding a name to the image , e.g. `dotimage + i`, and
then access it through the document.images property:

document.images['dotimage'+i].style.width =
document.images['dotimage'+i].style.height =
(20+Math.random()*30) + 'px';

Or simply by referencing a DOM object (which requires IE version 5.5+):

document.all["dot"+i].firstChild.style.width =
document.all["dot"+i].firstChild.style.height =
(20+Math.random()*30) + 'px';

Apart from this, I agree with you that the OP should search for an updated
script.
JW