Liyuan Guo


Interactive Bubble Wand

Simulate bubble wand with a bunch of bubbles and marching feature based on JavaScript

 Time: 2024
 Tool: P5. js







Key Feature


Click the mouse to create new bubble into the canvas, with a sound effect, at the same time delete an old bubble.
Mouse is moved with bubbleWand, at the same time, create a bunch of small bubble and disappear slowly. 

Research  and  Preparation

After exploring several visualization libraries, I selected p5.marchingSquares for its ability to create fluid, organic shapes. Understanding this algorithm required significant research:

  • Studied Jamie Wong's blog on "Metaballs and Marching Squares" to understand the mathematical concepts
  • Modified outdated library code to work in modern environments
  • Learned techniques for calculating Euclidean distance to create bubble interaction effects

Key technical challenges included updating reference paths in HTML files, configuring thresholds correctly, and managing dynamic arrays for bubble creation and removal.

Design Process


Research

01  /Initial Concept & Sketching
02 /Prototyping
03 /User Testing


Initial Concept & Sketching

  • Started with three potential directions before selecting the bubble simulation
  • Created initial sketches for user interaction and visual elements


Prototyping

  • First prototype: Basic implementation with moving bubbles
  • Second prototype: Added bubble wand,interactive functions, and refined collision detection
  • Final version: Optimized performance,added sound effects, and improved visual design 

User Testing

  • Conducted tests with three users of different backgrounds
  • Gathered feedback on interaction, visual appeal, and usability
  • Implemented improvements based on user suggestions, such as adjusting canvas size and bubble limits.


    Future Plans

    Based on development experience and user feedback, future enhancements could include:
    ‍
    • More vibrant color scheme with customization options
    • Additional visual effects during bubble interactions
    • Game-like elements (objectives, scoring,levels)
    • Performance optimization for handling more bubbles simultaneously
    • Alternative applications like terrain visualization or fluid simulation 
    ‍
    This project demonstrates my skills in creative coding, interactive design, and iterative development based on user feedback.