Sketch: p5.js Web Editor | Uzumaki
Inspiration
This project draws inspiration from Junji Ito’s “Uzumaki,” a manga known for its distinctive use of spiral imagery. This interactive artwork translates the manga’s distinct visual elements into a digital medium, allowing users to create their own spiral patterns through hand gestures. The project maintains a monochromatic color scheme to reflect the manga’s original black and white aesthetic, creating an atmosphere that captures the hypnotic quality of Ito’s work.
Methodology
Using ml5.js’s handPose model, the system tracks hand movements through a webcam, focusing on the pinch gesture between thumb and index finger to control spiral creation. A custom SpiralBrush class handles the generation and animation of spirals, while also implementing a warping effect that distorts the surrounding space. The warping effect adds depth to the interaction, making each spiral feel more dynamic and impactful on the canvas.
The technical implementation uses p5.js for graphics rendering and includes a pixel manipulation system for the warping effects. The graphics are processed using a double-buffer system to ensure smooth animation, with real-time grayscale filtering applied to maintain the monochromatic theme. When users perform a pinch gesture, the system generates a spiral that grows and warps according to their hand position.
Future Improvements
Several practical improvements could enhance the project’s functionality. Performance optimization through WebGL support would allow for smoother rendering on larger canvases, enabling more complex spiral patterns without compromising the frame rate. The current pixel-based warping system could be optimized to handle multiple spirals more efficiently, reducing computational overhead during intensive use.
Adding two-handed interaction would enable users to create multiple spirals simultaneously, opening up new possibilities for complex pattern creation. This could be extended to include interaction between spirals, where proximity could affect their behavior and warping patterns. The visual experience could be enhanced with manga-style ink effects and varying line weights based on gesture speed, adding more expressiveness to the spiral creation process.