How do I merge shapes that have a stroke?

p5.js Coding Questions
#1

I need this ear to be flush with the head. I want to merge it with the head like how you can merge shapes in Inkscape or Illustrator. I can’t do this by just making everything one shape using vertices and beginShape() and all that because this is part of a character creator and the user will have the option of picking different heads and different ears, so I don’t want to have a big 2D switch case thing where I have defined each possible combination of head and ears. I want to be able to draw the head, draw the ears, and have them merge somehow.

The solution that comes to mind is drawing the ears and head with double the normal stroke weight, and then draw both again but this time with no stroke. This would look okay, but it feels redundant. There’s gotta be a solution that doesn’t require me drawing the same thing twice.
image

#2

I can’t think of an easier way. Although it might seem redundant other methods would probably require significant maths and be less CPU efficient.

You could draw the outline using noFill() and then draw again with noStroke() so the fill is only done once.

2 Likes
#3

One other way is to have your PShapes backed by a geometry library that provides a union operation. I believe Geomerative offers this.

merging
merging746×740 297 KB

(I’m using my in-progress library for this gif.)

However, the most simple solution is to draw it in 3 layers:

  • Head (with stroke)
  • Ear
  • Head (no stroke)
  • Everything else…
4 Likes
#4

Dang I guess ur right. Tho if I’m doing that, since the p5 stroke is always centered on the line I think, won’t it cut off half of the stroke? So that’s why I proposed when first drawing the head, doing it with double it’s intended stroke weight. I could be mistaken tho

#5

You can delete the unwanted line with a rect that hasn’t an outline…





rect(30+6, 3, 39, 49);  // head

ellipse(30, 30, 19, 19);  // ear 
noStroke(); 
rect(30+6, 30-9+1, 9, 16); // delete bad line
1 Like
#6

So this is the solution I went with, which I mentioned in my first post so I guess it’s more of a realization that there is no other way lol.

  1. draw the head with double the stroke weight
  2. draw the ear with normal stroke weight
  3. draw the head again but with no stroke

I can even make this easier by making a function that draws the head and use a boolean argument to tell it whether or not to draw it with normal, double, or no stroke.
image

Lolll I’ve been asking lots of questions recently, thanks y’all for putting up with my shenanigans haha

1 Like
#7

Your solution is good.

This won’t work by the way



size(600, 600);

// Make the parent shape
PShape groupShape = createShape(GROUP);

// Make two shapes
PShape ear = createShape(ELLIPSE, 0, 95, 50, 50);
ear.setStroke(false); 
PShape head = createShape(RECT, 0, 50, 100, 100);
head.setStroke(false);

// Add the two "child" shapes to the parent group
groupShape.addChild(ear);   // the order is important here!!
groupShape.addChild(head);

// modify alien - won't work  
groupShape.setStroke(true);
groupShape.setStroke(color(110, 1, 1));
groupShape.setFill(color(110, 1, 1));
//alien.stroke(0); 


// Draw the group
translate(width/2, height/2);
shape(groupShape);
1 Like