How to: generate 2D matrix from an Array of random values with Javascript

mksolemn
How to: generate 2D matrix from an Array of...

In this tutorial, I will generate a 2D matrix from an Array of random values. Also, the values will be generated per matrix tile from a predefined array of objects.

Let’s start by defining a data model that will be the tile of the 2D matrix. And variable defining 2D matrix rows and columns.

const tileData = [
{
chance: .1,
label: 'crab',
img: './png/023-crab.png'
},
{
chance: .3,
label: 'croc',
img: './png/039-crocodile.png'
},
{
chance: .4,
label: 'chic',
img: './png/028-chicken.png'
},
{
chance: .2,
label: 'lion',
img: './png/048-lion.png'
},
];
const MATRIX_SIZE = [4, 4];

Next, we need a function that will select one of the Array values at random. Remember to include the likelihood (chance)of rolling that array item.

chooseWeighted = (items, chances) => {
var sum = chances.reduce((acc, el) => acc + el, 0);
var acc = 0;
chances = chances.map(el => (acc = el + acc));
var rand = Math.random() * sum;
return items[chances.filter(el => el <= rand).length];
};

Furthermore, we need a function that generates the matrix with randomly generated values.

const allChances = tileData.map((a => a.chance));
generateMatrix = (allChances) => {
// generate matrix
var result = [];
for (var i = 0; i < MATRIX_SIZE; i++) {
result[i] = [];
for (var j = 0; j < MATRIX_SIZE; j++) {
result[i][j] = chooseWeighted(tileData, allChances);
}
}
};

That’s it – now we’re generating a matrix with random values. The logic bit is done. But it’s always nice to have some UI too – for that I only need another function, addGameTile:

addGameTile = (tileImg, tileLabel, tileSize) => {
let gameTile = document.createElement('div');
gameTile.style.backgroundImage = 'url(' + tileImg + ')';
gameEl.appendChild(gameTile);
gameTile.style.width = tileSize;
};

Now just plug this function inside generateMatrix:

//...
result[i][j] = chooseWeighted(tileData, allChances);
addGameTile(result[i][j].img, result[i][j].label, 1 / MATRIX_SIZE * 100 + '%')
//...

And that’s how I generate random 2D matrix from weighted Array;

You can find code with style on my github: https://github.com/mksolemn/random-2d-matrix-from-weighted-array