使用p5.js制作画布

Question

enter image description here我做了一个练习，我必须使用p5.js创建一个矩形画布，但是画布将包含小部分，所以我这样做，但是在精确度方面也有1分。我怎样才能得到2种不同颜色的小型，但这些颜色的50％必须是绿色，另一种是红色，使用矩阵。这是代码。

        var matrix = [

        ];

        var ab = 36;

        for (var y = 0; y < ab; y++) {
        matrix.push([])
        for (var x = 0; x < 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 < matrix.length; y++) {
        for (var x = 0; x < 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 < 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;
         }
         }
         }

Answer 1

正如在评论中所讨论的那样，问题减少到用一种颜色填充正好一半的矩阵而用另一种填充另一半。

你的矩阵是二维的我将在一个维度上给出一个解决方案，这应该很容易扩展到二维

var count = 0;
var arr = [];
for( var i = 0 ;i < ab;i++){
  arr[i] = 0;
}
while(true) {
  var i = floor(random(ab));
  if(arr[i] !==1) {
    arr[i] = 1;
    count++;
  }  
  if(count === ab/2) break; // assume ab is even
}

还有一种方法

用1填充数组的一半，用0填充一半，然后将数组洗牌

你可以很容易谷歌算法进行改组，

我能找到一个伪代码

// after filling half elements with 1 and half with zero
// To shuffle an array a of n elements (indices 0..n-1):
for i from n - 1 downto 1 do
    j = random integer with 0 <= j <= i
    exchange a[j] and a[i]

来源：https://www.geeksforgeeks.org/shuffle-a-given-array/

Answer 2

那是我的问题 var matrix = [

            ];

            var ab = 36;

            for (var y = 0; y < ab; y++) {
                matrix.push([])
                for(var x = 0 ; x<ab;x++){
                    matrix[y][x] = Math.floor(Math.random()*1)
                }
                for(var x = 0 ; x<ab/2;x++){
                    matrix[y][x] = 1
                }
            }




            var count = 0;
            var arr = [];
            for( var i = 0 ;i < ab;i++){
            arr[i] = 0;
            }
            while(true) {
            var i = Math.floor(Random(ab));
            if(arr[i] !==1) {
                arr[i] = 1;
                count++;
            }  
            if(count === ab/2) break; // assume ab is even
            }

            console.log(arr)
            var side = 16;
            function setup() {

                createCanvas(arr[0].length * side, arr.length * side);
                background('#acacac');
                frameRate()

            }
            function draw() {
                for (var y = 0; y < arr.length; y++) {
                    for (var x = 0; x < arr[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)
                        }
                        else if (matrix[y][x] == 2) {
                            fill(255, 255, 0)
                            rect(y * side, x * side, side, side)
                        }
                        else if (matrix[y][x] == 3) {
                            fill(255, 0, 0)
                            rect(y * side, x * side, side, side)
                        }
                    }
                }
            }