Design a site like this with
Get started

Physical Computing · Week 13

Project 3 Documentation

My project idea is inspired by the current situation which people are in right now. Many people are separated by distance due to the virus, and thus I thought about created a project which can help people feel connected despite not being physically together.

Sketch of Idea

The two boxes (shown in pink and blue in the sketch above) are intended to be placed in different locations. As the force sensing resistors are being pressed onto by two different people at the same time, the screen generates a curve line from each end that eventually connects in the middle (as the time and force of the pressing increases). I hope to create a symbolization of two people separated by distance but connected by heart through the generated abstract art on the screen.

In addition to the two force sensing resistors, I also decided to add in two LEDs, one on each side (not drawn in the sketch above). As one of the force sensing resistors is being pressed onto, the opposite LED would light up to hint that the person on the other side is interacting with the installation, and encourage the person on this side to do so as well. As the person respond and press onto the force sensing resistors on his or her side, the other LED would also light up to indicate a response being made.

List of Materials Used

For circuit: Full size breadboard x 1; Half size breadboard x 1; Arduino Nano V3.0 x 1; LEDs x 2; Force sensing resistors x 2; 220 ohms resistors x 2 (for LEDs); 10k ohms resistors x 2 (for FSRs); wires

For project housing: 4mm foam board; acrylic paint; poster paper; mini hearts for arts and crafts; styrofoam glue; double-sided tape


I started out by visualizing the circuit and breadboard digitally in Fritzing, and updated the breadboard after making adjustments and working on the code. Bellow is the final visualization of my circuit, except I ended up breaking a set of LED and force sensing resistor onto a separate breadboard in order to disconnect the two sets and show distance between people when interacting with my project:

Final Breadboard View of Circuit
Final Schematic Diagram View of Circuit


Different from my previous project, I started out by coding the Arduino part first as I feel that the input from the FSRs is a critical element to this project. Since I have two inputs, I needed to separate the two sensor values in the code. At the beginning, the sensor values somehow flickers continuously as they are being sent into p5js. After referencing the in class demo and with the guidance and help to troubleshoot from my professor, I was able to eventually get my input values to work with p5js.

Bellow is the final Arduino code for my circuit:

Final Arduino Code, Enabling FSR Values to be Sent to p5js and LEDs Lighting Up

As I was work on my p5js sketch, I sometimes have issue with running the sketch as it takes quite a while to load all the images I have. During the process, I also moved into Adobe After Effects to put together short animation clips such as the subtle movement in the background and the light beam flashing in the middle. I then exported these clips and brought them back into p5js to allow the movement and motion to feel smoother and closer to what I hope to achieve.

Building My Circuit

Setup of original breadboard with both FSRs and LEDs:

Moving a set of FSR and LED onto a separate breadboard, connected with long wires:

Testing My Circuit with Code

Video Capturing the Force Sensing Resistors and LEDs Working

Project Housing

Building an outer box: As I’ve received positive feedback on the housing of my previous projects, I approached the building of the housing for my controllers in a similar way. As I hope to keep my controllers as small as possible for it to feel like a handheld object, I measured my breadboards and height of my Arduino Nano and build the height of the sides of my box according to these measurements.

Painting my box: I used acrylic paint to cover the foam boards in pink as I feel that this color works well with the theme and concept of my project and provides a contrast with my visualizations on screen.

Putting it together: I combined the painted foam boards with styrofoam glue and tried to make my controllers look fairly polished. I also poked holes for the FSRs and LEDs to allow them to stick out the top of the boxes.

Decorating the box: I added heart decorations to the controller to emphasize the concept of hearts being connected and specifically two hearts to each FSR sensor to represent the connection.

Testing circuit in the box: After putting the housing together, I tested my controllers with my Arduino code once again to make sure the wires are all connected corrected and everything is working properly.

Rechecking to Make Sure Circuit with Code is Working

Final Project Presentation

The first video bellow shows me and other person interacting with the controllers and generating the visual on the screen. At the beginning, a person started by pressing onto a controller forming the curved line from the left. Then, the other person responded by pressing onto the other controller, forming the line from the right and eventually letting the two lines connect. Once the lines from each side touch in the center, the animation of the flashes gets initiated and appears on the screen, indicating a sense of brightness and excitation. In the middle of the process, as one person lets go of the controller, the line on its side would gradually disappear and the flashes would stop immediately and only resume if two lines touches and connect again in the center.

Final Video Capturing Interaction of the 2 Controllers with Visualization on Screen

This second video bellow is a screen-captured recording of the visualization interaction from the video above.

Screen-Capture of Visualization of Interaction and Connection from the Video Above

Overall, I wanted to create a sense of connection despite being separated with both the controllers and visualizations on screen. Reflecting on the project, I am definitely happy with how my controllers and visuals in p5js sketch worked together, but my ideal situation would be two people are interacting with this project in a further distance apart (such as being located in different countries) instead of just being a few feet away due to the connected wires despite already being extended. I feel that I would need to advance my knowledge and first learn about wireless connections (and wireless housings) in order to achieve my ideal setup for this project. In addition, I was also inspired to think about possible assynchonous communication (possibly due to different timezones), interaction recordings, and variations in my visualization. After executing this project, I definitely feel inspired by the variety of ways and scenarios that connection and feeling of being connected can exist, and would be interested in tackling this theme again in my future work.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s