Pomax / BezierInfo-2

The development repo for the Primer on Bézier curves, https://pomax.github.io/bezierinfo
https://pomax.github.io/bezierinfo
Other
2.29k stars 286 forks source link

Choosing `e1` and `e2` #326

Open luc4leone opened 2 years ago

luc4leone commented 2 years ago

Section 31

There are again all kinds of approaches we can take, and a simple-but-effective one is to set the length of that segment to "one third the length of the baseline"

  1. What's the baseline?
  2. Why is it a good approach?

This forces e1 and e2 to always be the "linear curve" distance apart, which means if we place our three points on a line, it will actually look like a line.

Totally lost here :) @Pomax can you please elaborate more or in a different way?

Pomax commented 2 years ago

The base line is the line between start and end.

As for (2) and the followup question: draw it out to understand it. Take a cubic curve, place all its control points on a line, equally spaced, so for instance start=(0,0), c1=(1,0), c2=(2,0), end=(3,0). This is still a Bezier curve, but it draws a line. Now, compute and draw points for t=0, t=1/3, t=2/3, and t=1 on that curve: what's special about their where they ended up?

(or use the sketch in https://pomax.github.io/bezierinfo/#splitting with the points four grid spaces apart each, if you don't want to draw it by hand, of course)

luc4leone commented 2 years ago

what's special about their where they ended up?

I am not sure I get it. What I see is that they stay on the line and that they are always 4 grid space apart. Is that what I should have come to? Still don't understand why setting e2-e1 == "one third the length of the baseline" is a good approach. Still need your help 😉

t = 0

image

t = 1/3

image

t == 2/3

image

t = 1

image

Pomax commented 2 years ago

Good start, now, do the same thing but move the control points up one grid spot, so you can see the construction skeleton, and set t to 0.5. Now what do you notice about where e1 and e2 are?

luc4leone commented 2 years ago

image

Now what do you notice about where e1 and e2 are?

That they are on the same x of the control points? And that they are still 1/3 of the baseline away, comparing to when all the control points were in the same line.

Pomax commented 2 years ago

right, so now we know why "one third of the baseline" is at least a good approach: it matches how cubic curves already work, and we see that in the "linear" curve, where e1 is the same coordinate as C1, and e2 is also the same coordinate as C2.

luc4leone commented 2 years ago

more clear now @Pomax thanks, but not totally. Maybe by compare & contrast I'll get it. Can you please give me an example of another reasonable approach to choose the length of the segment e2-e1; instead of "1/3 of the baseline" what would be another good one?

Pomax commented 2 years ago

I can't because it depends entirely on your own aesthetic choices and the needs of your users, and what you consider "a good looking curve". You work backwards: you have three points, what curve would you draw through that? Cool, now what cubic curve parameters go with that?

The 1/3rd length is merely the simplest, basic-curve-property-associated approach that yields reasonable curves, but maybe you want e1/e2 to change depending on the distance and angle of B with respect to start/end, there are as many ways to come up with e1/e2 as there are curves to fit through three points, so it really is a matter of "this is the part that is up to you".

luc4leone commented 2 years ago

ok, got it. I'll so some experiments, thanks!