4 / 12

Poi Patterns

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

Tools used

  • Three.js
  • React
  • Material UI
  • SCSS
  • Vite

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

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

Where angle is in radians between 0 and 2π

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));