snow script

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • arwes

    snow script


    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="JavaS cript1.2">

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

    var ns4up = (document.layer s) ? 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.c lientWidth;
    doc_height = document.body.c lientHeight;
    }

    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()*d oc_height;
    am[i] = Math.random()*2 0; // 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=\"POSITIO N:absolute
    Z-INDEX: "+ i +"; VISIBILITY:visi ble; TOP: 15px; LEFT: 15px;\"><im
    src='"+snowflak e+"' border=\"0\"></div>");
    } else {
    document.write( "<div id=\"dot"+ i +"\" style=\"POSITIO N:absolute
    Z-INDEX: "+ i +"; VISIBILITY:visi ble; TOP: 15px; LEFT: 15px;\"><im
    src='"+snowflak e+"' 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.c lientWidth;
    doc_height = document.body.c lientHeight;
    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.pixelLef t = xp[i] + am[i]*Math.sin(dx[i]);

    }
    setTimeout("sno wIE()", 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

    #2
    Re: snow script

    arwes <arwes.zi8wm@ma il.forum4design ers.com> writes:
    [color=blue]
    > 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;[/color]

    I would probably round it to an integer, i.e.,
    Math.floor(20+M ath.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+M ath.random()*30 )+"px";
    [color=blue]
    > <script language="JavaS cript1.2">[/color]

    <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).
    [color=blue]
    > var number = 30; // number of snowflakes
    > var speed = 20; //lower number=faster snowflakes
    > var snowflake = "snow4.gif" ;
    >
    > var ns4up = (document.layer s) ? 1 : 0;
    > var ie4up = (document.all) ? 1 : 0;[/color]

    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 - lrn@hotpop.com
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
    'Faith without judgement merely degrades the spirit divine.'

    Comment

    • Janwillem Borleffs

      #3
      Re: snow script

      Lasse Reichstein Nielsen wrote:[color=blue]
      > 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+M ath.random()*30 )+"px";
      >[/color]

      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.sty le.width =
      document.all["dot"+i].firstChild.sty le.height =
      (20+Math.random ()*30) + 'px';

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


      JW



      Comment

      Working...