Final Project: User Testing + IM Showcase

Finalized Concept & Progress

As I began working with p5.js and Arduino, I decided to focus my project on four Armenian symbols: Mount Ararat, the pomegranate, the Armenian rug, and lavash. I removed the duduk (musical instrument) from the project, as recreating it would have taken too much time, and the sounds I could input wouldn’t be similar enough to the actual instrument. Therefore, I chose to focus on these four interactions:

  • Lavash Baking Session:
    This interaction references Armenian flatbread (lavash) and imitates its baking process in a traditional clay oven (tonir). Users can cover the 3D-printed oven with both hands to place the lavash inside. When they release their hands, the lavash reappears on the p5 canvas. This interaction is based on the real-world operation of a tonir, which is typically placed in the ground to bake the lavash beneath the surface. Serial communication includes an LDR sensor from the Arduino side, which sends a signal to p5 to manipulate the lavash’s position inside the oven. An LED sensor also indicates when the lavash is being baked.

  • Breathing in Ararat:

    This interaction centers on Mount Ararat, the iconic peak visible from much of Armenia. As many Armenians dream of seeing Ararat through the clouds, this interaction lets users blow away the clouds to reveal the mountain. Users are encouraged to blow into the 3D-printed mountain, and with enough force, the clouds on the p5 canvas will move away, revealing the peak. I used a DHT22 sensor to detect humidity levels, which are sent to p5 to control the movement of the clouds.

 

  • Coloring the Pomegranate: 

    This interaction draws inspiration from Sergei Parajanov’s iconic film The Color of Pomegranates. To color the pomegranate, users place their finger on the fruit, where a pulse sensor detects their heartbeat. The pomegranate changes color based on the sensor’s readings: lower heart rates result in blue hues, while higher rates produce red tones. Serial communication reads the pulse sensor’s value on the Arduino side and displays it on the p5 canvas, adjusting the pomegranate’s color accordingly.

  • Crafting the Rug: 

    This interaction is entirely based in p5.js. Users can see themselves integrated into the pattern of an Armenian rug, typically displayed on walls for its aesthetic value. I used the following p5.js code as a reference to capture the pixelated camera feed, and by adjusting the RGB values of four main colors (blue, black, red, and beige), I created an image that blends with the rug pattern.

Arduino + p5

Arduino Code on GitHub

p5.js Code:

Reflection & Areas for Improvement

This project challenged me to work with various types of sensors. I encountered several issues with sensors I had never used before, such as the pulse sensor. Initially, it displayed three-digit values that bore no relation to an actual heartbeat. I eventually discovered that the sensor itself is not very reliable, so I implemented constraints to ensure the displayed values resembled a realistic heartbeat. Fortunately, this approach seemed to work during the IM showcase, as users received values around 90-100. Additionally, I had to constantly calibrate the LDR and DHT22 sensor values to suit the specific environment of the showcase.

I believe the visual aspects of the project could be further refined as well. More than that, the interactions could be recorded in p5.js, allowing users to compare how quickly they could “blow the clouds” or “bake the lavash.” This would introduce an element of competition and encourage users to revisit the project repeatedly.

Overall, I am proud of what I accomplished, particularly the variety of interactions I managed to implement within a constrained timeframe. I learned a great deal from this experience and thoroughly enjoyed engaging with users during the IM showcase – hearing their feedback about their favorite interactions was especially rewarding.

Final Project: Progress

Concept

I decided to proceed with my preliminary idea and develop it further. I chose five specific symbols that I will focus on in my project: Mount Ararat, the Armenian rug, lavash (Armenian bread), the duduk (Armenian flute), and the pomegranate.

The project will be divided into five different sections (or elements) that users can explore by clicking the corresponding icon in the p5.js sketch.

Customize Your Armenian Wall Rug:
No Armenian home is complete without a rug on the wall. In this section, users can create their own personalized wall rug by interacting with physical buttons. There will be two buttons: one for switching the patterns and another for fixing them on the rug. When the first button is pressed, patterns will chaotically move and bounce around the rug in the p5.js sketch until the “stop” button is pressed.

Lavash Tonir Simulation:
A tonir is a traditional clay oven used for baking lavash. This section allows users to “bake” their own lavash. By covering the light sensor with their hand, users simulate pulling lavash from the tonir on the digital display. Each time the light sensor is covered, a newly baked lavash piece will be placed on the table, stacking one on top of the other.

Breathing in Ararat:
Everyone in Armenia dreams of having a view of the legendary Mount Ararat from their home. However, even when the view is clear, Ararat is often covered by clouds. In this section, users can clear the clouds by blowing on a 3D-printed mountain. A DHT11 sensor will detect breath through changes in temperature and humidity. This sensor was chosen because, unlike sound-based detection, the DHT11 measures subtle shifts, ensuring precise breath recognition.

Virtual Duduk Experience:
The duduk is an iconic Armenian musical instrument traditionally made from apricot wood. This interaction is heavily based on the p5.js sketch: pressing virtual holes on the duduk triggers sounds from three piezo buzzers connected via Arduino.

Heartbeat-Responsive Pomegranate:
Inspired by Sergei Parajanov’s cinematic masterpiece The Color of Pomegranates (1969), this element allows users to discover their “pomegranate color” based on their heartbeat. Data from a heartbeat sensor will be shown in the p5.js sketch as a color-changing pomegranate, with each heartbeat value generating a unique RGB combination.

Progress

I have designed a rough sketch of how the project will look both on the Arduino circuit and in the p5.js sketch (see below).

As mentioned in my preliminary idea documentation, I plan to create a map within the p5.js sketch to help users navigate through all five elements. The icons will be clickable only in the p5.js interface, leading users to each element’s page, which will include a brief description with interesting facts about the symbol and interaction guidelines.

The physical layout of the elements on the Arduino side will visually resemble the map in the p5.js sketch. To conceal the circuit and sensors, I will build a wooden box that covers everything except the LEDs and buttons. For aesthetic purposes, I will cover the box with a piece of fabric. Additionally, I will place a 3D-printed mountain on the box (with a small hole at the top for the sensor) to make it more intuitive for users to “blow” on it.

Final Project: Preliminary Idea

Armenian Culture Navigator.

For my final project, I have an idea of making something related to Armenian culture. As of now, I imagine the project as a digital map displayed on p5.js with tactile and sensory inputs facilitated by Arduino. Users can explore iconic Armenian symbols by clicking on them on the map, like the pomegranate, lavash (Armenian bread), and Mount Ararat through engaging tasks which I still have to develop. For instance, the pomegranate can be colored by touching a conductive pad connected to an Arduino sensor. Similarly, users might virtually “stretch” the lavash by pulling on an elastic sensor. To add another layer of interactivity, blowing into a microphone sensor might simulate wind, and make digitally drawn clouds to drift across Mount Ararat on the map.

Areas for development:

I’m thinking about other objects that represent Armenian culture and symbols like the duduk (Armenian musical instrument), or recognisable carpets. I will also need to think about the ways I will build meaningful p5 and Arduino interactions with these symbols. 

Assignment #9: Serial Communication [in team with Ryan]

Exercise 1.

Make something that uses only one sensor  on Arduino and makes the ellipse in p5 move on the horizontal axis, in the middle of the screen, and nothing on Arduino is controlled by p5.

p5 code:

let position;
let mass = 50;
let potValue = 0; 
function setup() {
  createCanvas(640, 360);
  noFill();
  // Initialize position of the ellipse
  position = createVector(width / 2, height / 2);
}
function draw() {
  background(255);
  // Map potentiometer value to horizontal position
  position.x = map(potValue, 0, 1023, 0, width);
  // Keep the ellipse in the middle 
  ellipse(position.x, height / 2, mass, mass);
}
function keyPressed(){
   if (key == " ") { //set up serial
     setUpSerial();
   } 
}
function readSerial(value) {
  potValue = int(value); // Parse the potentiometer value
}

Arduino:

void setup() {
  Serial.begin(9600); // Start serial communication 
}
void loop() {
  int potValue = analogRead(A0); // Read the potentiometer value 
  Serial.println(potValue);     // Send the value to p5.js
  delay(10);                    
}

Exercise 2.

Make something that controls the LED brightness from p5.

p5 code:

function setup() {
  createCanvas(400, 400);
}
function draw() {
  background(225);
  // brightness based on cursor's x position
  let brightness = map(mouseX, 0, width, 0, 255);
  brightness = constrain(brightness, 0, 255); // Ensure brightness stays within range
  // Send brightness value to Arduino if serial is active
  if (serialActive) {
    writeSerial(`${brightness}\n`); 
  }
}
function keyPressed(){
   if (key == " ") { //set up serial
     setUpSerial();
   } 
}
function readSerial(value) {
  potValue = int(value); // Parse the potentiometer value
}

Arduino:

int ledPin = 9; 
int brightness = 0; 
void setup() {
  Serial.begin(9600); // Start serial communication
  pinMode(ledPin, OUTPUT); //LED pin as output
}
void loop() {
  if (Serial.available() > 0) {
    // Read the incoming brightness value
    brightness = Serial.parseInt();
    brightness = constrain(brightness, 0, 255);
    // Set the LED brightness
    analogWrite(ledPin, brightness);
  }
}

Exercise 3.

Make it so every time the ball bounces one led lights up and then turns off, and you can control the wind from one analog sensor.

p5 code:

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let potValue = 0; // potentiometer value
let serialConnected = false; 
let onGround = false; // whether ball is on the ground
function setup() {
  createCanvas(640, 360);
  noFill();
  position = createVector(width / 2, 0);
  velocity = createVector(0, 0);
  acceleration = createVector(0, 0);
  gravity = createVector(0, 0.5 * mass);
  wind = createVector(0, 0);
}
function draw() {
  background(255);
  if (!serialConnected) {
    textAlign(CENTER, CENTER);
    fill(0);
    text("Press 'Space' key on the keyboard", width / 2, height / 2);
    return;
  }
  applyForce(wind);
  applyForce(gravity);
  velocity.add(acceleration);
  velocity.mult(drag);
  position.add(velocity);
  acceleration.mult(0);
  
// check for bounce on the x axis
  if (position.x > width - mass / 2) {
    if(!onGround){
    position.x = width - mass / 2; 
    velocity.x *= -0.9;
    }
  }
    else if (position.x < mass / 2) {
      position.x = mass / 2; 
    velocity.x *= -0.9;
    }
  
  // check for bounce on the y axis
if (position.y > height - mass / 2) {
  velocity.y *= -0.9; 
  position.y = height - mass / 2; 
  if (!onGround) {
    sendBounceSignal(); 
    onGround = true; 
  }
} else {
  onGround = false; 
}
  wind.x = map(potValue, 0, 1023, -1, 1); 
  ellipse(position.x, position.y, mass, mass);
  // boundaries on x axis
  if (position.x > width - mass / 2 || position.x < mass / 2) {
    velocity.x *= -0.9; 
  }
}
function applyForce(force) {
  let f = p5.Vector.div(force, mass);
  acceleration.add(f);
}
// bouncing signal to Arduino
function sendBounceSignal() {
  if (serialActive) {
    let sendToArduino = "1\n"; 
    writeSerial(sendToArduino);
  }
}
// receive data from Arduino
function readSerial(data) {
    potValue = int(trim(data)); 
}
// initialize serial connection
function keyPressed() {
  if (key == ' ') {
    mass = random(10,100);
    setUpSerial(); 
    serialConnected = true; 
  }
}
function serialOpened() {
  serialActive = true; 
}

Arduino:

const int potPin = A0; 
const int ledPin = 13; 
int potValue = 0; 
bool ledState;     
void setup() {
  pinMode(ledPin, OUTPUT);
  Serial.begin(9600);
}
void loop() {
  // read the potentiometer value
  potValue = analogRead(potPin);
  // send potentiometer value to p5
  Serial.println(potValue);
  // check for data from p5
  if (Serial.available() > 0) {
    char received = Serial.read(); 
    if (received == '1' && !ledState) {
      // turn on the LED 
      digitalWrite(ledPin, HIGH);
      ledState = true;
      delay(100); 
      // turn off the LED
      digitalWrite(ledPin, LOW);  
    }
    else if (received != '1'){
      ledState = false;
    }
  }
  delay(50); 
}

Video demonstration:

Reading Reflection – Week #11

Design Meets Disability is an extremely captivating piece that raised interesting questions for me to contemplate. I find the first example, with glasses, to be the most compelling, as it illustrates that design is a necessary component even for seemingly medical tools and devices. It is surprising to learn that glasses were initially not intended to be styled at all, whereas nowadays they belong to their own branch of fashion. The fact that glasses are not simply used but worn gives them importance from a different perspective: as a social tool rather than purely a medical one. Similarly, design is critical for various prosthetics, and each one of them has its own specifics. Unlike glasses, prosthetics are integrations of the body, a crucial factor for designers to consider.

The text also touches upon the universality of design, a concept I approach with caution. While design can aim for inclusivity, I don’t believe a single design can ever accommodate everyone at once. This goal is elusive and should not be the designer’s primary focus. It was interesting to point out two different approaches to “universality” in design: one that tries to include everything so it works for everyone, and another that, on the contrary, makes the design as simplistic as possible to ensure it is universally straightforward to use.

Both methods are quite problematic, and the task of a good designer is to situate their work somewhere in between these two extremes. However, what is certain is that universality should not be the primary goal of design; simplicity should be valued above all. I agree with the text’s author that good design is not only about how an object looks but, more importantly, about how it works, as Steve Jobs aptly stated. This principle applies to everything, from iPod to an arm prosthetic.

Assignment #8: Stranger Things [in team with Ryan]

Concept & Inspiration.

For this project, we thought of recreating a recognizable music theme from film/TV series that we could easily manipulate. We ended up on the eerie and haunting Stranger Things theme, as it is truly one of those few captivating intros that you would never skip. We also decided to dedicate this project to the upcoming final season of the series, which will be released next year.

By using the ultrasonic distance meter and tricolor LED, we made a musical instrument that is responsive to the distance of the hand: the music speeds up when the hand is closer and slows down when it goes farther, and the LED changes its color accordingly.


Highlights.

It was difficult at first to find the music in the proper format so that it can be implemented into the Arduino code. As we tried to somehow extract the notes from the .mxl (.musicxml) files, we couldn’t find a software that could do that. Hence, we ended up recreating the soundtrack by using the array of sequences (representing the 48 notes and their durations) that we luckily found on the GitHub.

We using mapping for the tricolour LED lights, keeping greenValue at zero so that we could get a somewhat “gradient” effect.

The key (and most challenging) aspect in the code was to speed up the music according to the varied distance. We used mapping to set the shortest and longest duration of the music, as well as implemented  a delay by multiplying the adjustedNoteDuration by 1.3 (a factor commonly used in Arduino to maintain a natural pacing) to add a slight pause between notes, making each note more distinct.

void loop() {
buttonState = digitalRead(buttonPin);

if (buttonState == LOW) { 
for (int thisNote = 0; thisNote < 48; thisNote++) {

// distance measured with ultrasonic sensor

digitalWrite(trigPin, LOW);
delayMicroseconds(2);
digitalWrite(trigPin, HIGH);
delayMicroseconds(10);
digitalWrite(trigPin, LOW);

duration = pulseIn(echoPin, HIGH);
distance = duration * 0.034 / 2;

// mapping the tricolor LED values

int redValue = map(distance, 5, 50, 255, 100); 
int greenValue = 0; 
int blueValue = map(distance, 5, 50, 100, 255);

analogWrite(redPin, redValue);
analogWrite(greenPin, greenValue);
analogWrite(bluePin, blueValue);

// mapping to adjust duration between notes

int adjustedNoteDuration = map(distance, 5, 50, StrangerThingsNoteDurations[thisNote] / 2, StrangerThingsNoteDurations[thisNote] * 2);

// playing with the new tempo

tone(buzzerPin, StrangerThingsMelody[thisNote], adjustedNoteDuration);

// a short pause

delay(adjustedNoteDuration * 1.3);
}

} else {

// when button is not pressed, turning off the LED and buzzer

analogWrite(redPin, 0);
analogWrite(greenPin, 0);
analogWrite(bluePin, 0);
noTone(buzzerPin);
}

delay(50); 
}

Embedded Sketch.

GitHub

 

Reading Reflection – Week #10

Reading Bret Victor’s “rant” on the future of interaction design sparked a myriad of thoughts for me. His critique of touchscreens and how we are moving away from hands-on interaction is surprisingly relevant even though the article was written more than a decade ago.

One of the most striking points was Victor’s emphasis on the importance of hand as the true measure of a tool’s capability. I’d never thought of it this way: our hands not only manipulate objects, but they also shape our understanding of the physical world. If we’re constantly tapping and swiping on flat screens, are we limiting our brains as well as our bodies? It reminds me of the difference between learning something hands-on, like playing an instrument, versus passively watching a video. Both activities are valuable, but one engages the whole body and mind in a way that feels essential. The fact that modern-day children are learning to use touchscreens before they can tie their shoes is impressive, but is it the progress we need? It is, in fact, totally possible to avoid sacrificing our innate capabilities for the sake of innovation. But if we keep focusing on screen-based interactions, we might be undermining our potential to use our hands — and by extension, our creativity.

Even though Victor doesn’t provide specific answers or solutions in these articles,  I think he calls for more exploration into technologies that can genuinely integrate our physical abilities. For me, reading these pieces was an important reminder that it is technology that adapts to human nature, not the other way around — something to keep in mind as an aspiring interaction designer.

Assignment #7: Moving Closer

Concept & Inspiration.

For this project, I decided to practice what has been covered in the class so far but also try to implement a new sensor. My choice fell upon the most bulky of all sensors in our kit – the ultrasonic distance sensor.  By following the tutorial on YouTube, I built my Arduino with a yellow LED light and a button switch.

I got inspiration from final scene of the animated film Inside Out 2, when the emotions gathered together to hug the tree of the Self and “calm down” Riley.

When an object is close to the sensor for at least 10 centimetres, the LED lights up and becomes brighter as the object moves closer. However, when the button is pressed and released, the LED is turned off and it will not react to the object until the button is pressed again.


Highlights.

According to the guidelines of the task, I got information from two sensors – digital (the button switch) and analogue (the ultrasonic sensor). In order to make the button turn on and off, and the LED change the intensity according to the distance from the object, I implemented Boolean functions into my code. I also had to manipulate with delay() function to make the brightness change a bit smoother.

void loop() {
int currentButtonState = digitalRead(buttonPin);

if (currentButtonState == LOW && previousButtonState == HIGH) {
ledState = !ledState; 
delay(50); 
}
previousButtonState = currentButtonState;

digitalWrite(trigPin, LOW);
delay(20);
digitalWrite(trigPin, HIGH);
delay(20);
digitalWrite(trigPin, LOW);

duration = pulseIn(echoPin, HIGH);
distance = duration * 0.034 / 2;

int brightness = 0;

if (ledState) { 
if (distance <= 10) {
brightness = map(distance, 0, 10, 255, 0);
} else {
brightness = 0;
}
} else {
brightness = 0; 
}

analogWrite(ledPin, brightness);
delay(10);
}

Embedded Sketch.

GitHub

 

Reading Reflection – Week #9

Having read Physical Computing’s Greatest Hits (and Misses), I was struck by its relevance and abundance of crucial ideas. As an aspiring interactive media artist, it’s critical for me to understand the balance between creativity and repetition. It’s always a bit intimidating to search for an idea, only to find that it’s been done before. This often leads me to hesitate on projects that feel “too done” and hackneyed. How, then, can one avoid being constrained by the thought that everything has already been made, and still maintain creativity even when an idea isn’t entirely novel?

What’s compelling about this text is that the author offers a fresh perspective: we can harness familiar themes as frameworks for exploration, allowing each iteration to create room for personal interpretation. By illustrating common patterns across various physical computing projects, the author demonstrates that creativity arises not only from the novelty of ideas but also from how people interact with the artwork. The examples provided in the article are very illustrative and somewhat familiar to many of us, as we all encounter similar physical computing models in different forms throughout lives. What sets them apart is, possibly, the way people’s interactions shape each project in unique ways.

This was also the main takeaway from the article Making Interactive Art: Set the Stage, Then Shut Up and Listen, which challenged me to reconsider my approach to interactive art. I often overthink the explanations in my projects, whether they are films or interactive artworks, worrying that the audience might misunderstand or overlook important details. This text was a reminder that such explanations can limit interaction, turning the audience into passive viewers rather than active participants. I strongly agree with the idea that an artwork should invite the audience to “complete” it through their responses, making it less about conveying a single message and more about fostering a dialogue. Transitioning to a mindset where my work is an initial invitation, with the audience’s engagement shaping its evolution, feels both liberating and challenging but essential for impactful interactive art. In this way, recurring themes in my projects become flexible templates rather than restrictive molds, providing me with opportunities for personal expression.

Assignment #6: Mind Your Posture!

Concept & Inspiration.

For this small project, I was thinking of making something feasible to construct yet useful for me. As I was almost lying on the chair after barely 5 minutes in the IM Lab, it didn’t take me long to come up with an idea of a switch that would regulate posture and indicate how well the person is seated (a so-called “posture fixer”) by using the LED lights, a regular paper tape, and conductive fabric.

Highlights.

I set two variables (“yellowState” and “greenState”) in my code to regulate the LED switches by using the “if” condition functions.

My main goal was to make the LED lights react accordingly to a certain number of “buttons” pressed. For instance, when no button is pressed, the red LED is blinking as a sign of warning. When only one of the buttons is pressed (either green or yellow), the yellow sign is switched on, meaning that the posture is satisfactory yet not perfect. In case if both buttons are pressed, green LED is switched on, indicating decent posture.

if (yellowState == HIGH && greenState == HIGH) { // When both buttons pressed
digitalWrite(4, HIGH); // Turn on green LED
digitalWrite(2, LOW); // Turn off yellow LED
digitalWrite(LED_BUILTIN, LOW); // Turn off red LED

} else if (yellowState == HIGH || greenState == HIGH) { // When only one button pressed
digitalWrite(4, LOW); // Turn off green LED
digitalWrite(2, HIGH); // Turn on yellow LED
digitalWrite(LED_BUILTIN, LOW); // Turn off red LED

} else { // When no button is pressed
digitalWrite(4, LOW); // Turn off green LED
digitalWrite(2, LOW); // Turn off yellow LED
digitalWrite(LED_BUILTIN, HIGH); // Blinking red LED (for 1 second)
delay(1000);
digitalWrite(LED_BUILTIN, LOW); 
delay(1000); 
}
}

Embedded Sketch.

GitHub