Quirks and nuances when using p5's pixel fill function

Question

Quirks and nuances when using p5's pixel fill function

I am currently utilizing the p5.js library to work on a program that is designed to automatically fill closed spaces. However, I am encountering an issue where the program sometimes fills half-closed loops for reasons unknown to me. If anyone could provide assistance in pinpointing the problem, I would greatly appreciate it.

Here is an example illustrating the issue: https://i.sstatic.net/alfgW.png

To observe the problem, you need to zoom in significantly; otherwise, it breaks (on a side note, any guidance on scaling up the pixels would also be valuable).

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

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

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

  // Additional code for setting initial values
}

// Further functions and definitions...

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

Apologies for the messy JavaScript code as I am still new to this language :)

// Additional code snippet

function setFilledFalse() {
  // Code implementation...
}

function array(length) {
  // Array function definition...
}

Thank you in advance,

Zac

javascript p5.js

Answer 1

Answer №1

My solution involved modifying the checkSurroundings function:

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

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

let pixelValues;
let checkedPixels;
let filledPixels;
let iteration = 0;
let drawFilledArea;

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

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

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

function draw() {
  loadPixels();

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

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

  checkEnclosedArea();

  updatePixels();
}

function checkEnclosedArea() {
  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] && pixelValues[i][j][0] != 255) {
        drawFilledArea = true;
        checkArea(i, j);
        if(drawFilledArea) {
          fillArea();
        } else {
          clearFilledArea();
        }
      }
    }
  }

  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] = pixelValues[i][j][k];
      }
    }
  }
}

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

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

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

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

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

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

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

Answer 2

My solution involved modifying the checkSurroundings function:

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

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

let pixelValues;
let checkedPixels;
let filledPixels;
let iteration = 0;
let drawFilledArea;

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

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

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

function draw() {
  loadPixels();

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

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

  checkEnclosedArea();

  updatePixels();
}

function checkEnclosedArea() {
  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] && pixelValues[i][j][0] != 255) {
        drawFilledArea = true;
        checkArea(i, j);
        if(drawFilledArea) {
          fillArea();
        } else {
          clearFilledArea();
        }
      }
    }
  }

  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] = pixelValues[i][j][k];
      }
    }
  }
}

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

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

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

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

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

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

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

Quirks and nuances when using p5's pixel fill function

Answer №1

Similar questions

Adjusting the size and location of the current browser window using jQuery

The jQuery prop("disabled") function is not operating as expected

Incorporate a division based on the selection made from a jQuery dropdown menu

Update the ngModel value once input validation has been successfully validated

Only retrieve links that don't have the specified class by using regular expressions

Traverse an array containing nested objects using Javascript

When refreshing the page, the authentication token set in the Vuex store using axios in Nuxt.js/Vue.js gets reset

Using Vue.js to sift through and refine data

I am attempting to achieve a smooth transition effect by fading in and out the CSS background color using JQuery and AJAX

Is There a Workaround for XMLHttpRequest Cannot Load When Using jQuery .load() with Relative Path?

Building a multi-page application with ExtJs MVC

Steps for extracting a portion of the current page's URL

Day Change Triggers React [Native] View Update

Creating a Validation Form using either PHP or JavaScript

Encountering problems when trying to open .dialog using JQuery

Import ES6 code by wrapping it in parentheses

Is there a way for me to automatically generate and send a random collection each time a GET request is made on my Node.js

"Error: The chai testing method appears to be improperly defined and is not

Expanding the Element prototype with TypeScript

Is it advisable for postcss plugins to list postcss as a peer dependency?