# FloodFill Demo Problem in p5.js Web Editor

**URL:** <https://discourse.processing.org/t/floodfill-demo-problem-in-p5-js-web-editor/42749>\
**Category:** Coding Questions\
**Created:** [September 12, 2023, 5:28am UTC](https://discourse.processing.org/t/floodfill-demo-problem-in-p5-js-web-editor/42749 "2023-09-12T05:28:08Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [September 12, 2023, 5:28am UTC](https://discourse.processing.org/t/floodfill-demo-problem-in-p5-js-web-editor/42749/1 "2023-09-12T05:28:08Z")

</div>

@codeguppy I have been unable to run the CodeGuppy demo on flood fill for reasons I do not understand. It worked just fine in the editor used in the video, but fails to run as expected in a p5.js web editor. The following source code was taken from the middle of the video using imageData from the canvas context and right before animation was added. A similar question was posted on StackOverFlow:  
[https://stackoverflow.com/questions/76645668/flood-fill-algorithm-only-coloring-outside-of-the-area-trying-to-be-filled](https://stackoverflow.com/questions/76645668/flood-fill-algorithm-only-coloring-outside-of-the-area-trying-to-be-filled)

**Source code:**

```auto
let imageData;

function setup() {
  createCanvas(800, 800);
}

function draw() {
  if (mouseIsPressed) {
    line(floor(pmouseX), floor(pmouseY), floor(mouseX), floor(mouseY));
  }
}

function keyPressed() {
  imageData = drawingContext.getImageData(0, 0, 800, 800);
  flood(floor(mouseX), floor(mouseY));
  drawingContext.putImageData(imageData, 0, 0);
}

function flood(x, y) {
  let fillStack = [];
  fillStack.push([x, y]);
  while (fillStack.length > 0) {
    let [x, y] = fillStack.pop();
    if (!valid(x, y)) {
      continue;
    }
    if (isPixel(x, y)) {
      continue;
    }
    setPixel(x, y);

    fillStack.push([x + 1, y]);
    fillStack.push([x - 1, y]);
    fillStack.push([x, y - 1]);
    fillStack.push([x, y + 1]);
  }
}

// Does not work in p5.js web editor
function setPixel(x, y) {
  let pixels = imageData.data;
  let i = (y * width + x) * 4;
  pixels[i] = 255; // red
  pixels[i + 1] = 0; // green
  pixels[i + 2] = 0; // blue
  pixels[i + 3] = 255; // alpha
}

// Does not work in p5.js web editor
function isPixel(x, y) {
  let pixels = imageData.data;
  let i = (y * width + x) * 4;
  return pixels[i + 3] > 0;
}

function valid(x, y) {
  return x >= 0 && x <= width - 1 && y >= 0 && y <= height - 1;
}

```

**Unexpected output not seen in the video:**

 ![flood](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/c/6/c69b4e253031645840b7c1d47084f47f2fd75d4b.png)

As you can see the background is red and not the drawing. There is a chance that I have copied the source code incorrectly, but it is similar to what was posted on StackOverflow. The video is an excellent video which shows why \_not to use recursive functions and demonstrates alternate techniques: [https://www.youtube.com/watch?v=a7qCVxq-dWE](https://www.youtube.com/watch?v=a7qCVxq-dWE)

I’m at a loss to explain why it worked so well in the video but I am unable to get the same result in p5.js web editor. I’m hoping that it is just a typo or some minor problem which can be fixed. Thanks for your time and outstanding work.

**Addendum:**  
I had to change the name of the ‘fill’ function to ‘flood’ because the editor complained that ‘fill’ was being used for something else.

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [September 12, 2023, 6:20am UTC](https://discourse.processing.org/t/floodfill-demo-problem-in-p5-js-web-editor/42749/2 "2023-09-12T06:20:46Z")

</div>

Hi @svan,

the shown algorithm not consider pixel density. for simplicity just use `pixelDensity(1);` in `setup`.

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![svan](https://avatars.discourse-cdn.com/v4/letter/s/82dd89/32.png) [@svan](https://discourse.processing.org/u/svan)\
**Post date:** [September 12, 2023, 6:25am UTC](https://discourse.processing.org/t/floodfill-demo-problem-in-p5-js-web-editor/42749/3 "2023-09-12T06:25:41Z")

</div>

Simple fix; thank you.