# How can I change the drawing style of a group of shapes?

**URL:** <https://discourse.processing.org/t/how-can-i-change-the-drawing-style-of-a-group-of-shapes/6330>\
**Category:** Coding Questions\
**Created:** [December 5, 2018, 3:40pm UTC](https://discourse.processing.org/t/how-can-i-change-the-drawing-style-of-a-group-of-shapes/6330 "2018-12-05T15:40:20Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![mono](https://avatars.discourse-cdn.com/v4/letter/m/9d8465/32.png) [@mono](https://discourse.processing.org/u/mono)\
**Post date:** [December 5, 2018, 3:40pm UTC](https://discourse.processing.org/t/how-can-i-change-the-drawing-style-of-a-group-of-shapes/6330/1 "2018-12-05T15:40:20Z")

</div>

Hey guys. I have written this code here to draw a group of 3 shapes on the screen:

```auto
PShape s;

void setup() {
  size (40, 40);

  s = createShape(GROUP);

  ellipseMode(CENTER);
  PShape s1 = createShape(ELLIPSE, 0, 0, 15, 15);
  PShape s2 = createShape(TRIANGLE, -2, -6, -11, -9, -6, 0);
  PShape s3 = createShape(TRIANGLE, -2, 6, -11, 9, -6, 0);

  s.addChild(s1);
  s.addChild(s2);
  s.addChild(s3);
}

void draw() {
  background (255,0,0);

  shape(s, 20, 20);
}

```

I’m wondering how I can apply things like setFill(); and noStroke(); to this group of shapes. I’m also wondering if there is any easy way to draw an outline around the shapes together as a whole.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 6, 2018, 5:19am UTC](https://discourse.processing.org/t/how-can-i-change-the-drawing-style-of-a-group-of-shapes/6330/2 "2018-12-06T05:19:09Z")

</div>

> [@mono](#):
>
> how I can apply things like setFill(); and noStroke(); to this group of shapes

i also not find a s.setNoStroke();  
but see what i play with:

```auto
PShape s1,s2,s3,s;

void setup() {
  size (200, 200,P2D);
  make_shape();
  s.scale(2.00);
}

void draw() {
  background (200, 200, 0);
  //translate(width/2, height/2);
  shape(s, mouseX,mouseY);
  s.setFill(color(0,200,200));
  s.setStroke(color(200,0,200));
  s1.setStroke(color(0,200,200)); // there is no s.setNoStroke(); ??
}

void make_shape() {
  s = createShape(GROUP);

  ellipseMode(CENTER);
  s1 = createShape(ELLIPSE, 0, 0, 15, 15);
  s2 = createShape(TRIANGLE, -2, -6, -11, -9, -6, 0);
  s3 = createShape(TRIANGLE, -2, 6, -11, 9, -6, 0);

  s.addChild(s1);
  s.addChild(s2);
  s.addChild(s3);
}

```

![snap-029](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a28fcb790a58854fb4b09575b9af61190e4099ef.png)

also can try about

> **[getChild() / Reference](https://processing.org/reference/PShape_getChild_.html)**
>
> Extracts a child shape from a parent shape. Specify the name of the shape with the target parameter. The shape is returned as a PShape object, or null is returned if there is an e…

but at first i just make the “childs” global…

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [December 8, 2018, 12:29am UTC](https://discourse.processing.org/t/how-can-i-change-the-drawing-style-of-a-group-of-shapes/6330/3 "2018-12-08T00:29:20Z")

</div>

> [@mono](#):
>
> I’m also wondering if there is any easy way to draw an outline around the shapes together as a whole.

I don’t _think_ so, not in the sense of a vertex-based, stroke solution. I am guessing that the easiest general purpose way would be to render them to a mask layer, then scale or erode the mask to create an outline mask – or, if there is transparency in the shape collection, use edge detection on the mask layer.

Another approach would be geometric – if the shapes all consist of straight edge segments, you could iterate through those segments and build the outline. That would probably be much more efficient and flexible than pushing pixels around. However if they are more complex – some containing curves and arcs etc. – then a geometric solution could be a real pain to implement. One overlapping ellipse and things get extremely difficult.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [December 8, 2018, 2:42am UTC](https://discourse.processing.org/t/how-can-i-change-the-drawing-style-of-a-group-of-shapes/6330/4 "2018-12-08T02:42:21Z")

</div>

there is a way to put the single shapes into a PGraphics  
and only handle that one …  
so not even need the shape group anymore  
[https://processing.org/reference/PGraphics.html](https://processing.org/reference/PGraphics.html)

but here a simple background shape with mouseover

```auto
PShape s1, s2, s3,shapecatch, s;

void setup() {
  size (200, 200, P2D);
  make_shape();
  s.scale(2);
  s1.setFill(color(200,0,0));
  s1.setStroke(color(200,0,0));
}

void draw() {
  background (200, 200, 0);
  shape(s,width/2,height/2);
  // the original circle was diamater 40, but because of scale(2) we need here 80
  if ( overCircle(width/2,height/2,80) ) shapecatch.setFill(color(0,200,0,80));
  else shapecatch.setFill(color(0,200,0,30));
}

void make_shape() {
  s = createShape(GROUP);
  ellipseMode(CENTER);
  shapecatch = createShape(ELLIPSE, 0, 0, 40, 40);
  shapecatch.setFill(color(0,200,0,50));
  shapecatch.setStroke(color(200,200,0));
  s1 = createShape(ELLIPSE, 0, 0, 15, 15);
  s2 = createShape(TRIANGLE, -2, -6, -11, -9, -6, 0);
  s3 = createShape(TRIANGLE, -2, 6, -11, 9, -6, 0);
  s.addChild(shapecatch);
  s.addChild(s1);
  s.addChild(s2);
  s.addChild(s3);
}

boolean overCircle(int x, int y, int diameter) {
  float disX = x - mouseX;
  float disY = y - mouseY;
  if (sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
    return true;
  } else {
    return false;
  }
}  

```

but any transformation

- translate
- rotate
- shear
- scale ( used here! )

makes a mouseover very difficult.