Escapism In Echo

A multiscreen Installation Project

This interactive installation uses P5.js and contemporary smartphones to create a shared sensory experience centered on sound and kaleidoscopic visuals. The project invites participants to explore emotional release through primal acts like screaming, merging personal expression with a communal artistic exploration by reimagining the ubiquitous smartphone as an interactive medium.

Group members: Thea Lu, Wenjia Quan, and Peter Oke

Tools used:

P5.js: Used for creating interactive, browser-based visuals.
Cardboard: The primary material for the physical structure.
Reflective Paper & LED Lights: To create depth and enhance visual intrigue.
Smartphones: Each phone’s touchscreen and speakers provided the platform for the kaleidoscope animations.
Additional Augmentation: Magnifying lenses to enhance visual effects and viewing holes for interaction.

Time frame: 3 weeks

Problem Statement

How might we transform smartphones—personal, isolating devices—into tools for playful, communal expression, encouraging emotional release and connecting participants through interactive art?

Design Challenge

To design a multi-device installation using smartphones that:

Leverages sound input to create dynamic visual outputs.
Integrates a physically fabricated element for immersive interaction.
Encourages emotional catharsis and communal engagement without digital networking between devices.

Ideation

The initial inspiration came from Norwegian artist Edvard Munch's painting, The Scream (a). This artwork sparked the idea of allowing participants to use their voices—not merely creating art about a scream, but actively using their voices to generate art. The original concept involved transforming shapes based on the loudness of the participants' input.

(a)

To establish a foundational code for shape transformation, research began on existing community p5.js projects, with Guilherme Vieira’s “Padrao Geometrico” (b) being particularly influential. This project features several shapes that transform, grow in size, and revert to their original form in a continuous loop. In pursuit of greater interactivity among the devices, it was decided that each phone would display only a segment of the overall image, allowing multiple phones to fit together like puzzle pieces.

(b)

The final design incorporated circular motion, inspired by the phenakistoscope (c), an early form of moving media that laid the groundwork for the future of cinema. To enhance the experience, the rotating circle animation on the phone was designed to be viewed through a hole, creating a peep-hole kaleidoscope effect.

220px-Prof._Stampfer's_Stroboscopische_Scheibe_No._X.gif

(c)

We decided to craft the project’s structure with cardboard as the primary material, with reflective paper and LED lights lining the interior to produce a mirror effect when all the phones are arranged inside. The inspiration for the reflections and lights was partly drawn from Yayoi Kusama’s “Infinity Mirror Rooms” installation (d). Additionally, magnifying plastic was used to cover the openings intended for peeking, enhancing the illusion of depth and intrigue for viewers peering through the holes.

(d)

Persona

Name: Alex Rivera

Age: 27

Occupation: Multimedia Artist

Motivations: Alex seeks interactive experiences that merge art and technology to foster communal connections. They value sustainability and are intrigued by installations that repurpose everyday technology.

Pain Points: Finds traditional phone interactions isolating and desires innovative ways to connect with others.

Development Process

Planning and Measurements

We started by sketching the structure and calculating the dimensions of each part. Correct measurements were crucial to ensure that all the parts would fit together smoothly, especially the mirror section and view holes. This stage focuses on translating our ideas into practical blueprints.

Digital Model of the Structure

Once we had the plans, we used the 3D modeling software Blender and SketchUp to create a digital version of the structure. This allowed us to visualize how all the geometric shapes would fit together and ensure that the phones would display the kaleidoscope visuals as intended. It was helpful to have this digital model before we started building, as it confirmed the arrangement and alignment of each piece.

Building the Structure

After confirming the final shape and dimensions, we unfolded the 3D model into a plan view and used a laser cutter to obtain the necessary pieces. We also cut out different sizes for the viewing holes to experiment with how people would interact with the structure. This prototype helped us test the physical form and the effectiveness of the viewing experience before moving on to more refined materials like reflective paper and LED lights.

Coding and Testing

We brought the kaleidoscope visuals to life using P5.js, programming them to respond to the volume of participants' voices. After some user testing, the animations were carefully polished to control the size limit so there's no overlap of the circles on the right and on the left. The testing also enabled us to create a more fluid visual experience that matched the intensity of the sound input.

Final code: https://editor.p5js.org/Wenjaq/sketches/EH9rf6CYU

Finally, we assembled the full installation. The phones were arranged underneath the mirrored structure, displaying colorful kaleidoscope images that responded to sound. People could peek through the holes to watch the constantly changing visuals. We added reflective paper and LED lights inside to create more depth, making the better experience for the viewers.

Final design

Interaction Video

Limitations

The sound calibration process was a bit tricky—for participants’ voices to be accurately registered, they had to have their phones close to their mouths and keep a distance so others' voices wouldn’t interfere. In noisier settings, the responsiveness could falter as background noise may register.

While the cardboard structure was eco-friendly and lightweight, it proved to be quite delicate. We had to handle it with care to prevent wear and tear, which added some challenges during assembly and transportation.

Setting up the installation was a bit complex, especially the careful alignment of the phones and LED lights. It required precision and a good chunk of time to ensure everything worked together smoothly.

Lessons learned

Personally, this was the first time I worked on a project where the goal wasn’t to solve a functional problem but to craft something immersive and impactful. It reinforced the idea that simplicity, paired with thoughtful execution, can lead to truly sophisticated outcomes.

This project taught me invaluable lessons about design, collaboration, and creating meaningful experiences. Collaboration played a crucial role in refining the project; every round of testing and feedback brought us closer to a seamless and emotionally resonant experience. By focusing on a single, clear interaction—using sound to generate visuals—we discovered the power of simplicity to captivate and engage participants in our installation.

I also learned that while working with sustainable materials like cardboard was rewarding, it also highlighted the challenge of balancing eco-consciousness with durability, especially for installations meant to be reused.

Other projects