Knuth Shuffle Multiple Arrays in the same way

Question

I am using a knuth shuffle to randomise an array. I would like to be able to add another array and have it randomise in the same way. I had previously thought of separating the array within the string, such as ['A|1|I,B|2|II,C|3|III,D|4|IV'] etc.

On stackoverflow, I read this but I can't work out how to arrange it for a knuth shuffle.

This is the JS I am using at the moment to get a string from the first array, with additional code taken from the link above.

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

var array_chromatic = ['A', 'A%23', 'Bb', 'B', 'C', 'C%23', 'Db', 'D', 'D%23', 'Eb', 'E', 'F', 'F%23', 'Gb', 'G', 'G%23', 'Ab'],
    array_chronumb = ['Aa', 'A%23a', 'Bbb', 'Bb', 'Cc', 'C%23c', 'Dbd', 'Dd', 'D%23d', 'Ebe', 'Ee', 'Ff', 'F%23f', 'Gbg', 'Gg', 'G%23g', 'Aba'];

        function renderKnuth()
        {
            array_chromatic.knuthShuffle();
      array_chronumb.knuthShuffle();

            var audio = document.getElementById('sound');
      audio.src = 'url-redacted' + array_chromatic[0] + '.mp3';
      var str1 = array_chromatic[0]
      str2 = str1.replace("%23", '#');
            document.getElementById('knuth_data2').innerHTML = str2;// + array_accidental[0];
document.getElementById('knuth_data3').innerHTML = array_chronumb[0];
        }

Answer 1

Shuffle a single array of ordered numbers, and then apply the shuffling of that array to the order of your other arrays, by using the values of the shuffled array as indices on the other arrays.

var index_array = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16];
index_array.knuthShuffle();

var array_chromatic_shuffled = [],
    array_chronumb_shuffled = [];

for(var i=0; i<index_array.length; ++i) {
    array_chromatic_shuffled[i] = array_chromatic[index_array[i]];
    array_chronumb_shuffled[i] = array_chronumb[index_array[i]];
}

array_chromatic = array_chromatic_shuffled;
array_chronumb = array_chronumb_shuffled;

Here, index_array gets shuffled, forming a list of shuffled indices used to read from the original arrays and populate the shuffled arrays. With each iteration, index_array[i] is a shuffled index used to pull a value from each array and place it at index i in the corresponding shuffled form of the array.

Answer 2

function from your link is exactly what you need

function randomise(a, b)
{
    var i = a.length, j, temp;
    while ( --i )
    {
        j = Math.floor( Math.random() * (i - 1) );
        temp = a[i];
        a[i] = a[j];
        a[j] = temp;
        temp = b[i];
        b[i] = b[j];
        b[j] = temp;
    }
};

var array_chromatic = ['A', 'A%23', 'Bb', 'B', 'C', 'C%23', 'Db', 'D', 'D%23', 'Eb', 'E', 'F', 'F%23', 'Gb', 'G', 'G%23', 'Ab'];
var array_chronumb = ['Aa', 'A%23a', 'Bbb', 'Bb', 'Cc', 'C%23c', 'Dbd', 'Dd', 'D%23d', 'Ebe', 'Ee', 'Ff', 'F%23f', 'Gbg', 'Gg', 'G%23g', 'Aba'];

randomise(array_chromatic, array_chronumb);