Page 1 of 1

How to draw a Bézier curve?

Posted: Wed Nov 30, 2022 10:04 am
by Cyao
Hi all!

Im tryting to get a ttf font onto my os, which requires bézier curves. But I don't know how to start to drawing it on the screen, I already read the wikipedia article and googled, but they all just say how to draw one with maths, not how to calculate each pixel.

Can anyone provide a pointer/tell me how?

Thanks!

Re: How to draw a Bézier curve?

Posted: Wed Nov 30, 2022 11:58 am
by iansjack

Re: How to draw a Bézier curve?

Posted: Thu Dec 01, 2022 8:54 am
by Cyao
iansjack wrote:https://www.algosome.com/articles/continuous-bezier-curve-line.html
Thanks!

Re: How to draw a Bézier curve?

Posted: Thu Dec 01, 2022 10:53 am
by nullplan
I'm not sure how much that article helps. It only talks about how to combine two cubic Bezier curves in such a way as to be smooth.

Anyway, Wikipedia alludes to the solution: You bisect the curve and check if the result is flat enough to be approximated by a straight line, or round enough to be approximated by a circle segment. If not you bisect the part you can't draw outright again. Rasterizing a straight line can be done with Bresenham's algorithm, and there is a circle variant of it, so I won't dwell on it. You can Google if you want. The question is: How do you calculate the flatness criterion? I don't know, but when I search for "Bezier curve flatness" online, I find this article: https://www.joshondesign.com/2018/07/11/bezier-curves. And it talks exactly about drawing Bezier curves by piecewise linear approximation. So exactly what you want to do. OK, it is in Javascript and you need it in C, but that hurdle can be overcome, right?

Re: How to draw a Bézier curve?

Posted: Fri Dec 02, 2022 10:00 am
by Cyao
nullplan wrote:I'm not sure how much that article helps. It only talks about how to combine two cubic Bezier curves in such a way as to be smooth.

Anyway, Wikipedia alludes to the solution: You bisect the curve and check if the result is flat enough to be approximated by a straight line, or round enough to be approximated by a circle segment. If not you bisect the part you can't draw outright again. Rasterizing a straight line can be done with Bresenham's algorithm, and there is a circle variant of it, so I won't dwell on it. You can Google if you want. The question is: How do you calculate the flatness criterion? I don't know, but when I search for "Bezier curve flatness" online, I find this article: https://www.joshondesign.com/2018/07/11/bezier-curves. And it talks exactly about drawing Bezier curves by piecewise linear approximation. So exactly what you want to do. OK, it is in Javascript and you need it in C, but that hurdle can be overcome, right?
Ahh yea that is exactly what I was looking for, thanks for the solution!

Re: How to draw a Bézier curve?

Posted: Sat Dec 24, 2022 6:25 pm
by ThatCodingGuy89
Here's a really informative video I watched a while ago on the topic: https://youtu.be/aVwxzDHniEw

Just in case you want some more information.