Touch Grass

By Ranjani & Ines Lucas Presentation Link

****Touch Grass is an interactive installation we’re creating for our PComp and ICM finals.

We’re constantly bombarded with digital news, noise and content in our daily lives. The term ‘Brainrot’ has been voted as the word of the year 2024 by Oxford University Press. Which means, we all really need to touch some grass. Touch grass is a phrase used on the Internet to tell someone to take a break from their virtual worlds and go outside. The phrase also implies that the person the phrase is directed to, spends too much time online, and they physically need to get outside and “touch some grass” to reconnect with the real world.

While ideating for our projects and being immersed in the chaotic weeks of deadlines and submissions for our finals, we casually mentioned the term ‘Touch Grass’ and an idea clicked.

Touch Grass is an interactive installation where the user approaches a cylindrical table with a ring of (fake) grass attached around its circumference. The center of the table would be a circular screen with visuals projected onto it. On the screen, the user will be bombarded with a visual representation of a lot of digital news and noise that we’re generally thrown with in life. The idea is that when the user touches the grass, it forms a water ripple where they touched. If multiple people collectively touch the grass around the table, all the digital noise would dissipate and form a lily pond.

Below is a drawing representing the structure of our installation.

DALL·E 2024-12-03 16.35.41 - A clean and refined digital sketch of an interactive circular installation setup, featuring a circular tub or bin with a 40-inch diameter and 33-inch .webp

IMG_4017.jpg

Using a custom-built copper mat sensor array and p5.js, we created a system that generates dynamic ripples and blooming flowers on a digital canvas in response to physical touch and pressure. When someone presses the copper mat, ripples flow outward from the point of contact and a flower blossoms at its center.

The ideal interaction for the project would be for the user to invite multiple others to join them to collectively play. To make the digital noise completely dissipate and form a lily pond, we’d ideally require 9 people to participate in the experience.

How did coding it make it different than if we had just used software?

We opted to write custom code rather than use prebuilt software because the copper mat's physical structure, arranged in rows and columns, aligns seamlessly with a 2D array in code. This approach allowed us to efficiently process and visualize sensor data while providing the flexibility to create responsive visuals like ripples and blooming flowers.

What aspects are most interesting?

  1. Reactive Ripples: When users touch the mat, it creates ripples that dynamically expand and fade outward. These ripples use circle geometry, with size and opacity updating each frame to mirror natural water interactions through precise mathematical calculations.
  2. Water Caustics: The project creates lifelike water light effects using sinusoidal wave functions. By calculating each grid point independently, we achieve smooth, natural-looking water movement.
  3. Pressure-Based Flower Blooming: Flowers bloom in direct response to mat pressure—harder touches create larger and fuller blooms. This feature shows how physical pressure seamlessly translates into dynamic digital visuals.

The p5 Code