# Boolean operation in polygons

**URL:** <https://discourse.processing.org/t/boolean-operation-in-polygons/23439>\
**Category:** Coding Questions\
**Created:** [August 23, 2020, 9:04am UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439 "2020-08-23T09:04:34Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![mmatty](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mmatty/32/10399_2.png) [@mmatty](https://discourse.processing.org/u/mmatty)\
**Post date:** [August 23, 2020, 9:04am UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/1 "2020-08-23T09:04:34Z")

</div>

Hi, wondering if anyone came across a solution to merge/union/intersect polygons?  
Not just drawing them with the same fill color, but actually creating a new shape which is a fusion of other arbitrary shapes.  
I can do it in Illustrator or Sketch, but how would I go about doing it dynamically in p5?

Thanks!

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/da7b248682729bac43c83e490af2ef15b2ed8a71.png)

---

<div class="post-metadata">

**Author:** ![SomeOne](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/someone/32/8639_2.png) [@SomeOne](https://discourse.processing.org/u/SomeOne)\
**Post date:** [August 23, 2020, 3:55pm UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/2 "2020-08-23T15:55:29Z")

</div>

Welcome to forum.

At least some of them can be achieved with blend modes [https://processing.org/reference/blendMode\_.html](https://processing.org/reference/blendMode_.html)

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [August 23, 2020, 10:36pm UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/3 "2020-08-23T22:36:01Z")

</div>

This is a great question! I miss this on core Processing for PShapes very much…

In Processing Java/Python modes you can have it using a library like Geomerative (installing it from the Add Library… panel in the IDE).  
But it can be quite some trouble (drawing with its primitives, or importing SVG).

UPDATE: This was originally posted in the Processing category, now it was moved to p5.js.

From the libraries example:

```auto
import geomerative.*;

RShape shp1;
RShape shp2;
RShape shp3;
RShape cursorShape;

void setup()
{
  size(400, 400);
  smooth();

  RG.init(this);

  shp1 = RShape.createRing(0, 0, 120, 50);
  shp2 = RShape.createStar(0, 0, 100.0, 80.0, 20);
}

void draw()
{
  background(255);    
  translate(width/2,height/2);

  cursorShape = new RShape(shp2);
  cursorShape.translate(mouseX - width/2, mouseY - height/2);
  
  // Only intersection() does not work for shapes with more than one path
  shp3 = RG.diff( shp1, cursorShape );
  
  strokeWeight( 3 );

  if(mousePressed){
    fill( 220 , 0 , 0 , 30 );
    stroke( 120 , 0 , 0 );
    RG.shape(cursorShape);

    fill( 0 , 220 , 0 , 30 );
    stroke( 0 , 120 , 0 );
    RG.shape(shp1);
  }
  else{
    fill( 220 );
    stroke( 120 );
    RG.shape(shp3);
  }
}

```

![geomerative](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/219a2bd4dcd42229702f86586fa2f7f339941b41.gif)

---

<div class="post-metadata">

**Author:** ![RichardDL](https://avatars.discourse-cdn.com/v4/letter/r/f475e1/32.png) [@RichardDL](https://discourse.processing.org/u/RichardDL)\
**Post date:** [August 24, 2020, 7:58am UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/4 "2020-08-24T07:58:52Z")

</div>

Interesting answers, I’ve tried both in Processing. Also in Processing [createShape](https://processing.org/reference/createShape_.html) has a GROUP which will do it, but the question says “in P5”, are they available, how?

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [August 24, 2020, 1:04pm UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/5 "2020-08-24T13:04:59Z")

</div>

This is a problem of term ambiguity 🙂 “P5” used to mean Processing.  
Do you mean P5js?

The closest I could find was this: [http://haptic-data.com/toxiclibsjs/examples/polygon-clipping-p5](http://haptic-data.com/toxiclibsjs/examples/polygon-clipping-p5)

GROUP as far as I understand from reading [https://processing.org/reference/createShape\_.html](https://processing.org/reference/createShape_.html) does not have any polygon operations ☹

---

<div class="post-metadata">

**Author:** ![mmatty](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mmatty/32/10399_2.png) [@mmatty](https://discourse.processing.org/u/mmatty)\
**Post date:** [August 24, 2020, 1:06pm UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/6 "2020-08-24T13:06:59Z")

</div>

@SomeOne: Thanks. Blendmodes are done on the pixel level. I’m looking to build a new shape (eg that I can apply a stroke without the inner parts of the original shapes)

@villares thanks, but I’m looking for a P5.js solution if possible (I’m perhaps in the wrong forum for this?). The toxiclib solution can only do clipping, but I’m actually more interested in a union.

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [August 24, 2020, 1:18pm UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/7 "2020-08-24T13:18:50Z")

</div>

Cheers @mmatty !

We can ask @jeremydouglass to move this to the P5.js category so it will have more views by P5.js savants 😃

Maybe someone can adapt this for use with P5: [https://github.com/velipso/polybooljs](https://github.com/velipso/polybooljs)

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [August 24, 2020, 3:09pm UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/8 "2020-08-24T15:09:19Z")

</div>

Maybe someone would like to port from Java or from Python this:

> **[villares/2d-poly-operations](https://github.com/villares/2d-poly-operations)**
>
> Hacking Helder Correia's, clipping of Arbitrary Polygons and other operations, based on Günther Greiner and Kai Hormann method. - villares/2d-poly-operations

UPDATE: Let’s say I was too optimistic. The code I have chosen to fork doesn’t quite work ☹ I have to do more research.

---

<div class="post-metadata">

**Author:** ![gvd](https://avatars.discourse-cdn.com/v4/letter/g/9fc29f/32.png) [@gvd](https://discourse.processing.org/u/gvd)\
**Post date:** [January 13, 2021, 11:43am UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/9 "2021-01-13T11:43:42Z")

</div>

I’m also interested in being able to intersect polygons using p5js.

My best try was using mask().

[https://editor.p5js.org/gvd/sketches/mEl8CBsM3](https://editor.p5js.org/gvd/sketches/mEl8CBsM3)

---

<div class="post-metadata">

**Author:** ![paulgoux](https://avatars.discourse-cdn.com/v4/letter/p/b9bd4f/32.png) [@paulgoux](https://discourse.processing.org/u/paulgoux)\
**Post date:** [January 13, 2021, 7:17pm UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/10 "2021-01-13T19:17:54Z")

</div>

does this have to be shader/openGl based or are other approaches acceptable too?

---

<div class="post-metadata">

**Author:** ![ErraticGenerator](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/erraticgenerator/32/11304_2.png) [@ErraticGenerator](https://discourse.processing.org/u/ErraticGenerator)\
**Post date:** [January 14, 2021, 12:38am UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/11 "2021-01-14T00:38:01Z")

</div>

I was able to use `g.js` to do boolean operations on vector shapes.

> **[compound — g.js](https://g.js.org/ref/compound.html)**
>
> JavaScript library for graphical objects.

Not sure about the implication of mixing these two libraries in the long term or in more complex situations. The documentation of `g.js` doesn’t seem to mention creating custom `Path` objects, but it looks like a typical Canvas/SVG way of drawing paths.

Another library that I know has a strong Vector capability is paper.js

[http://paperjs.org/examples/path-intersections/](http://paperjs.org/examples/path-intersections/)

include the script in `index.html`

```auto
<script src="https://cdn.rawgit.com/nodebox/g.js/master/dist/g.min.js"></script>

```

`sketch.js` below.

```js
// import g.js in index.html

function setup() {
  createCanvas(400, 400);
  background(220)

  let pathA = new g.Path()
  pathA.moveTo(20, 20)
  pathA.lineTo(80, 20)
  pathA.lineTo(100, 80)
  pathA.lineTo(60, 80)
  pathA.lineTo(40, 120)
  pathA.closePath()
  pathA.fill = 'yellow'
  pathA.draw(drawingContext)

  let pathB = new g.Path()
  pathB.moveTo(40, 40)
  pathB.lineTo(100, 40)
  pathB.lineTo(140, 60)
  pathB.lineTo(10, 60)
  pathB.closePath()
  pathB.fill = 'orange'
  pathB.draw(drawingContext)

  push()
  translate(150, 0)
  let pathC = g.compound(pathA, pathB, 'union')
  pathC.fill = 'white'
  pathC.stroke = 'black'
  pathC.draw(drawingContext)
  pop()

  push()
  translate(0, 150)
  let pathD = g.compound(pathA, pathB, 'difference')
  pathD.fill = 'white'
  pathD.stroke = 'black'
  pathD.draw(drawingContext)
  pop()

  push()
  translate(150, 150)
  let pathE = g.compound(pathA, pathB, 'intersection')
  pathE.fill = 'white'
  pathE.stroke = 'black'
  pathE.draw(drawingContext)
  pop()
}

```

Here is the online version of the sketch above:

> **[vector boolean operation by erraticgenerator -p5.js Web Editor](https://editor.p5js.org/erraticgenerator/sketches/NqT3Vatdm)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

---

<div class="post-metadata">

**Author:** ![villares](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/villares/32/3166_2.png) [@villares](https://discourse.processing.org/u/villares)\
**Post date:** [January 25, 2021, 5:52pm UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/12 "2021-01-25T17:52:56Z")

</div>

Woderful!!! Thank you @ErraticGenerator !

---

<div class="post-metadata">

**Author:** ![louharms](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/louharms/32/14297_2.png) [@louharms](https://discourse.processing.org/u/louharms)\
**Post date:** [October 12, 2021, 11:40pm UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/13 "2021-10-12T23:40:35Z")

</div>

Could you use contour for this? I have not tried it but it might work.

[https://p5js.org/reference/#/p5/beginContour](https://p5js.org/reference/#/p5/beginContour)

---

<div class="post-metadata">

**Author:** ![kelin](https://avatars.discourse-cdn.com/v4/letter/k/13edae/32.png) [@kelin](https://discourse.processing.org/u/kelin)\
**Post date:** [February 21, 2022, 9:33am UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/14 "2022-02-21T09:33:56Z")

</div>

Hi there! Thanks, @ErraticGenerator, this is the solution I was looking for.

Many people here propose: “Why don’t use blend mode, masks etc.?” As @mmatty said, this is pixel solutions, but often you need vector graphics, for laser cutting, in my case.

I’m totally surprised that nor Java processing neither p5js do not have built-in support for boolean operations. It’s a classic feature that can be found in any vector graphical editor.

UPD: this solution also works with p5.js-svg, great.

---

<div class="post-metadata">

**Author:** ![Nail](https://avatars.discourse-cdn.com/v4/letter/n/8797f3/32.png) [@Nail](https://discourse.processing.org/u/Nail)\
**Post date:** [October 6, 2024, 5:43pm UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/15 "2024-10-06T17:43:27Z")

</div>

You can try my js/wasm library [iOverlay](https://github.com/iShape-Rust/iShape-js)  
I must be super fast and stable because it was a main goal in it implementation.

I also wrote a nice [article](https://dev.to/nail_sharipov_5d810d8cf71/2d-polygon-boolean-operations-4df7) about boolean operations that can be interesting for you.

---

<div class="post-metadata">

**Author:** ![mmatty](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mmatty/32/10399_2.png) [@mmatty](https://discourse.processing.org/u/mmatty)\
**Post date:** [October 6, 2024, 7:05pm UTC](https://discourse.processing.org/t/boolean-operation-in-polygons/23439/16 "2024-10-06T19:05:26Z")

</div>

wow thanks! Looks like impressive work.  
3 years later but never tool later I guess