For my final project, I’m creating an experience for a retail store. As mentioned in my proposal, I’m working on a t-shirt brand called Pool Party, and I wanted to create the concept of what a pop-up store of the brand would look like. In particular I wanted to create a device for tables in the store. To make the experience more immersive, I came up with a sensor that would display the prices as a customer get’s close to the product.

The idea is that as customer get near the table the opacity of the water will go down and the prices will appear. This is an example of how the technology would work:

To make this happen, I needed to connect Arduino with Processing. The first step is to make the sensor work in Arduino and then connect it to Processing using the Firmata Library. I did some research online and found some projects that were similar to mine, so I modified the code they used to make the sensor in my circuit send information to Processing. I used the code in this project and developed it further to create the one below:

#define echoPin 7 // Echo Pin
#define trigPin 8 // Trigger Pin
#define LEDPin 13 // Onboard LED

int maximumRange = 200; // Maximum range needed
int minimumRange = 0; // Minimum range needed
long duration, distance; // Duration used to calculate distance

void setup() {
 Serial.begin (9600);
 pinMode(trigPin, OUTPUT);
 pinMode(echoPin, INPUT);
 pinMode(LEDPin, OUTPUT); // Use LED indicator (if required)

void loop() {
/* The following trigPin/echoPin cycle is used to determine the
 distance of the nearest object by bouncing soundwaves off of it. */ 
 digitalWrite(trigPin, LOW); 

 digitalWrite(trigPin, HIGH);
 digitalWrite(trigPin, LOW);
 duration = pulseIn(echoPin, HIGH);
 //Calculate the distance (in cm) based on the speed of sound.
 distance = duration/58.2;
 if (distance >= maximumRange || distance <= minimumRange){
 /* Send a negative number to computer and Turn LED ON 
 to indicate "out of range" */
 digitalWrite(LEDPin, HIGH); 
 else {
 /* Send the distance to the computer using Serial protocol, and
 turn LED OFF to indicate successful reading. */
 digitalWrite(LEDPin, LOW); 
 //Delay 50ms before next reading.

Once I was able to send information from Processing to Arduino, I modified my Processing code slightly so that the data coming from the sensor would become the opacity variable of the water image. This is how the final code looks like:

import processing.serial.*;
float x = 255;
PImage bg;
PImage front;

String comPortString;
Serial myPort;
int distance;

void setup() {
  size(852, 110);
  bg = loadImage("price.jpg");
  front = loadImage("water.jpg");

  myPort = new Serial(this, Serial.list()[1], 9600);

void serialEvent(Serial cPort) {
  comPortString = cPort.readStringUntil('\n');
  if (comPortString != null) {

    distance = int(map(Integer.parseInt(comPortString), 1, 200, 1, height));
    if (distance<0) {
      distance = 0;

void draw() {
  image(front, 0, 0);  // Display at full opacity
  float tintValue = map(distance, 0, 105, 0, 255);
  tint(255, tintValue);

Once the the sensor starts sending the data to Processing, the opacity of the water will vary depending on the distance of the object in front of the sensor. Here’s a demo of the sensor working when a person gets close to the sensor:

Once the technology started working, I started building my enclosure. As the sensor is supposed to be hidden, I built an enclosure that would hide underneath the table. The idea is that a velcro strip on the top of the enclosure would allow for easy setup and removal, if needed.


Once finished the final project would look and work like this: