Spirograph Generator

Spirograph Generator

https://spiralgraph.vercel.app
R3FZustandReact

Created as an exploration of Three JS/R3F and trigonometry, the spirograph acts in a similar way to the pen and paper based Spigrograph toy.

The project presented many optimisation challenges such as:

  • Limiting re-rendering on certain parts of the UI with the help of Zustand
  • Reducing unnecessary calculations by finding the point where a pattern repeats based on circle speeds.
  • Removing recreation of ThreeJS classes as the point spline is appended to.
  • Switching from a time delta based animation to a fixed delta to ensure the resulting pattern is the same, regardless of framerate.

The calculation for the end effector is similar to that of forward kinematics but the change in angle of previous circles does not effect the current circle.

Lets work together!

Whether you need a consultant, part time/contract work or simply want to chat, get in touch with me here or via the social links below.