Contours with Bezier Vertex

Processing Coding Questions
1

Hello

I was hoping somebody may be able to help me figure out what I’ve done wrong with my code. I’m just trying to create a square with a circle cut out and it’s not seeming to do what I want.

This is my code - any help would be greatly appreciated.

Thanks

Rebecca

void setup() {
  size(300,300);
  background(255);

    stroke(255,0,0);
    fill(0);
    
    beginShape();
    vertex(0,0);
    vertex(300,0);
    vertex(300,300);
    vertex(0,300);
    beginContour();
    vertex(150, 60);
    bezierVertex(200, 60,240,100,240,150);
    bezierVertex(240,200,200,240,150,240);
    bezierVertex(100,240,60,200,60,150);
    bezierVertex(60,100,100,60,150,60);
    endContour();
    endShape();
}
1 Like
2

Hi @rebeccajkaye,

To make the circle a cut out, you must wind the string in the opposite direction of the square. In Processing, where the positive y axis points downward, the outer shape is usually wound clockwise; the cutout is counter-clockwise.

Imagine that, instead of working Processing, you are working with a wooden board that has a grid of pins stuck in it. Each pin is an (x, y) pair in the Cartesian coordinate system. You have one string of thread to create a square, and one string of thread to create a circle. To draw a square, you wrap the string around one pin at a time.

Like the square, you wrap the circle around four anchor points to make four straight lines. But then, for each of the four line segments you create, you then tug on the string at two points (the first and second control point).

For Processing this tugging has to be represented with points on the grid. But in this peg board analogy, the control points are also directions with a force that are applied relative to the anchor points you’ve already made. The more force you apply to the string the more extreme its bend away from a straight line.

When you change the winding order of the four anchor points of the circle, you also have change the directions of force. This means that after you change the order in which you call bezierVertex, you may see the cut out, but it probably won’t look like a circle: you’ll also have to swap some of the numbers around within that function call as well.

1 Like
3

Are you aware that one must be clockwise the other anti clockwise?

1 Like
4

Thank you - that’s really helpful - I didn’t know that.

I’ll change my code. Thanks again.

Becky

5

Thank you - I didn’t realise that one was clockwise and the other anti - that’s really helpful. Thank you.

1 Like