am试图使用p5js创造生活中的conways游戏。 (p5js website)
这是仿真gif的链接:Google Drive Link
我有两个二维数组,一个用于保存当前网格,一个用于保存更新的网格。数组的值为0 =空或1 =有效。我使用图像绘制网格,其中1个像素代表网格中的一个单元。现在,当我运行该程序时,它做了无法解释的事情(爆炸性增长。参见gif),但我认为它与确定单元是否应处于活动状态的规则有关。还是可能与我有多个网格有关?
我们将不胜感激,帮助您找出问题所在以及其产生这些模式的原因
这是我决定单元是否应处于活动状态的逻辑
for(var x = 0; x < width; x++){
for(var y = 0; y < height; y++){
//get cells neighbors
var n = getNeighbors(x,y);
//if cell is active
if(grid[x][y] == 1){
// #1 - Any live cell with fewer than two live neighbors dies, as if by underpopulation.
if(n < 2){
newGrid[x][y] = 0;
}else if(n > 3){// #3 -Any live cell with more than three live neighbors dies, as if by overpopulation.
newGrid[x][y] = 0;
}
// #2 - Any live cell with two or three live neighbors lives on to the next generation.
// this doesnt need a statement since if neighbors value is not < 2 or not > 3 then the value can only be 2 or 3
}else{
// #4 - Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.
if(n == 3){
newGrid[x][y] = 1;
}
}
}
}
仅供参考,此处是带有注释的全部信息(135行)
var grid = [];
var newGrid = [];
var img;
function setup() {
createCanvas(400, 400);
frameRate(10);
//populate grid array
for (var i = 0; i < width; i++) {
grid[i] = [];
for (var j = 0; j < height; j++) {
var r = random(0, 1);
if (r > 0.9) {
grid[i][j] = 1;
} else {
grid[i][j] = 0;
}
}
}
//populate newgrid
newGrid = grid;
//create img object
img = createImage(width, height);
//populate img pixels
drawImageUsingGrid();
//draw img
image(img, 0, 0);
}
function draw() {
//loop through grid
for (var x = 0; x < width; x++) {
for (var y = 0; y < height; y++) {
//get cells neighbors
var n = getNeighbors(x, y);
//if cell is active
if (grid[x][y] == 1) {
// #1 - Any live cell with fewer than two live neighbors dies, as if by underpopulation.
if (n < 2) {
newGrid[x][y] = 0;
} else if (n > 3) { // #3 -Any live cell with more than three live neighbors dies, as if by overpopulation.
newGrid[x][y] = 0;
}
// #2 - Any live cell with two or three live neighbors lives on to the next generation.
// this doesnt need a statement since if neighbors value is not < 2 or not > 3 then the value can only be 2 or 3
} else {
// #4 - Any dead cell with exactly three live neighbors becomes a live cell, as if by reproduction.
if (n == 3) {
newGrid[x][y] = 1;
}
}
}
}
//set current grid to the new updated grid
grid = newGrid;
//set img pixels based upon grid
drawImageUsingGrid();
//draw img
image(img, 0, 0);
}
function getNeighbors(x, y) {
//hold # of neighbors
var neighbors = 0;
//check if neighbor exists at index and is active
if (grid[x] && grid[x][y - 1] && grid[x][y - 1] == 1) { //top
neighbors++;
}
if (grid[x + 1] && grid[x + 1][y] && grid[x + 1][y] == 1) { //right
neighbors++;
}
if (grid[x] && grid[x][y + 1] && grid[x][y + 1] == 1) { //bottom
neighbors++;
}
if (grid[x - 1] && grid[x - 1][y] && grid[x - 1][y] == 1) { //left
neighbors++;
}
//diagonal neighbors
if (grid[x - 1] && grid[x - 1][y - 1] && grid[x - 1][y - 1] == 1) { //topleft
neighbors++;
}
if (grid[x + 1] && grid[x + 1][y - 1] && grid[x + 1][y - 1] == 1) { //topright
neighbors++;
}
if (grid[x - 1] && grid[x - 1][y + 1] && grid[x - 1][y + 1] == 1) { //bottomleft
neighbors++;
}
if (grid[x + 1] && grid[x + 1][y + 1] && grid[x + 1][y + 1] == 1) { //bottomright
neighbors++;
}
return neighbors;
}
function drawImageUsingGrid() {
//load img pixels to be edited
img.loadPixels();
//2d for loop
for (var i = 0; i < img.width; i++) {
for (var j = 0; j < img.height; j++) {
if (grid[i][j] == 0) {
//get pixel at x,y
var pix = getPixelIndex(i, j);
//set pixel rgba
img.pixels[pix + 0] = 255;
img.pixels[pix + 1] = 255;
img.pixels[pix + 2] = 255;
img.pixels[pix + 3] = 255;
} else {
//get pixel at x,y
var pix = getPixelIndex(i, j);
//set pixel rgba
img.pixels[pix + 0] = 0;
img.pixels[pix + 1] = 0;
img.pixels[pix + 2] = 0;
img.pixels[pix + 3] = 255;
}
}
}
//update img pixels
img.updatePixels();
}
function getPixelIndex(x, y) {
return (x + y * width) * 4;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.1/p5.js"></script>