How do I crop these bezier curves?

Zeke

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!

koogs

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

mbraendle

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

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

PhiLho

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.

PhiLho

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/

mbraendle

Thank you, PhiLho, interesting JS library!