Spirograph Generator
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.