使用 p5.js 制作 canvas

Question

enter image description here我有一个练习，我必须使用 p5.js 创建一个矩形-canvas，但是 canvas 将包含小矩形，所以我做它，但在练习中也有 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填充一半数组，然后打乱数组

你可以很容易地 google 洗牌算法，

我能找到的一个伪代码

// 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 矩阵 = [

            ];

            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)
                        }
                    }
                }
            }

使用 p5.js 制作 canvas

Making a canvas using p5.js

javascript

p5.js