Output Stream of Consciousness

I wish I had an original cite for this bit of Javascript that my wife found posted in a Fark forum, but it's fantastic fun, so I'm posting about it regardless.

To operate it, you copy the entire paragraph below, navigate to a web page (Fark works pretty well), paste it into the address bar in your web browser, and hit [ENTER]:

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName('img'); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.sin(R*x1+i*x2+x3)*x4+x5)+'px'; DIS.top=(Math.cos(R*y1+i*y2+y3)*y4+y5)+'px'}R++}setInterval('A()',50); void(0);

If all goes well, all the images will swirl around.

There are a few more things you can do with this code, too...

The DI=document.getElementsByTagName('img') grabs all pieces out of the page that have an img tag and throws them in a list.

You can replace this with a few other tag types. For example, replacing 'img' with 'input' will fling around input fields like buttons and entry fields - it does an absolute number on web pages where you fill in your address for example. Replacing it with 'a' will fling around all the links on the page, and so on.

The interesting "swirl" pattern is due to putting different offsets into the sine and cosine functions. If you leave some of these offsets off, or just make the offsets the same, you will get the pieces swirling around in a circle.

For example, we will set x2 and y2 to be the same and remove any reference to x3 and y3 - I'll explain what those values mean later.

(Just to nitpick, I will also use Math.cos for the horizontal and Math.sin for the vertical... that's the way cos and sin are used for unit circles :) )

For this example, we'll make it do this for all the links, you get:

javascript:R=0; x1=.1; y1=.1; x2=.25; y2=.25; x4=300; y4=200; x5=300; y5=200; DI=document.getElementsByTagName('a'); DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position='absolute'; DIS.left=(Math.cos(R*x1+i*x2)*x4+x5)+'px'; DIS.top=(Math.sin(R*y1+i*y2)*y4+y5)+'px'}R++}setInterval('A()',50); void(0);

Try it out - you get circles!

(Well, depending on your aspect ratio - I imagine your pixels may not be square, in which case, you can just increase y4 and y5 until you're happy with the result)

You can totally play around with a lot of the numbers. They really are arbitrarily chosen. For the mathematically-minded, Math.sin and Math.cos take radians, and if you want to convert degrees to radians, it's degrees*Math.PI/180. So if you wanted a 5 degree turn, you would set x1 and y1=5*Math.PI/180.

So here's a breakdown of the variables this Javascript uses:

• R = the current step value which increases by one every time the Javascript function is called
• x1 = the number of radians multiplied by R, contributes to the final angle used for the horizontal position
• y1 = the number of radians multiplied by R as well, contributes to the final angle used for the vertical position
• If you increase x1 or y1, the horizontal or vertical steps will get bigger - but only to a point
• x2 = the number of radians between each element in the swirl, for the horizontal position
• y2 = the number of radians between each element in the swirl, for the vertical position
• If you increase x2 or y2, the horizontal or vertical steps between elements will get bigger, to a point
• x3 = an additional angle in radians to add to the final angle used for the horizontal position
• y3 = an additional angle in radians to add to the final angle used for the vertical position
• Changing x3 or y3 will change how "twisty" the path around which the elements fly
• x4 = half of the width of the swirl area (Math.sin gives values from -1.0 to 1.0)
• y4 = half of the height of the swirly area
• If you increase x4 or y4, it increases the size of the box in which the swirling takes place
• x5 = horizontal offset to the center of the swirl
• y5 = vertical offset to the center of the swirl
• .getElementsByTagName = the kind of tag to use in the swirl - you can use a number of things, like "a", "img", "li" and "h2"
• setInterval('A(),50'); = run the swirl mover every 50 milliseconds (if possible) - changing this from 50 to 250 will make for a slower swirl (250 ms = 1/4 second)

Just a note - if you are trying out various combinations, you may need to refresh/reload the page you're on to first stop the swirl, since otherwise both versions of the Javascript may be trying to run at the same time.

I hadn't known you could just run Javascript by slapping it up top in the address bar, so that was a pretty nifty thing to learn.

Here's my own very inane contribution: Javascript that will change the title of this blog:

javascript:DI=document.getElementsByTagName('h1'); DIL=DI.length; for(i=0; i-DIL; i++){if (DI[i].getAttribute('id')=='pageTitle') {DI[i].innerHTML="Castle of Silliness";} void(0); }


If you're wondering about that void(0); at the end, just try taking it out. Essentially, it prevents the browser from loading a new page. If you try leaving it out with the blog-title-changing script, you'll get a new page that just says "Castle of Silliness", but it will stay on the same page if you have the void(0); there.

Happy swirling!