Shuffle Lists & Unique Random Numbers

This tutorial will answer two questions:

1. How to shuffle a list
2. How to generate a set of random numbers that don’t repeat, meaning unique numbers

We are going to make an app that will have 4 image sprites in a canvas. The sprites will be moving across the screen. In every 5 seconds, the speed of the sprites will change. But there will never be two sprites that will have the same speed. We want them to always have different speeds in any given time. Our app is going to look like this-

If you want to take a look at the app and play with it, download UniqueSpeedyBirds project file..

So how do you generate random numbers from a given range that are always unique?

1. Have a list of predefined numbers you want to pick from
2. Shuffle the list
3. Get the first item in the list or get all

In our app, we have 4 image sprites. We assigned 4 different images to those sprites. We want them to have any of these four predefined speeds – 10, 15, 25, 30. We have a Clock component that fires after every 5 seconds. When it fires, we change the speeds of the sprites making sure that each of them is assigned a different speed.

As you can see in the blocks image above, we have defined a list variable with our predefined speeds values. We also have a temporary variable that we’ll need later.

Before we explain how we shuffle a list, let’s take a look at the implementation first-

To shuffle, we will use Fisher–Yates shuffle algorithm. You should definitely read that algorithm. We loop through each index starting with 1 until the size of the list that was passed into ShuffleList procedure. Current index is represented by variable i in for each loop. For each i, we select a random index between 0 to length of list minus i. We add the random index that we got, to i. The new index is represented by the local variable replace. We then swap the values in list to get a new value at index i. We do that for each index in list.

Swap procedure takes three arguments. The list where to swap, the index which we will swap at, and the replace index that we will use to swap with. We used a temporary variable named tempValue in Swap procedure to store the current value before we swap. If we don’t, we will lose current value. We use the replace list item block of list to do the swapping.

This is what we do when the timer goes off-

Firstly, we don’t want to change our original SPEEDS list. That is why we used a temporary variable named tempData. We added each item from SPEEDS list to that temporary variable using a for each loop. Remember we cannot just do tempData = SPEEDS. In that case, if you change anything in tempData, the changes will be also made to SPEEDS. If you are wondering why, you should better start here. After we add each item to our temporary variable, we call ShuffleList procedure and pass the temporary variable so that the shuffle only takes place to tempData, not to SPEEDS list.

After shuffling, we assign the first bird’s speed to the value at index 1 of tempData. For second bird, we use the second index and so on.

Our birds move from right to left because in design view we set their Heading property to 180. Whenever they reach an edge, they bounce off meaning the heading changes. If they bounce from left, their heading will change to 0 heading right and if they bounce from right, their heading will change to 180 moving leftward.

Also we change the pictures depending on the heading. If they are moving rightward, we want the picture where the bird is facing right.

Download the project source – UniqueSpeedyBirds