1 / 15

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

To create the fading trail, for each stick, a rectangle is extruded along a curve with a parametric equation:

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

Where angle is in radians between 0 and

The extruded geometry’s UVs are programmatically placed in a straight, horizontal row. The UVs slide along the X axis with time in the vertex shader. The UVs are then passed to the fragment shader where they drive the alpha with a smoothstep repeating on the X axis:

float alpha = smoothstep(0.75, 1.0, mod(dir * vUv.x, 1.0));