Settings

Theme

Thinking like a Bézier path

ronnqvi.st

38 points by shravan 11 years ago · 6 comments

Reader

gilgoomesh 11 years ago

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.

abmussani 11 years 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).

Vektorweg 11 years ago

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

  • bchjam 11 years 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-ronnqvist 11 years ago

    True, but you can do it using arcs :)

_Adam 11 years ago

Images are cutoff when viewed on mobile!

Keyboard Shortcuts

j
Next item
k
Previous item
o / Enter
Open selected item
?
Show this help
Esc
Close modal / clear selection