Boolean operation in polygons

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!

1 Like

Welcome to forum.

At least some of them can be achieved with blend modes https://processing.org/reference/blendMode_.html

1 Like

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:

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

1 Like

Interesting answers, I’ve tried both in Processing. Also in Processing createShape has a GROUP which will do it, but the question says “in P5”, are they available, how?

2 Likes

This is a problem of term ambiguity :slight_smile: “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

GROUP as far as I understand from reading https://processing.org/reference/createShape_.html does not have any polygon operations :frowning:

@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.

1 Like

Cheers @mmatty !

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

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

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

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

1 Like