Generate number of pictures randomly a number of times

Question

I have 3 images in an array and I randomise the index to generate them randomly but I want to generate each image 4 times. What would be the most efficient way of doing this?

Edit (Full Code):

var image_array = ["image1.png", "image2.png", "image3.png"];

function set_page() 
{
    var table = document.getElementById("grid");

    if(table != null)
    {
        for(var i = 0; i < table.rows.length; i++)
        {
            for(var j = 0; j < table.rows[i].cells.length; j++)
            {
                table.rows[i].cells[j].onclick = function() {
                    click_cell(this);
                }

                //table.rows[i].cells[j].style.backgroundImage = "url('../images/back.png')";

                add_cell_image(table.rows[i].cells[j]);

            }
        }
    }
}

function click_cell(cell)
{

}

function add_cell_image(cell)
{
    for(var i = 0; i <= image_array.length; i++)
    {
        for(var j = 0; j <= image_array.length; j++)
        {
            var index = create_values();

            cell.innerHTML = "<img class='cell_image' align='middle' width='90' height='90' src ='../images/" + image_array[index] + "'/>";
        }
    }
}

function create_values()
{
    return Math.floor(Math.random() * image_array.length);
}

What do you mean by most efficient? – Brett DeWoody Jul 15 '17 at 17:26 — Brett DeWoody, Jul 15 '17 at 17:26

rednammoc · Answer 1 · 2017-07-15T17:43:27.373

You could use an array containing all indices and shuffle it:

<div id="cell"/>

<script>
images = ["img1", "img2", "img3"];

/**
 * Shuffles array in place.
 * @param {Array} a items The array containing the items.
 */
function shuffle(a) {
    var j, x, i;
    for (i = a.length; i; i--) {
        j = Math.floor(Math.random() * i);
        x = a[i - 1];
        a[i - 1] = a[j];
        a[j] = x;
    }
}

function range(number) {
    return Array.apply(null, Array(number)).map(function (_, i) {return i;});
}

function create_image(image_source) {
    var img = document.createElement('img');
    img.src = image_source;
    img.classList.add('cell_image');
    img.align = 'middle';
    img.height = '90';
    img.width = '90';
    return img;
}

function add_cell_image(cell) {
    indices = range(images.length * 4);
    shuffle(indices);
    for (let i = 0; i < indices.length; i++) {
        image_source = "../images/" + images[indices[i] % images.length];
        image = create_image(image_source);
        cell.appendChild(image);
    }
}

cell = document.getElementById('cell')
add_cell_image(cell);
</script>

I should have added the full code to begin with but how would this apply to the way I am doing it now? — J.Do, Jul 15 '17 at 18:11

Brett DeWoody · Answer 2 · 2017-07-17T13:04:43.677

Here's one solution. Not the most elegant but it should get you started.

The idea is to create an array of options - by concatenating your initial set of images X times. In your original question you said you wanted to repeat each image 4 times. So we'll create an array of options by concatenating your initial array 4 times.

We'll then select a random element from this options array, using .slice, which will remove that option from the options array. We'll continue this until the options array is empty.

var image_array = [1, 2, 3];
var options = create_options(image_array, 4);

function set_page(table, options) {
  if (table != null) {
    for (var i = 0; i < table.rows.length; i++) {
      for (var j = 0; j < table.rows[i].cells.length; j++) {
        var randIndex = Math.floor(Math.random() * options.length);
        var item = options.splice(randIndex, 1)[0];
        var imgEl = create_image(item);
        table.rows[i].cells[j].appendChild(imgEl);
      }
    }
  }
}

function create_image(image_id) {
  var imgEl = document.createElement('img');
  imgEl.src = "https://via.placeholder.com/350x150?text=" + image_id;
  imgEl.classList.add('cell_image');
  imgEl.height = '90';
  imgEl.width = '90';
  return imgEl;
}

function create_options(image_array, N) {
  var options = [];

  for (var i = 0; i < N; i++) {
    options = options.concat(image_array);
  }

  return options;
}

set_page(document.getElementById('grid'), options);

<table id="grid">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

I should have added the full code to begin with but how would this apply to the way I am doing it now? — J.Do, Jul 15 '17 at 18:11
Are you asking how your existing solution could be changed to make it work? Or looking for an efficient solution? — Brett DeWoody, Jul 15 '17 at 18:41
Does the solution above not work for you? You should be able to replace the numbers in the `image_array` with the strings you have. For example - `image_array = ["img1", "img2", "img3"];` — Brett DeWoody, Jul 17 '17 at 11:57
I'm adding the images into each cell in a table. This does work as it is but i'm trying to apply it to a table. I updated the code on the question the other day to include the set_page() function where i do the loop for each cell — J.Do, Jul 17 '17 at 12:16
how would I go about doing this but on a table? Print each picture on each cell — J.Do, Jul 17 '17 at 12:50
I have updated the solution. It was basically moving some of the code around from the existing solution. — Brett DeWoody, Jul 17 '17 at 13:05

Generate number of pictures randomly a number of times

2 Answers2