title: Making a canvas using p5.js
body: <p><a href="https://i.stack.imgur.com/glWON.png" rel="nofollow noreferrer">enter image description here</a>I got an exercise , where i have to create a rectangle-canvas using p5.js , but that canvas will consist small rects ,so i do it , but there is also 1 point in the exrecise . How can i get those small rects in 2 different colors , but 50% of those colores must be green and the other red , using matrix .
  Here is the code .</p>
  
  <pre><code>        var matrix = [
  
          ];
  
          var ab = 36;
  
          for (var y = 0; y &lt; ab; y++) {
          matrix.push([])
          for (var x = 0; x &lt; 36; x++) {
          matrix[y][x] = Math.floor(Math.random() * 2)
          }
          }
          console.log(matrix)
          var side = 16;
          function setup() {
  
          createCanvas(matrix[0].length * side, matrix.length * side);
          background('#acacac');
          frameRate()
  
          }
          function draw() {
          for (var y = 0; y &lt; matrix.length; y++) {
          for (var x = 0; x &lt; matrix[y].length; x++) {
  
          if (matrix[y][x] == 0) {
              fill(0, 255, 0)
              rect(y * side, x * side, side, side)
          }
          else if (matrix[y][x] == 1) {
              fill("red")
              rect(y * side, x * side, side, side)
          }
  
  
  
          function Shuffle (arguments) {
  for(var k = 0; k &lt; arguments.length; k++){
    var i = arguments[k].length;
    if ( i == 0 ) return false;
    else{
        while ( --i ) {
           var j = Math.floor( Math.random() * ( i + 1 ) );
           var tempi = arguments[k][i];
           var tempj = arguments[k][j];
           arguments[k][i] = tempj;
           arguments[k][j] = tempi;
           }
           return arguments;
           }
           }
           }
  </code></pre>