Hexagons

Interactive Visual Projection
⭠ Go Back
Hexagons Showcase
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

light-bulb-blue.png

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.

code-blue.png

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-blue.png

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.

Viewer Responses

speaking-blue.png

"A playful experience that's visually beautiful and also curious."

"This totally caught my attention when I walked by. Having the hexagons move with you is very cool."

"The idle animations look awesome! I really like how you're pushing yourself with this project."

Project Applications

information-blue.png

Multi-versatile and suitable for various applications. Examples:

— Standalone interactive entertainment experience

— Integrate into an art exhibit

— Install in an airport or shopping mall to draw attention to a product or brand

— Install in a theme park to entertain guests while they wait for activities

Design Iterations