Autumn Leaves

[jscheuer1]

There seems to be some question here about the number of images with this latest code. First you have to understand that there are two ways to count images:

1.) The number of different images
2.) The number of images falling at once

So you could have only one image and have 10 of them falling at a time. The defaults in the script are currently set to 6 images falling 18 at a time:

	rise_fall.prototype = {
		defaults: { //these items may be set in the on page call
			dir: 1,    // Set the direction (1 for down, -1 for up)
			speed: 20,  // 12 to whatever (60 is pretty slow) higher numbers are slower
			Amount: 18, // Smoothness depends on image file size, the smaller the size the more you can use!
			sway: 6,  // Set amount of left/right swaying of objects (default = 10), higher numbers produce more sway
			zIndex: 1, // Set z-index value for image overlay
			//Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
			grphcs: [
				"al.gif",
				"bl.gif",
				"cl.gif",
				"dl.gif",
				"el.gif",
				"fl.gif" //<-- no trailing comma after last image
			]
		},

See, Amount is 18, and there are 6 images. You can set these however you want. I think that what JRR might want is:

	rise_fall.prototype = {
		defaults: { //these items may be set in the on page call
			dir: 1,    // Set the direction (1 for down, -1 for up)
			speed: 20,  // 12 to whatever (60 is pretty slow) higher numbers are slower
			Amount: 36, // Smoothness depends on image file size, the smaller the size the more you can use!
			sway: 6,  // Set amount of left/right swaying of objects (default = 10), higher numbers produce more sway
			zIndex: 1, // Set z-index value for image overlay
			//Pre-load your image(s) below! 6 is an optimal number for variety. Use just one for uniformity.
			grphcs: [
				"http://www.jr-richscooterdoc.com/FLeaf/Leaf1.png",
				"http://www.jr-richscooterdoc.com/FLeaf/Leaf2.png",
				"http://www.jr-richscooterdoc.com/FLeaf/Leaf3.png",
				"http://www.jr-richscooterdoc.com/FLeaf/Leaf4.png",
				"http://www.jr-richscooterdoc.com/FLeaf/Leaf5.png",
				"http://www.jr-richscooterdoc.com/FLeaf/Leaf6.png",
				"http://www.jr-richscooterdoc.com/FLeaf/Leaf7.png",
				"http://www.jr-richscooterdoc.com/FLeaf/Leaf8.png",
				"http://www.jr-richscooterdoc.com/FLeaf/Leaf9.png",
				"http://www.jr-richscooterdoc.com/FLeaf/Leaf10.png",
				"http://www.jr-richscooterdoc.com/FLeaf/Leaf11.png" //<-- no trailing comma after last image
			]
		},

But remember that the defaults are overridden in the call, and in the call on the demo we have:

leaves = new rise_fall({speed: 60, sway: 20, Amount: 10, accumulate: 255});

So, either make that 36 as well or get rid of it.

[Baller95]

John, going back to the previous code, it doesn't appear that the images are continually falling correctly while scrolling the page as seen on my forum - http://inspiredsciforum.com/

function iecompattest() {
        return (document.compatMode && document.compatMode.indexOf("CSS") != -1) ? document.documentElement : document.body
    }

    Ypos = new Array();
    Xpos = new Array();
    Speed = new Array();
    Step = new Array();
    Cstep = new Array();
    ns = (document.layers) ? 1 : 0;
    ns6 = (document.getElementById && !document.all || window.opera) ? 1 : 0;
    var newie = /MSIE (\d+)/.exec(navigator.userAgent);
    if (newie && newie[1] > 8) {
        ns6 = true;
    }
    speed = ns6 ? speed - 12 : speed

    if (ns) {
        for (i = 0; i < Amount; i++) {
            var P = Math.floor(Math.random() * grphcs.length);
            rndPic = grphcs[P];
            document.write("<LAYER NAME='sn" + i + "' LEFT=0 TOP=0><img src=" + rndPic + "></LAYER>");
        }
    } else {
        document.write('<div style="position:fixed;top:0px;left:0px"><div style="position:relative">');
        for (i = 0; i < Amount; i++) {
            var P = Math.floor(Math.random() * grphcs.length);
            rndPic = grphcs[P];
            document.write('<img id="si' + i + '" src="' + rndPic + '" style="position:absolute;top:0px;left:0px">');
        }
        document.write('</div></div>');
    }
    WinHeight = (ns || ns6) ? window.innerHeight : window.iecompattest().clientHeight - 66;
    WinWidth = (ns || ns6) ? window.innerWidth - 70 : window.iecompattest().clientWidth - 66;
    for (i = 0; i < Amount; i++) {
        Ypos[i] = Math.round(Math.random() * WinHeight);
        Xpos[i] = Math.round(Math.random() * WinWidth);
        Speed[i] = (Math.random() * 5 + 3) * dir;
        Cstep[i] = 0;
        Step[i] = Math.random() * 0.1 + 0.05;
    }

    function fall() {
        var WinHeight = (ns || ns6) ? window.innerHeight : window.iecompattest().clientHeight - 66;
        var WinWidth = (ns || ns6) ? window.innerWidth - 70 : window.iecompattest().clientWidth - 66;
        var hscrll = (ns || ns6) ? window.pageYOffset : iecompattest().scrollTop;
        var wscrll = (ns || ns6) ? window.pageXOffset : iecompattest().scrollLeft;
        for (i = 0; i < Amount; i++) {
            sy = Speed[i] * Math.sin(90 * Math.PI / 180);
            sx = Speed[i] * Math.cos(Cstep[i]);
            Ypos[i] += sy;
            Xpos[i] += sx * sway * 0.1;
            if (Ypos[i] > WinHeight && dir == 1 || Ypos[i] < 0 && dir == -1) {
                Xpos[i] = Math.round(Math.random() * WinWidth);
                Speed[i] = (Math.random() * 5 + 3) * dir;
            }
            Ypos[i] = (Ypos[i] > WinHeight && dir == 1) ? -60 : (Ypos[i] < 0 && dir == -1) ? WinHeight + 60 : Ypos[i];
            if (ns) {
                document.layers['sn' + i].left = Xpos[i] + wscrll;
                document.layers['sn' + i].top = Ypos[i] + hscrll;
            } else if (ns6) {
                var dirFac = dir == 1 ? 60 : 200
                document.getElementById("si" + i).style.left = Math.min(WinWidth, Xpos[i]) + 'px';
                document.getElementById("si" + i).style.top = Ypos[i] - dirFac + 'px';
            } else {
                document.all["si" + i].style.left = Xpos[i] + 'px';
                document.all["si" + i].style.top = Ypos[i] + 'px';
            }
            Cstep[i] += Step[i];
        }
        setTimeout('fall()', speed);
    }

    jQuery(fall);

[JRR]

Good Evening John.

I don't want to hijack this thread so if I need to start another say so. You are correct, I want to see "different" images not the same image 18 times or the same 6 over and over. If I put 11 "different" image codes in I want to be able to sit and watch all 11 of them fall and randomly is ok. I just want to know that there are 11 "different" images.

I will go back to this old code and as I stated before it has been changed to make just this happen in a unique way. One places the first image in the top part of the code which as you can see I have done. I use my own server/image host to host my images:

//Configure below to change URL path to the snow image
var snowsrc = "http://www.jr-richscooterdoc.com/FLeaf/Leaf1.png";

Now as I stated I do not have to do what you suggested with the other code of Baller95. As long as I put the other images in my host with the same exact url but numbered from say in this case Leaf2.png then I can put as many as I want in and in this case I chose 11 different leaves. I also do not according to this code size them over 40px because the max is 60px and that accounts for the scroll bar width which with W8.1 is 17px. The code is set for the scroll bar at 15px so adding 40px to 15px = 55px. If you go over the max image size if 60px the scroll bar and page will jump.

Now to get it to use the 11 "different" leaves I do my math in the code in two places:

(Math.round(Math.random()*10+1)+".$1"))

The 1 = the image url of Leaf1 and the 10 = Leaf2 to Leaf11 which again are on my image host and not in the code itself.

Now here is one cool part of this code and it's the line 8 of the code "var no =" If you just decide to use one image then set it to the original setting on 10 and move on. I have worked with this a lot. I know these leaves and numbers by heart. So to see 11 different leaves the minimum you can set the "var no =" is 36, you can go higher and you may see one image more than another?

The way it was explained to me is it's like rolling dice. Say you roll a six on your first roll and set this number to 10 then there is a one in ten chance you'll roll a six again so the same with seeing the image. If you set the number to 20 you have doubled the odds and so forth.

Now what is cool about this is for instance if someone complained for example and said there are too many leaves I could just go change this to a lower number, that's all. I wouldn't have to do anything like delete images on my host just lower this number. I know if you set it to 34 it will drop a leaf and you can set ther for 3 days and only count 10 "different" leaves.

Also the problem with the leaves moving as you scroll was also on this code but it was corrected by changing part of the old code from this:

doc_height = (window.innerHeight && snowdistance == "windowheight") ? window.innerHeight : (ie4up && snowdistance == "windowheight") ? iecompattest().clientHeight : (ie4up && !window.opera && snowdistance == "pageheight") ? iecompattest().scrollHeight : iecompattest().offsetHeight;

To this:

doc_height = $(document).height()

With this the leaves will continue to fall no mater if you scroll the page up or down.

I'm wondering if this code can be made into a plugin also?

Thanks.

[jscheuer1]

John, going back to the previous code, it doesn't appear that the images are continually falling correctly while scrolling the page as seen on my forum

Good Evening John.

I don't want to hijack this thread so if I need to start another say so. You are correct, I want to see "different" images not the same image 18 times or the same 6 over and over. If I put 11 "different" image codes in I want to be able to sit and watch all 11 of them fall and randomly is ok. I just want to know that there are 11 "different" images.

I will go back to this old code

Let's stick with the latest code. Use that. If there's still a problem, let me know.

[JRR]

Thanks John, I'll just watch this and see how it plays out.

[jscheuer1]

Oh, and there is another way (many really) of specifying the images. After all, it's just an array. So any method that yields an array of images will do. For instance one could do:

leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
	var gb = 'http://www.jr-richscooterdoc.com/FLeaf/Leaf', ge = '.png', i = 12, ga = [];
	while(--i){ga.push(gb + i + ge);}
	return ga;
})(), accumulate: 255});

demo:

http://home.comcast.net/~jscheuer1/s...se_jq_ssmu.htm

[Metermaid]

Looks good John - bit too much sway for me though.

[jscheuer1]

Windy day.

[jscheuer1]

Somethings else I usually mention whenever this comes up (it allways comes up in the fall for leaves and in winter for snow), this is CPU intensive and distracting/annoying to the visitor. The more images you have, and the more they accumulate, the slower the response from the CPU. Sometimes this is enough to slow down the leaves over time. And/or slow down performance of the computer in general while this effect is going on in a browser.

Those are the reasons why I've added the ability to stop and start these things independently of the page load or parse events. Once you've started one and assigned it to a variable name, you can stop it with varname.stop(), which will stop the motion, or varname.stop(true), which will stop it and hide the images. So for example you could do:

leaves = new rise_fall({speed: 60, sway: 20, Amount: 36, grphcs: (function(){
	var gb = 'leafimages/Leaf', ge = '.png', i = 12, ga = [];
	while(--i){ga.push(gb + i + ge);}
	return ga
})(), accumulate: 100});
setTimeout(function(){leaves.stop(true)}, 6000);

And they would stop and disappear after 6 seconds, freeing up the CPU, and letting the visitor see the page without distraction.

You can restart them with leaves.restart() or leaves.restart(true). The first will resume them from where they were, the second will wipe out everything and start over.

So, you could have a button or link on the page whose onclick event was to restart them if the user wants to.

[Metermaid]

Windy day.

Of course!