Poi Patterns

Poi / glowstick flower pattern visualizer to explore how string length affects the flower shape, the relative timing and direction of two sticks moving through the flower shapes, and the number of object rotations per hand rotation to create different numbers of in-spin and anti-spin petals.

Tools used:
  • Three.js
  • React
  • Material UI
  • SCSS
  • Vite

Open

For each stick, a rectangle is extruded along a curve created with a parametric equation:

x = cos(time * handTurns) * armLength + cos(time * poiTurns) * poiLength * (startOut ? 1 : -1);
y = sin(time * handTurns) * armLength + sin(time * poiTurns) * poiLength * (startOut ? 1 : -1);

Where time is the angle in radians between 0 and