Math.random() Taken A Step Further..., An 'Always-Unique' Method Rating Options

[Rob Wells]

================================
In this Tutorial I will explain a common problem with generating random numbers, and how it can be overcome.
================================

· First let me explain the problem.

For every page visited in my imaginary website a function (changeNumber()) is called:

CODE

function changeNumber() {
    myRange = 10;
    myNumber = Math.round(Math.Random()*myRange);
    myText = myNumber;
}

A brief explanation:
myRange = 10;
The random number will be somewhere between 0 & 10;

myNumber = Math.round(Math.Random()*myRange);
Math.Round is making sure the random number is whole, Math.Random is generating a random number between 0 & 1, then multiplying it by the Range we set above;

myText = myNumber;
Finally the result generated is displayed in the textfield, which as you will probably have guessed, has the variable 'myText'.

So in summary I will execute the function everytime a button is pressed on my site.
The generated number will serve as part of a filename of an external image that will load in an area of my site, for example:
/images/site_img4.jpg
My images directory will contain 10 images, hence myRange = 10, and in theory this will display a different image everytime the function is called.

Obviously that isn't quite the case...

The script generates a random number between 1 & 10 and it has no idea what the last number generated was. Therefore, more often than you'd think the same number is generated twice in a row (possibly even more). You might think this is a minor problem, but imagine if a holiday company wanted to display a random offer each time a link was pressed. They would certainly want unique data each time, due to the fact that some people might not be interested in a cheap flight to paris, or germany, which at the moment could potentially be all a user sees through several pages.

In this tutorial I will show you how to overcome this problem using a simple and easy-to-understand method...
Before we start please fire up Swishmax, create a new movie & set your Framerate to 10fps (this will allow more time to analyse results).

Right! Let's start with the complete code we have just looked at:

CODE

function changeNumber() {
    myRange = 10;
    myNumber = Math.round(Math.Random()*myRange);
    myText = myNumber;
}
onEnterFrame() {
    changeNumber();
}

Create a Dynamic Text Field. Any color, style, width, height or gender you wish
Make sure you set the Variable to 'myText'.

Great, you're ready to go.

Copy and paste the above into 'Scene_1', then preview your movie.

You should now be looking at a continually changing number between 0 & 10.
Random, eh? ...No!
It is fairly hard to identify numbers occuring twice or more, but trust me; they do.

Take a look at this example, it uses the exact same script as above but also detects reoccurring numbers:

Click (.swf)

I have sped the movie up considerably to produce results faster.

Thankfully there is an easy fix to this.
We basically need to intercept the random generated number before it is displayed on-screen, detect if it is the same as before, then continue accordingly.

Okay, We must find a suitable place to place our interceptor, so another look at the code:

CODE

function changeNumber() {
    myRange = 10;
    myNumber = Math.round(Math.Random()*myRange);
    myText = myNumber;
}
onEnterFrame() {
    changeNumber();
}

myRange is needed before the interception, as is myNumber seeing as we need to actually generate a random number before checking it.

myText is too far. We want to check the random number before it is sent back to the browser.

So between myNumber & myText will be a sensible place to check our number.

We will use a conditional script for our interceptor. We want it to perform the following:

1. *Grab the last number generated that passed the interceptor (We will come to this in a minute).
2. Check if this number is equal to the number the script has just generated.
3. If True and the two number are the same generate a new number and begin checking process again.
4. If False and the two numbers are different continue and display the new random number.

* [Grab the last number generated that passed the interceptor]
We will accomplish this by setting a new variable, oldNumber, at the very beginning of the function and setting its value to myNumber's value. This will in a way keep a 1-level history of each new (intercepted & passed) generation.

Our code now looks like this:

CODE

function changeNumber() {
    oldNumber = myNumber;
    myRange = 10;
    myNumber = Math.round(Math.Random()*myRange);
    myText = myNumber;
}
onEnterFrame() {
    changeNumber();
}

We can now use oldNumber in our interceptor and compare it to myNumber which now (might) have a new value.

Now for the conditional 'If' statement.
Take a look at the following code:

CODE

    if (oldNumber == myNumber) {
        changeNumber();
    }

What the code is doing in English:

If oldNumber is equal to myNumber then execute the function changeNumber, thus not showing the same random number again but instead restarting the random generation.

So, once combined with the rest of our script we have the following:

CODE

function changeNumber() {
    oldNumber = myNumber;
    myRange = 10;
    myNumber = (Math.round(Math.Random()*myRange));
    if (oldNumber == myNumber) {
        changeNumber();
    }
    myText = myNumber;
}

In brief, First the script saves the last used number, it then sets 10 as the range of random numbers (This can be removed and inserted onload if you wish, as it doesn't change each loop), Next a new random number is generated between 0 and our defined range, This number is then compared to the saved number, if they are identical the process stops and restarts the function, if they are both unique the interceptor lets the rest of the code run and thereby displaying the completley random number on the screen.

You can see an example of the interceptor at work below:

Click (.swf)

================================

And there you have it. Always-Unique Random Numbers in Swish.

I hope you have gained something through this tutorial.
What's more I hope it is of use.

Cheers,
Rob

[RedDragon]

Great tut Rob, very well-explained

Thx for adding!

[*D*]

This is way over me lol but all the same it looks pretty kewl.

Many thanks for adding Rob.

[mobosof]

nice tute Rob, and nice explanation.
maybe add a few examples as in loading pics/swfs etc...as I'm sure you'll be asked "how do i change mytext=mynumber to load random...."

[axivelet]

thank you

[chriskanye]

Excellently explained. Sometimes that takes more skill than actually doing it