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

Processing Coding Questions
1

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

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.

2

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

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

also can try about

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

3

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.

4

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

but here a simple background shape with mouseover

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.