The Digital Research Initiative
The University of North Carolina at Chapel Hill

JavaScript for any occasion

Transmogrification Engines

Below are two really cool scripts that I developed to randomize specific objects of a webpage. The scripts produce a random number, and depending on that number, display an image or text that has been assigned to that number. Then, to see a different object, hit reload and the scripts spits out a new one. Very dynamic, very cool, very posh.

This first one uses the date to produce a random number. Then it says, "Okay, if the number I just made is greater than this number, then display this." This script goes between your <body> tags wherever you want the cool effect to go. An example of it in action follows.

<script>
<!--
function RandomNumber() {
  var today = new Date();
  var num= Math.abs(Math.sin(today.getTime()/1000));
  return num;
}
function RandomGraphics() {
  var x = RandomNumber();
  if (x > .77) {
    document.write("<img src='image here' align=center hspace=10>"); return; 
  }
  if (x > .66) {
    document.write("<img src='image here' align=center hspace=10>"); return; 
  }
  if (x > .55) {
    document.write("<img src='image here' align=center hspace=10>"); return; 
  }
  if (x > .44) {
    document.write("<img src='image here' align=center hspace=10>"); return; 
  }
  if (x > .33) {
    document.write("<img src='image here' align=center hspace=10>"); return; 
  }
  if (x > .22) {
    document.write("<img src='image here' align=center hspace=10>"); return; 
  }
  if (x > .11) {
    document.write("<img src='image here' align=center hspace=10>"); return; 
  }
  if (x > 0) {
    document.write("<img src='image here' align=center hspace=10>"); return; 
  }
}
RandomGraphics();
//End Script -->
</script>

Transmogrifier at work:


--James H. Cone

This next engine is my favorite; I use this one all the time. It's a lot more flexible and lets you have more than just eight randomized objects. It's broken up into two separate sections. The first part goes between the </title> and the </head> tags. The second part goes inbetween the <body> tags, wherever you want the randomized object to show up. That keeps your page's source code from getting too messy.

This part goes in the <head> tags. You set the number of objects where you see even[0]. This is your array, and you can have as many evens as you want. Make sure you start off at [0]. Then, when you're finished added objects, add them up and put the number between the () at makeArray thing. But be careful. Even though it starts off at [0], you count it as one. The next object, labeled [1], is your second object. Here the objects go to [2], so that means you've got a total of 3 objects.

<script>
<!-- 
function makeArray(len) {
        for (var i = 0; i < len; i++) this[i] = null;
	this.length = len;
}
var even = new makeArray(3);
even[0] = "Your stuff here"
even[1] = "More stuff here"
even[2] = "Where's all this stuff coming from?"

function rand(n) {
	seed = (0x015a4e35 * seed) % 0x7fffffff;
	return (seed >> 16) % n;
}
var now = new Date()
var seed = now.getTime() % 0xffffffff
// -->
</script>

This part goes inbetween <body> tags, wherever you want the object to show up.

<script language="JavaScript">
<!--
document.write(even[rand(even.length)])
// -->
</script>

This engine at work:


This site made by

By the time I get to Arizona...

This site was created especially for students of the UNC School of Journalism's
JOMC 050 Class, and anyone else who may be interested.
For more information, please contactdaikat@email.unc.edu
Last Updated: Wednesday, 26-Aug-1998 01:14:51 EDT