Movement along a bezier curve

1 minute read

When looking at the moving objects, I want the heart at the sides to move along their respective arrows until one heart reaches the tip and “wins”. That is, I want to map a value [0, 1] to positions on the path, starting at the base and ending at the tip.

Arrow drawn in Sketch.app. Personal illustration by author. June 2018.

However, this proved more difficult than I thought. I figured I would draw a bezier path in Sketch.app and use the same coordinates in a Python program using the Bezier package, which can extract points along a path with arbitrary subdivisions. Only, it turned out that there was a disconnect between how bezier paths are constructed in GUI programs and how they are constructed programmatically. Perhaps I just didn’t look deep enough into the problem. I also tried guessing coordinates for a long time but getting the loop right was too difficult.

SpriteKit can move sprites along bezier paths but once you start them, they will move with a set speed, i.e. one can’t step forward arbitrarily along the path. Perhaps I can pause when the pupil-to-object correlation is low and unpause when the correlation is high? Then only the problem of creating a nice bezier curve remained.

After trying far too long to recreate the curve by umpteen methods, I found PaintCode, which can give me the Swift code for any bezier path I would draw. Easy!

Bezier path along looped arrow, drawn in [PaintCode](https://www.paintcodeapp.com). Personal illustration by author. August 2018.

Updated: