Hexagons

Interactive Visual Projection

⭠ Go Back

Play Video

Hexagons is a projection of orderly, colorful hexagons that converts a blank wall into an exciting, interactive experience. A camera detects people movement in front of the projection, applying force to the hexagons. This creates a connection between the user and the wall as they can directly see their influence on the system. If no activity/movement occurs after a while, the hexagons randomly manipulate themselves to attract viewers and create something beautiful, even when no one is interacting with it. The project was shown to various audiences and also showcased at Processing Community Day during the v1.0 release of P5.js.

You can view the project's code and development on GitHub: https://github.com/Leefeet/Hexagons

Design

Encouraging interaction through visual feedback

Concept

I set out to create an interactive project utilizing a simple RGB camera. My initial prototype utilized face detection as a means to interact with games, then I moved towards a more direct experience that could be freely used with little or no instruction. What started out as a game where the user moves a single block with the movement of their face turned into an innovative experience where the user “pushes” a wall of blocks with the movement of their entire body. I used hexagons rather than squares to increase architectural complexity.

Programming

I programmed the entire project from scratch using Java and the Processing IDE for visual output. Java classes were created to track individual hexagon velocity, color, rotation, and shape. An optical flow algorithm was used to detect movement from the camera. Variations of sine and cosine math manipulated the hexagons when no activity was present. You can view the code on GitHub by visiting: https://github.com/Leefeet/Hexagons

Prototype Iteration

The project continually improved through numerous iterations. When the project was "complete," I then looked at "how can I improve it?" Smaller iterations involved improving performance or resolution. Larger iterations included changing hexagon color and shape based on velocity. Version control allowed referencing older project versions in case of a coding bug or misunderstood code.