Forma header.png

Course: Tangible User Interfaces - Wellesley College

Partners: Kat Shewchuk and Eva Stern-Rodriguez


01 / PROBLEM

How can multiple people simultaneously collaborate on creative ventures with minimal instruction or technical know-how?

 

02 / OUR SOLUTION

For Wellelsey's Tangible User Interfaces course, we created Forma, an interactive table top TUI that aims to foster curiosity and creativity through the creation of collaborative art. Forma detects shapes that have been placed on the MultiTaction table, and tessellates the arrangement into an interesting patter. Forma allows for multiple users to collaborate by picking up shapes and placing them on the screen. Our code manages multiple inputs to generate a pattern on the screen. Each shape has a unique marker on the bottom, that when placed on the Multitaction, pulls up a corresponding image at the point of contact on the screen

 

03 / DESIGN & DIGITAL FABRICATION

Our project has been through various transformations. We began with the idea of transforming physical structures into 3D digital renderings using custom blocks with RFID tracking. Through the design process, we began to rethink our approach to implementation and our end goal. We ended up pivoting and creating Forma, which uses physical blocks to create a digital 2D pattern or mural.

 

These blocks come in various shapes and colors, and include four layers of laser cut acrylic material: the bottom layer is a two tone acrylic sheet with a unique MultiTaction marker code etched into the bottom; then two layers of white acrylic to provide more bulk to the blocks; and finally a colorful acrylic topper that will match the digital representation of the shape on the screen. The codes on the bottom allow the blocks to interact with the the MutliTaction touch table. Each marker is associated with a digital .png file that corresponds with the physical block.

 

 

04 / TECHNICAL IMPLEMENTATION

Forma was implemented on the MultiTaction using the Cornerstone sdk in conjunction with CSS and Javascript. The MultiTaction detects markers on the bottom of our tangible tokens, which call a method to populate the screen with digital representations called ImageWidgets. These are arranged in a grid pattern using an algorithm we wrote. After a number of widgets -- currently set to 15 -- are in the pattern on the screen, the program begins to remove them in order to keep the display uncluttered.

You can find our code on GitHub here.

 

05 / FUTURE OF FORMA

For future iterations of Forma, we would like to:

Implement functionality for increased customization of shapes, including changing shape colors, and sizes, and pattern.

Explore how to make repetitive circular patterns using geometry to form mandalas using the available shapes

Output vector images that people could laser cut or keep as mementos

Explore the scale on which our project can function, possibly creating extensions for multiple tables and increased collaboration.

 

DOCUMENTATION