How to draw a Bézier curve?

Question about which tools to use, bugs, the best way to implement a function, etc should go here. Don't forget to see if your question is answered in the wiki first! When in doubt post here.
Post Reply
Cyao
Member
Member
Posts: 78
Joined: Tue Jun 07, 2022 11:23 am
Libera.chat IRC: Cyao
Location: France
Contact:

How to draw a Bézier curve?

Post 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!
User avatar
iansjack
Member
Member
Posts: 4703
Joined: Sat Mar 31, 2012 3:07 am
Location: Chichester, UK

Re: How to draw a Bézier curve?

Post by iansjack »

Cyao
Member
Member
Posts: 78
Joined: Tue Jun 07, 2022 11:23 am
Libera.chat IRC: Cyao
Location: France
Contact:

Re: How to draw a Bézier curve?

Post by Cyao »

iansjack wrote:https://www.algosome.com/articles/continuous-bezier-curve-line.html
Thanks!
nullplan
Member
Member
Posts: 1790
Joined: Wed Aug 30, 2017 8:24 am

Re: How to draw a Bézier curve?

Post 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?
Carpe diem!
Cyao
Member
Member
Posts: 78
Joined: Tue Jun 07, 2022 11:23 am
Libera.chat IRC: Cyao
Location: France
Contact:

Re: How to draw a Bézier curve?

Post 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!
ThatCodingGuy89
Posts: 18
Joined: Sat Apr 30, 2022 5:57 am

Re: How to draw a Bézier curve?

Post 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.
Post Reply