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

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...

Filter by Category

Back to Latest Articles
### How to: generate 2D matrix from an Array of random values with Javascript

### Custom Angular Project setup guide

### Angular Material Custom Color Palette

Game

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...

Angular

In this article, I’m going to provide you with easy to follow generic Angular project setup. Moreover, this article is meant to give confidence to those who...

Angular

Completed example – stackblitz Source (github) What will you learn? I will show you 2 ways to create Angular material custom color palette. First I’ll use preset...

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[0]; i++) {
result[i] = [];
for (var j = 0; j < MATRIX_SIZE[1]; 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[0] * 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

## Comments