Assign randomly selected color using javascript

Question

I have a grid on my page that I want to fill through javascript with 200 elements. The actual code that populates the element .gridis as follows:

$(function () {
  var $gd = $(".grid");

  var blocks="";
  for(i=0; i < 200; i++){
    blocks += '<div class="block"></div>';
  }
  $gd.append(blocks);
});

What I'm trying to do now is assign a randomly selected color from the list to each item. Suppose red, blue, yellow, green (unexpectedly, huh?). I would like the values ​​to be the most random, and also that the same color should be selected twice twice (just to make it clear that something like red-blue-red-green-blue, etc., NOT red-red-green-yellow ).

Perhaps this may help in the randomization process, Fisher-Yates Shuffle , but I don’t know how to implement the unambiguous confusion of the rule above (if it can be applied at all).

What would be the best way to achieve this result? I also wonder if I can apply a gradient to each .blockinstead of a flat hexagonal color; I suggest that the best way to do this would be to assign a random class to each element displayed in CSS for the gradient, etc.

If the above script can be optimized for performance, I recommend any suggestions!

Additional Information:

• I am using jQuery
• The grid consists of 20 elements per row, for 10 rows
• The colors should be 4, but can be raised to 5-7, adding neutral gray tones, if that helps

http://codepen.io/Gruber/pen/lDxBw/

: , . " "? , , , , , - , ! - , "nope", "yep":

Answer 1

, , .

:

var options = ['red', 'green', 'blue', 'purple', 'yellow']; // never less than 3!

:

function filterFunc(val) { 
   var taken = { 'red': 1,  'blue': 1 };
   return taken[val] ? 0 : 1;
} 

n- (== 1) ( , , ...):

// filteredIndex returns nth (0-index) element satisfying filterFunc
//   returns undefined if insufficient options
function filteredIndex(options, filterFunc, n) {
   var i=-1, j=0;
   for(;j<options.length && i<n; ++j) {
     i += filterFunc(options[j]);
     if(i==n)
       break;
   }
   return options[j];
}

, 2 . , undefined.

, , , 3 , .

. :

function genFilterFunc(takenValues) {
   var takenLookup = {};
   for(var i=0; i < takenValues.length; ++i) {
      takenLookup[takenValues[i]] = 1;
   }
   var filterFunc = function(val) {
     return takenLookup[val] ? 0 : 1;
   };
   return filterFunc;
}

, grid[rows][cols]:

function randomColourNotUpOrLeft(grid, row, col, options, ignoreColour) {
  var takenlist = [];
  if(row > 0 && grid[row-1][col] != ignoreColour) {
    takenlist.push(grid[row-1][col]);
  }
  if(col > 0 && grid[row][col-1] != ignoreColour) {
    takenlist.push(grid[row][col-1]);
  }
  var filt = genFilterFunc(takenlist);
  var randomIndex = Math.floor(Math.random()*(options.length-takenlist.length));
  var randomColour = filteredIndex(options, filt, randomIndex);
  return randomColour;
}

, , ; 4, 0-3, 2, 0-1 .. / , , . , :

function fillGridSpeckled(grid, options, nullColour) {
  for(var row=0; row<grid.length; ++row) {
    for(var col=0; col<grid[row].length; ++col) {
      grid[row][col] = randomColourNotUpOrLeft(grid,row,col,options,nullColour);
    }
  }
}

jsbin , .

Answer 2

$(function () {
  var colors = ["red","blue","green","yellow"];
  var $gd = $(".grid");
  var previousColor;
  var blocks="";
  for(i=0; i < 200; i++){
    var color = "";
    while(color === previousColor) {
        color= colors [Math.floor(Math.random()*colors .length)];
    }
    blocks += '<div class="block" style="color:' + color + '"></div>';
    previousColor = color;
  }
  $gd.append(blocks);
});

Answer 3

-, :

CSS

.red { background-color: red; }
.blue { background-color: blue; }
.green { background-color: green; }
.yellow { background-color: yellow; }

javascript:

$(document).ready(function() {
  var colors = ["red","blue","green","yellow"];
  var $gd = $(".grid");
  var previousColor;
  var previousRow;
  var rowSize = 10;
  while(rowSize--) previousRow.push("none");
  var blocks = "";
  for(i=0; i < 200; i++){
    var color = colors [Math.floor(Math.random()*colors .length)];
    while((color == previousColor) || (color == previousRow[i%rowSize])) {
        color = colors [Math.floor(Math.random()*colors .length)];
    }
    blocks += '<div class="block ' + color + '"></div>';
    previousColor = color;
    previousRow[i%rowSize] = color;
  }
  $gd.append(blocks);
});

- MikeB, , , .