Randomizing elements in an array?

Question

I've created a site for an artist friend of mine, and she wants the layout to stay the same, but she also wants new paintings she'd produced to be mixed into the current layout. So I have 12 thumbnails (thumb1 - thumb12) on the main gallery page and 18 images (img1 - img18) to place as well

The approach I thought of was to create an array of all the images, randomize it, then simply scrape off the first 12 and load them into the thumb slots. Another approach would be to select 12 images randomly from the array. In the first case, I can't find a way to randomize the elements of an array. In the latter case, I can't wrap my brain around how to keep images from loading more than once, other than using a second array, which seems very inefficient and scary.

I'm doing all of this in Javascript, by the way.

Answer 1

I wrote this a while ago and it so happens to fit what you're looking for. I believe it's the Fisher-Yates shuffle that ojblass refers to:

Array.prototype.shuffle = function() {
   var i = this.length;
   while (--i) {
      var j = Math.floor(Math.random() * (i + 1))
      var temp = this[i];
      this[i] = this[j];
      this[j] = temp;
   }

   return this; // for convenience, in case we want a reference to the array
};

Note that modifying Array.prototype may be considered bad form. You might want to implement this as a standalone method that takes the array as an argument. Anyway, to finish it off:

var randomSubset = originalArray.shuffle().slice(0,13);

Or, if you don't want to actually modify the original:

var randomSubset = originalArray.slice(0).shuffle().slice(0,13);

Answer 2

You should implement the Fisher-Yates shuffle (otherwise known as the Knuth shuffle).

Look at the great answer provided here.

Answer 3

Your first approach would work. Just shuffle the 18 elements and take the first 12.

Answer 4

I recently came across this problem myself. The post here helped: http://waseemsakka.com/2012/02/14/javascript-dropping-the-last-parts-of-an-array-and-randomizing-the-order-of-an-array/ .

Basically, start by randomizing your array:

thumbs.sort(function(a, b) {
     return Math.random() - 0.5;
})

This will randomize the order of your 18 elements. Then to only keep the first 12 elements, you would just drop the last 6:

thumbs.length = 12;