Uzumaki (Interactive Spiral Art) by Dachi – Final

User Interaction:

During the IM show, due to the slow performance of the computers, the main features of the project, especially the spiral transition, were not fully captured, which left users confused. Nevertheless, people still had fun, and I tried to explain the issue and guide them through the process.

Sketch: p5.js Web Editor | Uzumaki v3

Inspiration

This project draws inspiration from Junji Ito’s “Uzumaki,” a manga known for its distinctive use of spiral imagery and psychological horror elements. 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 with digital noise to reflect the manga’s original black and white aesthetic, creating an atmosphere that captures the hypnotic quality of Ito’s work. The decision to focus on hand gestures as the primary interaction method was influenced by the manga’s themes of body horror and transformation, where the human form itself becomes part of the spiral pattern. The integration of accelerating warping effects and atmospheric audio further reinforces the manga’s themes of inevitable spiral corruption.

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. The pinching motion itself mimics a spiral form, creating a thematic connection between the gesture and its effect. A custom SpiralBrush class handles the generation and animation of spirals, while also implementing a sophisticated two-phase warping effect that distorts the surrounding space. The initial warping effect adds depth to the interaction, making each spiral feel dynamic and impactful on the canvas. After 200 frames, a second acceleration phase kicks in, causing the spiral’s warping to intensify dramatically – a direct reference to the manga’s portrayal of spirals as entities that grow increasingly powerful and uncontrollable over time.

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. The ambient background music and UI elements, including a fullscreen button and horror-themed instructions modal, work together to create an immersive experience that captures the unsettling atmosphere of the source material. The instructions themselves are presented in a way that suggests the spiral creation process is a form of dark ritual, enhancing the project’s horror elements.

Code I am Proud Of

One of the most interesting pieces of code in this project is the warping effect implementation in the SpiralBrush class:

warpPixels(pg) {
  if (this.swirlAngle > 0) {
    pg.loadPixels();
    let d = pixelDensity();
    let originalPixels = pg.pixels.slice();

    // Calculate warping area
    let minX = max(0, int((this.origin.x - warpRadius) * d));
    let maxX = min(w, int((this.origin.x + warpRadius) * d));
    let minY = max(0, int((this.origin.y - warpRadius) * d));
    let maxY = min(h, int((this.origin.y + warpRadius) * d));

    // Process pixels within radius
    for (let y = minY; y < maxY; y++) {
      for (let x = minX; x < maxX; x++) {
        let distance = dist(x/d, y/d, this.origin.x, this.origin.y);
        if (distance < warpRadius) {
          // Calculate warping effect
          let warpFactor = pow(map(distance, 0, warpRadius, 1, 0), 2);
          let angle = atan2(y/d - this.origin.y, x/d - this.origin.x);
          let newAngle = angle + warpFactor * this.swirlAngle;
          
          // Apply displacement
          let sx = this.origin.x + distance * cos(newAngle);
          let sy = this.origin.y + distance * sin(newAngle);
          // Transfer pixel data
          [...]
        }
      }
    }
    pg.updatePixels();
  }
}

This code creates a mesmerizing warping effect by calculating pixel displacement based on distance from the spiral center and the current swirl angle. The use of polar coordinates allows for smooth circular distortion that enhances the spiral theme. The acceleration component, triggered after 200 frames, gradually increases the warping intensity, creating a sense of growing unease that mirrors the manga’s narrative progression.

Challenges

Several technical challenges were encountered during development:

Performance Optimization: Implementing pixel-level manipulation while maintaining smooth frame rates required careful optimization of the processing area and efficient buffer management. The addition of the acceleration phase complicated this further, as the increased warping intensity required more computational resources.
Gesture Recognition: Achieving reliable pinch detection required fine-tuning the distance threshold and handling edge cases when hand tracking momentarily fails. The system needed to maintain consistent spiral generation while dealing with the inherent variability of webcam-based hand tracking.
Visual Coherence: Balancing the intensity of the warping effect with the spiral growth to maintain visual appeal while avoiding overwhelming distortion proved particularly challenging when implementing the acceleration phase. The transition between normal and accelerated warping needed to feel natural while still creating the desired unsettling effect.

Conclusion

I had a lot of fun doing this project and I think it successfully achieves goal of creating an interactive experience that captures the essence of Uzumaki’s spiral motif. The combination of hand tracking, real-time visual effects, and audio creates an engaging installation that allows users to explore the hypnotic nature of spirals through natural gestures. The monochromatic aesthetic, warping effects, and horror-themed UI elements effectively translate the manga’s visual style and atmosphere into an interactive digital medium. The addition of the acceleration phase adds a deeper layer of narrative connection to the source material, while the fullscreen capability and atmospheric audio create a more immersive experience.

Future Improvements

Looking ahead, there are several avenues for enhancing the project’s impact and functionality. The implementation of WebGL support would enable smoother rendering on larger canvases, allowing for more complex spiral patterns without compromising frame rates. The warping system could be optimized through GPU acceleration, enabling more sophisticated interactions between multiple spirals. A particularly intriguing possibility is the introduction of spiral memory, where new spirals could be influenced by the historical positions and intensities of previous ones, creating a cumulative effect that mirrors the spreading corruption theme in the manga. The addition of procedural audio generation could create dynamic soundscapes that respond to spiral intensity and acceleration, deepening the horror atmosphere. The instruction interface could be expanded into a more narrative experience, perhaps incorporating procedurally generated horror-themed text that changes based on user interactions. More digital distortion effect and ink based spiral texture would further enhance the experience.