# Fill() function for negative space

**URL:** <https://discourse.processing.org/t/fill-function-for-negative-space/2706>\
**Category:** Processing\
**Created:** [August 16, 2018, 10:49pm UTC](https://discourse.processing.org/t/fill-function-for-negative-space/2706 "2018-08-16T22:49:30Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![emilyhroderick](https://avatars.discourse-cdn.com/v4/letter/e/6bbea6/32.png) [@emilyhroderick](https://discourse.processing.org/u/emilyhroderick)\
**Post date:** [August 16, 2018, 10:49pm UTC](https://discourse.processing.org/t/fill-function-for-negative-space/2706/1 "2018-08-16T22:49:30Z")

</div>

Hi there, I’m looking for a simple way to fill the space AROUND a shape rather than the space WITHIN a shape.

Ideally I’m wanting this function so that when I use OpenCV on a webcam feed, processing puts a square around the face and then blocks out the rest of the image with a sold fill. So all you can see is the image inside the shape.

Increasing the stroke does not do this.

Any help greatly received!

Thanks

---

<div class="post-metadata">

**Author:** ![EnhancedLoop7](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/enhancedloop7/32/1040_2.png) [@EnhancedLoop7](https://discourse.processing.org/u/EnhancedLoop7)\
**Post date:** [August 16, 2018, 10:56pm UTC](https://discourse.processing.org/t/fill-function-for-negative-space/2706/2 "2018-08-16T22:56:27Z")

</div>

Well if you’re going to do that with OpenCV, what you could do is instead of having a square go around the face like I think the default OpenCV Facial Recognition has it, just have it make another shape that goes along with that rectangle, but is super big so it covers your screen. I’m sure you could use PShape for that, so it can be an object. Personally, that is what I would do 😁

Hope this helps, and I’d be glad to help out further,

EnhancedLoop7

---

<div class="post-metadata">

**Author:** ![emilyhroderick](https://avatars.discourse-cdn.com/v4/letter/e/6bbea6/32.png) [@emilyhroderick](https://discourse.processing.org/u/emilyhroderick)\
**Post date:** [August 16, 2018, 11:14pm UTC](https://discourse.processing.org/t/fill-function-for-negative-space/2706/3 "2018-08-16T23:14:21Z")

</div>

Thats a good point actually! I’ll start with that and see if its what I’m after! Thanks!

---

<div class="post-metadata">

**Author:** ![EnhancedLoop7](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/enhancedloop7/32/1040_2.png) [@EnhancedLoop7](https://discourse.processing.org/u/EnhancedLoop7)\
**Post date:** [August 16, 2018, 11:15pm UTC](https://discourse.processing.org/t/fill-function-for-negative-space/2706/4 "2018-08-16T23:15:44Z")

</div>

Hopefully it is, and if not I’d be glad to help out further!

EnhancedLoop7

---

<div class="post-metadata">

**Author:** ![tony](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tony/32/949_2.png) [@tony](https://discourse.processing.org/u/tony)\
**Post date:** [August 17, 2018, 4:30am UTC](https://discourse.processing.org/t/fill-function-for-negative-space/2706/5 "2018-08-17T04:30:54Z")

</div>

Maybe check out [beginContour()](https://processing.org/reference/beginContour_.html)?

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [August 17, 2018, 5:19am UTC](https://discourse.processing.org/t/fill-function-for-negative-space/2706/6 "2018-08-17T05:19:03Z")

</div>

Sounds like you’re looking for the `mask()` function:

[https://processing.org/reference/PImage\_mask\_.html](https://processing.org/reference/PImage_mask_.html)

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [August 17, 2018, 11:07am UTC](https://discourse.processing.org/t/fill-function-for-negative-space/2706/7 "2018-08-17T11:07:25Z")

</div>

Probably not exactly what you need, but your question inspired me to create a simple class to draw inverted shapes 🙂 Maybe it can be useful to create what you need.

```auto
Inverted inv;
void setup() {
  size(600, 600, P2D);
  frameRate(3);
  inv = new Inverted(width, height, P2D);
}

void draw() {
  inv.fill(random(255), random(80), random(40));
  inv.ellipse(random(width), random(height), 600, 600);
}

class Inverted {
  PGraphics img, mask;
  Inverted(int w, int h, String mode) {
    img = createGraphics(w, h, mode);
    mask = createGraphics(w, h, mode);
  }
  void fill(float r, float g, float b) {
    img.beginDraw();
    img.background(r, g, b);
    img.endDraw();
  }
  void ellipse(float x, float y, float w, float h) {
    mask.beginDraw();
    mask.background(255);
    mask.fill(0);
    mask.ellipse(x, y, w, h);
    mask.endDraw();
    img.mask(mask);
    image(img, 0, 0);
  }
  // one could implement here other methods like
  // colorMode, rect, translate, rotate, scale...
}

```

 ![2018-08-17-124715_600x600_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/2733d70132c3d86f8078f21780b13f92d183f5b3.png)

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [August 17, 2018, 1:02pm UTC](https://discourse.processing.org/t/fill-function-for-negative-space/2706/8 "2018-08-17T13:02:39Z")

</div>

@hamoid - interesting! I wasn’t sure how fast `mask()` is with P2D, although does look like it’s done on the GPU. Still, led me to another thought for doing this with one image and `blendMode(REPLACE);` and `fill(0,0);` which allows you to cut out transparent bits of the background.

```auto
Inverted inv;
void setup() {
  size(600, 600, P2D);
  frameRate(3);
  inv = new Inverted(width, height, P2D);
}

void draw() {
  inv.fill(random(255), random(80), random(40));
  inv.ellipse(random(width), random(height), 600, 600);
}

class Inverted {
  PGraphics mask;
  Inverted(int w, int h, String mode) {
    mask = createGraphics(w, h, mode);
  }
  void fill(float r, float g, float b) {
    mask.beginDraw();
    mask.background(r, g, b);
    mask.endDraw();
  }
  void ellipse(float x, float y, float w, float h) {
    mask.beginDraw();
    mask.blendMode(REPLACE);
    mask.fill(0,0);
    mask.ellipse(x, y, w, h);
    mask.endDraw();
    image(mask, 0, 0);
  }
  // one could implement here other methods like
  // colorMode, rect, translate, rotate, scale...
}

```

---

<div class="post-metadata">

**Author:** ![hamoid](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/hamoid/32/58_2.png) [@hamoid](https://discourse.processing.org/u/hamoid)\
**Post date:** [August 17, 2018, 2:10pm UTC](https://discourse.processing.org/t/fill-function-for-negative-space/2706/9 "2018-08-17T14:10:32Z")

</div>

Very nice @neilcsmith 🙂 I was wondering how to do it with one pgraphics.

To improve the antialias, the class can be further tweaked like this:

```auto
class Inverted {
  PGraphics mask;
  Inverted(int w, int h, String mode) {
    mask = createGraphics(w, h, mode);
  }
  void fill(float r, float g, float b) {
    mask.beginDraw();
    mask.background(r, g, b);
    mask.blendMode(REPLACE);
    mask.fill(r, g, b, 0);
    mask.noStroke();
    mask.endDraw();
  }
  void ellipse(float x, float y, float w, float h) {
    mask.beginDraw();
    mask.ellipse(x, y, w, h);
    mask.endDraw();
    image(mask, 0, 0);
  }
  // one could implement here other methods like
  // colorMode, rect, translate, rotate, scale...
}

```

One cool thing of this approach is that it allows you to specify a stroke color and weight in the same pass.

 ![2018-08-17-160714_600x600_scrot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/b1b815e0ea2aac782f03ea7e23cc3d5622f18212.png)

Sorry for diverging a bit from the original question 🙂

---

<div class="post-metadata">

**Author:** ![neilcsmith](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/neilcsmith/32/144_2.png) [@neilcsmith](https://discourse.processing.org/u/neilcsmith)\
**Post date:** [August 17, 2018, 3:02pm UTC](https://discourse.processing.org/t/fill-function-for-negative-space/2706/10 "2018-08-17T15:02:36Z")

</div>

> [@hamoid](#):
>
> To improve the antialias, the class can be further tweaked like this:

Ah, good call - work around Processing’s broken alpha blending! 😄 These _should_ be equivalent (and are in PraxisLIVE).