javascript - 具有 p5 像素填充的特性

Question

我正在使用 p5.js 库。

我正在制作一个旨在自动填充封闭空间的程序，但我遇到了问题。有时程序会填满半闭环，我不明白为什么。如果有人可以帮助我确定问题，我会自己解决。

这是该问题的示例:

你必须放大很多，否则它会损坏(如果你知道如何放大像素，在旁注中也会很棒)

let pixelVals;
let checkedPixels;
let filledPixels;
let iter = 0;
let drawFilled;

function setup() {
  pixelVals = array(height, width, 4);

  createCanvas(25, 25);
  pixelDensity(1);

  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      pixelVals[i][j][0] = 0;
      pixelVals[i][j][1] = 0;
      pixelVals[i][j][2] = 0;
      pixelVals[i][j][3] = 255;
    }
  }
}

function draw() {
  loadPixels();

  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      pixelVals[i][j][1] = 0;
    }
  }

  if(mouseIsPressed) {
    if(mouseX < width && mouseX >= 0 && mouseY < height && mouseY >= 0) {
      pixelVals[mouseX][mouseY][0] = 255;
    }
  }

  checkEnclosed();

  updatePixels();
}

function checkEnclosed() {
  checkedPixels = array(height, width);
  filledPixels = array(height, width);

  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      checkedPixels[i][j] = false;
      filledPixels[i][j] = false;
    }
  }

  for(var i = 0; i < height; i++) {
    for(var j = 0; j < width; j++) {
      if(!checkedPixels[i][j] && pixelVals[i][j][0] != 255) {
        drawFilled = true;
        checkSurroundings(i, j);
        if(drawFilled) {
          setFilled();
        } else {
          setFilledFalse();
        }
      }
    }
  }

  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      for(var k = 0; k < 4; k++) {
        pixels[(i + j * width) * 4 + k] = pixelVals[i][j][k];
      }
    }
  }
}

function checkSurroundings(x, y) {
  pixelVals[x][y][1] = 255;
  filledPixels[x][y] = true;
  checkedPixels[x][y] = true;

  if(x == width - 1 || x == 0 || y == height - 1 || y == 0) {
    drawFilled = false;
  } else {
    if(x + 1 < width) {
      if(pixelVals[x + 1][y][0] != 255) {
        if(!checkedPixels[x + 1][y]) {
          checkSurroundings(x + 1, y)
        }
      }
    }
    if(x - 1 >= 0) {
      if(pixelVals[x - 1][y][0] != 255) {
        if(!checkedPixels[x - 1][y]) {
          checkSurroundings(x - 1, y)
        }
      }
    }
    if(y + 1 < height) {
      if(pixelVals[x][y + 1][0] != 255) {
        if(!checkedPixels[x][y + 1]) {
          checkSurroundings(x, y + 1)
        }
      }
    }
    if(y - 1 >= 0) {
      if(pixelVals[x][y - 1][0] != 255) {
        if(!checkedPixels[x][y - 1]) {
          checkSurroundings(x, y - 1)
        }
      }
    }
  }
}

function setFilled() {
  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      if(filledPixels[i][j]) {
        pixelVals[i][j][2] = 255;
      }
    }
  }
}

function setFilledFalse() {
  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      filledPixels[i][j] = false;
    }
  }
}

function array(length) {
  var arr = new Array(length || 0), i = length;

  if (arguments.length > 1) {
    var args = Array.prototype.slice.call(arguments, 1);
    while(i--) arr[length-1 - i] = array.apply(this, args);
  }
  return arr
}

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

我是 JavaScript 的新手，所以请忽略那些乱七八糟的代码 :)。

let pixelVals;
let checkedPixels;
let filledPixels;
let iter = 0;
let drawFilled;

function setup() {
  pixelVals = array(height, width, 4);

  createCanvas(25, 25);
  pixelDensity(1);

  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      pixelVals[i][j][0] = 0;
      pixelVals[i][j][1] = 0;
      pixelVals[i][j][2] = 0;
      pixelVals[i][j][3] = 255;
    }
  }
}

function draw() {
  loadPixels();

  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      pixelVals[i][j][1] = 0;
    }
  }

  if(mouseIsPressed) {
    if(mouseX < width && mouseX >= 0 && mouseY < height && mouseY >= 0) {
      pixelVals[mouseX][mouseY][0] = 255;
    }
  }

  checkEnclosed();

  updatePixels();
}

function checkEnclosed() {
  checkedPixels = array(height, width);
  filledPixels = array(height, width);

  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      checkedPixels[i][j] = false;
      filledPixels[i][j] = false;
    }
  }

  for(var i = 0; i < height; i++) {
    for(var j = 0; j < width; j++) {
      if(!checkedPixels[i][j] && pixelVals[i][j][0] != 255) {
        drawFilled = true;
        checkSurroundings(i, j);
        if(drawFilled) {
          setFilled();
        } else {
          setFilledFalse();
        }
      }
    }
  }

  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      for(var k = 0; k < 4; k++) {
        pixels[(i + j * width) * 4 + k] = pixelVals[i][j][k];
      }
    }
  }
}

function checkSurroundings(x, y) {
  pixelVals[x][y][1] = 255;
  filledPixels[x][y] = true;
  checkedPixels[x][y] = true;

  if(x == width - 1 || x == 0 || y == height - 1 || y == 0) {
    drawFilled = false;
  } else {
    if(x + 1 < width) {
      if(pixelVals[x + 1][y][0] != 255) {
        if(!checkedPixels[x + 1][y]) {
          checkSurroundings(x + 1, y)
        }
      }
    }
    if(x - 1 >= 0) {
      if(pixelVals[x - 1][y][0] != 255) {
        if(!checkedPixels[x - 1][y]) {
          checkSurroundings(x - 1, y)
        }
      }
    }
    if(y + 1 < height) {
      if(pixelVals[x][y + 1][0] != 255) {
        if(!checkedPixels[x][y + 1]) {
          checkSurroundings(x, y + 1)
        }
      }
    }
    if(y - 1 >= 0) {
      if(pixelVals[x][y - 1][0] != 255) {
        if(!checkedPixels[x][y - 1]) {
          checkSurroundings(x, y - 1)
        }
      }
    }
  }
}

function setFilled() {
  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      if(filledPixels[i][j]) {
        pixelVals[i][j][2] = 255;
      }
    }
  }
}

function setFilledFalse() {
  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      filledPixels[i][j] = false;
    }
  }
}

function array(length) {
  var arr = new Array(length || 0), i = length;

  if (arguments.length > 1) {
    var args = Array.prototype.slice.call(arguments, 1);
    while(i--) arr[length-1 - i] = array.apply(this, args);
  }
  return arr
}

非常感谢，

扎克

Answer 1

这是我通过更改 checkSurroundings 函数的解决方案:

function checkSurroundings(x, y) {
  pixelVals[x][y][1] = 255;
  filledPixels[x][y] = true;
  checkedPixels[x][y] = true;

  if(x == width - 1 || x == 0 || y == height - 1 || y == 0) {
    drawFilled = false;
  }
  if(x + 1 < width) {
    if(pixelVals[x + 1][y][0] != 255) {
      if(!checkedPixels[x + 1][y]) {
        checkSurroundings(x + 1, y)
      }
    }
  }
  if(x - 1 >= 0) {
    if(pixelVals[x - 1][y][0] != 255) {
      if(!checkedPixels[x - 1][y]) {
        checkSurroundings(x - 1, y)
      }
    }
  }
  if(y + 1 < height) {
    if(pixelVals[x][y + 1][0] != 255) {
      if(!checkedPixels[x][y + 1]) {
        checkSurroundings(x, y + 1)
      }
    }
  }
  if(y - 1 >= 0) {
    if(pixelVals[x][y - 1][0] != 255) {
      if(!checkedPixels[x][y - 1]) {
        checkSurroundings(x, y - 1)
      }
    }
  }
}

let pixelVals;
let checkedPixels;
let filledPixels;
let iter = 0;
let drawFilled;

function setup() {
  pixelVals = array(height, width, 4);

  createCanvas(25, 25);
  pixelDensity(1);

  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      pixelVals[i][j][0] = 0;
      pixelVals[i][j][1] = 0;
      pixelVals[i][j][2] = 0;
      pixelVals[i][j][3] = 255;
    }
  }
}

function draw() {
  loadPixels();

  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      pixelVals[i][j][1] = 0;
    }
  }

  if(mouseIsPressed) {
    if(mouseX < width && mouseX >= 0 && mouseY < height && mouseY >= 0) {
      pixelVals[mouseX][mouseY][0] = 255;
    }
  }

  checkEnclosed();

  updatePixels();
}

function checkEnclosed() {
  checkedPixels = array(height, width);
  filledPixels = array(height, width);

  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      checkedPixels[i][j] = false;
      filledPixels[i][j] = false;
    }
  }

  for(var i = 0; i < height; i++) {
    for(var j = 0; j < width; j++) {
      if(!checkedPixels[i][j] && pixelVals[i][j][0] != 255) {
        drawFilled = true;
        checkSurroundings(i, j);
        if(drawFilled) {
          setFilled();
        } else {
          setFilledFalse();
        }
      }
    }
  }

  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      for(var k = 0; k < 4; k++) {
        pixels[(i + j * width) * 4 + k] = pixelVals[i][j][k];
      }
    }
  }
}

function checkSurroundings(x, y) {
  pixelVals[x][y][1] = 255;
  filledPixels[x][y] = true;
  checkedPixels[x][y] = true;

  if(x == width - 1 || x == 0 || y == height - 1 || y == 0) {
    drawFilled = false;
  }
  if(x + 1 < width) {
    if(pixelVals[x + 1][y][0] != 255) {
      if(!checkedPixels[x + 1][y]) {
        checkSurroundings(x + 1, y)
      }
    }
  }
  if(x - 1 >= 0) {
    if(pixelVals[x - 1][y][0] != 255) {
      if(!checkedPixels[x - 1][y]) {
        checkSurroundings(x - 1, y)
      }
    }
  }
  if(y + 1 < height) {
    if(pixelVals[x][y + 1][0] != 255) {
      if(!checkedPixels[x][y + 1]) {
        checkSurroundings(x, y + 1)
      }
    }
  }
  if(y - 1 >= 0) {
    if(pixelVals[x][y - 1][0] != 255) {
      if(!checkedPixels[x][y - 1]) {
        checkSurroundings(x, y - 1)
      }
    }
  }
}

function setFilled() {
  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      if(filledPixels[i][j]) {
        pixelVals[i][j][2] = 255;
      }
    }
  }
}

function setFilledFalse() {
  for(var i = 0; i < width; i++) {
    for(var j = 0; j < height; j++) {
      filledPixels[i][j] = false;
    }
  }
}

function array(length) {
  var arr = new Array(length || 0), i = length;

  if (arguments.length > 1) {
    var args = Array.prototype.slice.call(arguments, 1);
    while(i--) arr[length-1 - i] = array.apply(this, args);
  }
  return arr
}

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