Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

How do I crop these bezier curves?

edited November 2014

Hey, so I have four bezier curves and I want to crop some parts of them. See this screenshot for explanation. The highlighted parts of the curves should not be there. Is there anything that could make this easier? Here's my code:

color bg = #010D30;
color lines = #AA50BD;

void setup() {
frameRate(60);

for (int i = 0; i < height; i = i + 50) {
stroke(255);
line(0, i, width/2, 0);
}

size(700, 700);
smooth();

// Basic settings
background(bg);
strokeWeight(2);
noFill();
stroke(lines);

// Left Bottom to Right Top: Down
beginShape();
vertex(0, width);
bezierVertex(0, width, 0, width, 0, width);
bezierVertex(0, width, width, width, width, 0);
endShape();

// Left Bottom to Right Top: Up
beginShape();
vertex(0, width);
bezierVertex(0, width, 0, width, 0, width);
bezierVertex(0, width, 0, 0, width, 0);
endShape();

// Left Top to Right Bottom: Up
beginShape();
vertex(0, 0);
bezierVertex(0, 0, 0, 0, 0, 0);
bezierVertex(0, 0, width, 0, width, width);
endShape();

// Left Top to Right Bottom: Down
beginShape();
vertex(0, 0);
bezierVertex(0, 0, 0, 0, 0, 0);
bezierVertex(0, 0, 0, width, width, width);
endShape();
}


Cheers!

Tagged:

• it's very difficult to crop bezier curves as all 4 control points affect ALL of the line. so you can't shorten the line by moving the end point without screwing up the shape of the rest of the line.

as those lines look quarter-circular, maybe try arc() instead, but that still leave you having to calculate the intersection points and the angles, which looks non-trivial to me

https://processing.org/reference/arc_.html

• See Pomax's primer on Bézier curves, especially paragraphs 18 and 19:

http://pomax.github.io/bezierinfo/

• A pragmatic, simpler approach is to draw each curve on a separate PGraphics, which will automatically cut them at their bounds. Then you can assemble these curves on the main sketch.

• edited November 2014

BTW, mbraendle, I appreciate the page you link to. Not only Pomax seems to deliver lot of information, he uses Processing.js to demonstrate the concepts, and LaTeX (MathML?)[1] to show the formulae (even IE11 support both!).

[1] Both: http://www.mathjax.org/

• Thank you, PhiLho, interesting JS library!