Что не так с моим Javascript-кодом?

Question

Я написал этот код холста JS. Это работает, но он рисует половину холста под углом. Могу ли я сделать что-то, чтобы исправить этот код, или мне нужно полностью переписать его. Правильно ли поместить этот код в setup (). Спасибо. https://p5js.org/reference/#/p5/random

var side = 10;
var grassArr = [];
var matrix = [];



console.log(matrix)


function setup() {
    for(var y = 0; y<49; y++){
    matrix[y] = [];
    for(var x = 0; x<49; x++){
let arr = [0,1,2]
let r = random(arr)
matrix[x][y] = r
matrix.push(r)    
}
}


frameRate(5)
 createCanvas(49 * side, 49* side);
  background('#acacac');
}


function draw(){
        for (var y = 0; y < 49; y++) {
for (var x = 0; x < 49; x++) {
        if(matrix[y][x]== 0){
                fill('#acacac')
                rect(x * side, y * side, side, side);
            }
                if(matrix[y][x]== 1){
                fill('green')
                rect(x * side, y * side, side, side);
            }
            if(matrix[y][x]== 2){
                fill('yellow');
                  rect(x * side, y * side, side, side);

            }
        } 
     }
}

Answer 1

У вас просто небольшая ошибка при построении матрицы.Вот, исправил это для тебя.

var side = 10;
var grassArr = [];
var matrix = [];

function setup() {
    for(var y = 0; y<49; y++){
        matrix[y] = [];
        for(var x = 0; x<49; x++){
            let arr = [0,1,2]
            let r = random(arr)
            matrix[y][x] = r;
        }
    }

    frameRate(5)
    createCanvas(49 * side, 49* side);
    background('#acacac');
}


function draw(){
    for (var y = 0; y < 49; y++) {
        for (var x = 0; x < 49; x++) {
            if(matrix[y][x]== 0){
                fill('#acacac')
                rect(x * side, y * side, side, side);
            }
            if(matrix[y][x]== 1){
                fill('green')
                rect(x * side, y * side, side, side);
            }
            if(matrix[y][x]== 2){
                fill('yellow');
                rect(x * side, y * side, side, side);
            }
        } 
     }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>

Вы инвертировали переменные x и y при создании матрицы и снова вызывали .push, что породило множество неопределенных мест в матрице.

Если вы хотите просто вызвать console.log (matrix) после создания матрицы, используя версию своего кода, и вы увидите множество неопределенных значений.