Thinking like a Bézier path (opens in new tab)

(ronnqvi.st)

38 pointsshravan11y ago6 comments

6 comments

In case you didn't realize the coolest part of this post: mouse over the lines of code that draw the béziers. The diagrams showing béziers drawn by the code update as you mouse over each line.

A few of the bézier diagrams with visible control points are interactive too.

abmussani11y ago

Few weeks ago, I tried to create a roulette wheel for an iOS application. For ball animation, I used CGPath but couldn't make a realistic movement then I changed it to UIBezierPath.

https://github.com/abmussani/RouletteWheel-for-IPhone-Ipod (Sorry for bad code structure).

Vektorweg11y ago

Note: You can't draw rounded corners using Bezier curves. Only an approximation. ;)

bchjam11y ago

While this is true, the author actually uses simple arcs on the path for the rounded corners (most Bezier interfaces are implemented in a path that also supports simple lines and arcs). In fact, there's only 1 Bezier in the path from the article, the wavy line in the very last image. See the addCurveToPoint and addQuadCurveToPoint methods for drawing cubic and quadratic Bezier curves

d-ronnqvist11y ago

True, but you can do it using arcs :)

_Adam11y ago

Images are cutoff when viewed on mobile!

j / k navigate · click thread line to collapse