Shuffle an Array of Images Without Repetitions

Question

I'm trying to shuffle 3 arrays (not together), to create a jigsaw puzzle. Information inside var cells is from when I define each piece etc in my HTML code. When I reload the page, I need one of the three arrays to appear, and need the contents to be in a random order. Splicing isn't getting me anywhere... I sometimes have all the puzzle piece elements, and sometimes one is missing (I know, I know, splicing removes). Any ideas?

var cells = ["c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "c10", "c11", "c12",];

var imageSet1 = ["./images1/img1-1.jpg", "./images1/img1-2.jpg", "./images1/img1-3.jpg", "./images1/img1-4.jpg", "./images1/img1-5.jpg", "./images1/img1-6.jpg", "./images1/img1-7.jpg", "./images1/img1-8.jpg", "./images1/img1-9.jpg", "./images1/img1-10.jpg", "./images1/img1-11.jpg", "./images1/img1-12.jpg"];

var imageSet2 = ["./images2/img2-1.jpg", "./images2/img2-2.jpg", "./images2/img2-3.jpg", "./images2/img2-4.jpg", "./images2/img2-5.jpg", "./images2/img2-6.jpg", "./images2/img2-7.jpg", "./images2/img2-8.jpg", "./images2/img2-9.jpg", "./images2/img2-10.jpg", "./images2/img2-11.jpg", "./images2/img2-12.jpg"];

var imageSet3 = ["./images3/img3-1.jpg", "./images3/img3-2.jpg", "./images3/img3-3.jpg", "./images3/img3-4.jpg", "./images3/img3-5.jpg", "./images3/img3-6.jpg", "./images3/img3-7.jpg", "./images3/img3-8.jpg", "./images3/img3-9.jpg", "./images3/img3-10.jpg", "./images3/img3-11.jpg", "./images3/img3-12.jpg"];

var imgSet = [imageSet1, imageSet2, imageSet3];
var imgShuffed = imgSet[Math.floor(Math.random() * imgSet.length)];
for (c in cells) {
  var index = Math.floor(Math.random() * imgSet.length);
  document.getElementById(cells[c]).src = imgShuffed[index];
  imgShuffed.splice(index,1);
}

It sounds like there are two things you need to do: 1) Pick a random array; 2) Shuffle it. Tackle one of those at a time, providing an example of *just* that one problem, what you've tried, and what's happening so far. (I suspect the "pick a random array" part is okay...) — Jon Skeet, Oct 30 '15 at 06:59
use this https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle, fast, small, unbiased shufling — Nikos M., Oct 30 '15 at 07:05
This will help : http://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array — sudo_dudo, Oct 30 '15 at 07:07

score 2 · Answer 1 · answered Oct 30 '15 at 07:18

Break the problem down into parts. First of all, lets see about shuffling an array.

The simplest way I can think of to shuffle an array is to keep picking random elements until all of the elements are gone:

function shuffleArray(arr) {
    var newarray = [];
    while(arr.length > 0) {
        var chosenIndex = Math.floor(Math.random() * arr.length); //choose a number thats in the array
        var chosenValue = arr[chosenIndex];
        newarray.push(chosenValue); //add the new value to the array
        arr.splice(chosenIndex, 1); //and "remove" it from the old array by creating a new array without it
    }
    return newarray;
}

console.log(shuffleArray([1,2,3,4,5])); //example

Next, choose the correct puzzle as you're doing.

var imgSet = [imageSet1, imageSet2, imageSet3];
var chosenSet = imgSet[Math.floor(Math.random()*imgSet.length)];

Then shuffle the chosen set:

var shuffledChosenSet = shuffleArray(chosenSet);

Now, use that shuffled set to finish the job.

score 0 · Answer 2 · answered Oct 30 '15 at 07:03

What if you'll use a random number as index to fetch image data, and by that assemble new shuffled array?

Of corse you need to check duplications - but you can make it by saving fetched indexes and comparing the new one with them. Am I getting your problem?

score 0 · Answer 3 · answered Oct 30 '15 at 07:06

0

This is you made an array but has two dimensions. For using random function you have merge all your array in an one dimenson array. I hope it helps

answered Oct 30 '15 at 07:06

Ufuk Akoguz

72
1
8

score 0 · Answer 4 · answered Oct 30 '15 at 07:14

var sampleArray = [1,2,3,4,5];
var arrayTemp = [];
for (var i = sampleArray.length;i>=0;i--){
   var temp = Rand100()%i;
   arrayTemp.push(sampleArray[temp]);
   sampleArray.splice(temp,1);
};
console.log(arrayTemp);

Above example gives you an array with random entries of the previous one.This gives you random entries without any duplicate entry and within constant time complexity.

score 0 · Answer 5 · answered Oct 30 '15 at 07:22

Here is the demo : http://jsfiddle.net/patelmit69/tjmvqajL/

var cells = ["c1", "c2", "c3", "c4", "c5", "c6", "c7", "c8", "c9", "c10", "c11", "c12",];
var indexes = new Array();
var imageSet1 = ["http://dummyimage.com/100x100/000/fff&text=img11", "http://dummyimage.com/100x100/000/fff&text=img1-2.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-3.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-4.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-5.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-6.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-7.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-8.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-9.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-10.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-11.jpg", "http://dummyimage.com/100x100/000/fff&text=img1-12.jpg"];

var imageSet2 = ["http://dummyimage.com/100x100/000/fff&text=img11", "http://dummyimage.com/100x100/000/fff&text=img2-2.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-3.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-4.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-5.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-6.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-7.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-8.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-9.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-10.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-11.jpg", "http://dummyimage.com/100x100/000/fff&text=img2-12.jpg"];

var imageSet3 = ["http://dummyimage.com/100x100/000/fff&text=img11", "http://dummyimage.com/100x100/000/fff&text=img3-2.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-3.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-4.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-5.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-6.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-7.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-8.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-9.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-10.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-11.jpg", "http://dummyimage.com/100x100/000/fff&text=img3-12.jpg"];

var imgSet = [imageSet1, imageSet2, imageSet3];
alert(imgSet.length);
var imgShuffed = imgSet[Math.floor(Math.random() * imgSet.length)];

for (c in cells) {
  var index =  Math.floor(Math.random() * imgShuffed.length);
  document.getElementById(cells[c]).src = imgShuffed[index];
  imgShuffed.splice(index,1);
}

<img id="c1" src='' />
<img id="c2" src='' />
<img id="c3" src='' />
<img id="c4" src='' />
<img id="c5" src='' />
<img id="c6" src='' />
<img id="c7" src='' />
<img id="c8" src='' />
<img id="c9" src='' />
<img id="c10" src='' />
<img id="c11" src='' />
<img id="c12" src='' />

Shuffle an Array of Images Without Repetitions

5 Answers5