Author: Isabella Hernandez

Concept + How it Works

Inspired by Season 2 of the Netflix series Arcane, this project prioritize the experience of the concept while incorporating subtle interactive responses. On the first page, there will be a brief instruction of how the experience works. In simple terms, there will be an animated object floating in the screen once the user clicks one of the keys in the computer. This floating object, inspired by the “Wild Rune” introduced as a seed of destruction and chaos, is a colorful sphere floating in a dark space. In the series, this is an unstable, magical object that is constantly distorting and causing chaos around it. For this reason, in my project, this sphere will be open to drastic changes: From changes in size (growing and shrinking), to changes in speed, all while some of the most popular songs from the season’s soundtrack play.

Goal of the game: “Stabilize the Wild Rune”

From Arduino to P5

For the interaction,  I aim to have p5 respond to two potentiometers and one button.

• Button 1 will allow the users to change the songs played in the background while the “game state” is active. After doing an array, each song will play on infinite loop while it runs in the background, and will only change when the player presses the button.

soundFormats("mp3", "ogg"); // Loading the sound file.
songList = [
  loadSound("Woodkid_To_Ashes_and_Blood.mp3"),
  loadSound("Blood_Sweat_&_Tears.mp3"),
  loadSound("Imagine Dragons_Enemy.mp3"),
  loadSound("Stromae, Pomme_Ma_Meilleure_Ennemie.mp3"),

• Potentiometer 1 will allow the users to change the size of the sphere. After connecting Arduino UNO on p5, once the user presses “start” they will be able to increment or decrease the size of the sphere by twisting the potentiometer. (As shown in the VIDEO)
• Potentiometer 2 will allow the user to change the speed at which the sphere is rotating. Just as the previous analog sensor, the second potentiometer will be accessible as soon as the Arduino UNO is connected to the p5.

// -------------------------
   // READ FROM ARDUINO
   // -------------------------
   let data = port.readUntil("\n");
   data = trim(data);

   if (data.length > 0) {
     // ---- POTENTIOMETER DATA ----
     if (data.startsWith("P:")) {
       let potValue = int(data.substring(2));
       if (!isNaN(potValue)) {
         sensorValue = potValue;
       }
     }

     // ---- BUTTON PRESSED ----
     else if (data === "BTN" && gameState === "playing") {
       playNextSong();
     }
   }
 }
   // Smoothly transition sphere size
   rune.size = lerp(rune.size, runeSize, 0.1);

   // Draw the sphere
   rune.display();

From P5 to Arduino

• If the player grows the sphere past a specific radius on the canvas,  a red LED light will turn on.  Once they fix the size or return to the home page, the LED will turn off.
• Similarly, if the player shrinks the sphere past a specific radius on the canvas,  a red LED light will turn on.  Once they fix the size or return to the home page, the LED will turn off.
• When the player keeps the sphere at a certain size, a green LED light will turn on and take the user to the “winning” page. The LED will turn off.

Background Songs:

Imagine Dragons feat. JID – “Enemy (Opening Title Version)” (from Arcane) [Official Visualizer]

https://youtu.be/UqcE-IIevf0?si=1fEAqWTDhATXA7Av 

Woodkid – “To Ashes and Blood” (from Arcane Season 2) [Official Visualizer]

https://youtu.be/Gj-jmBi0aK8?si=6Yn53yDESy4y0R0K

Blood Sweat & Tears (from the series Arcane League of Legends)

https://youtu.be/ySbgRwQi3Rc?si=uf5mUQyy-rPUKWLz 

Objectives:

• Add button to change music (in process)
• Add potentiometer to adjust speed of spinning sphere
• Fix Title (must show when the game begins (it currently doesn’t show since the text is used to showing on a 2D layer)
• Make the size (too big and too small) cause RED LED to show
• Make the right size cause the user to win (show GREEN LED)

Tasks completed so far:

• Created a sphere in a WEBGL space for the three dimensional elements to work (shades, colors, among others)
• Added potentiometer from p5 to Arduino to successfully grow and shrink the sphere
• Defined a structure of p4 including: Introduction page, “playing state”, “winning page”.
• Established the functions necessary for Arduino and p5 to exchange more than one piece of information (potentiometer + button 1)
• Downloaded and uploaded GitHub files to p5 , learned in class, to stabilize bidirectional serial communication

VIDEO

Main Inspiration: Arcane Season 2 Clip 

https://youtu.be/8PU2iKx0YtQ?si=qtSexmSyrLLJLWcc

Chat GTP

Given the complexity of this project, I have used Chat GTP so far to assist me in organizing the code and guiding me step by step when something is missing or a mistake is preventing the code from running. For example, I struggled to make both the button and the potentiometer work at the same time, so I explained my situation to Chat GTP and it made me realize the error was in my code where the Arduino exchanges information with p5. It also helped me realize I hadn’t uploaded the files from Github, causing the port connection to malfunction.

Concept

One of my favorite shows of these two last years has been Arcane. The animation, the character designs, the music,  and the story are all beautiful elements combined into a masterpiece. For this reason, for my final project I want to create a reflection of my emotions towards these series.  My audience is intended for those who are fans of the series, but also those who have not watched it yet, and encourage them to do so. Moreover, I also intend to enhance a user experience in which the participant can absorb the parallel between music and visuals, demonstrating the power of these two elements when they are combined in an interactive medium.

“Stabilize the Wild Rune”

How does the project work 

My intentions are to make this project prioritize the experience of the concept while incorporating subtle interactive responses. On the first page, there will be a brief instruction of how the experience works. In simple terms, there will be an animated object floating in the screen once the user clicks one of the keys in the computer. This floating object, inspired by the “Wild Rune” introduced in Season 2 of Arcane, is a colorful sphere floating in a dark space. In the series, this is an unstable, magical object that is constantly distorting and causing chaos around it. For this reason, in my project, this sphere will be open to drastic changes: From changes in size (growing and shrinking).

From Arduino to P5

For the interaction,  I aim to make a series of buttons (three maximum), as part of the Arduino tactile “speaking”.

• One of the buttons would be to play the music (if this doesn’t work, I would make it the start button instead)
• To grow the sphere I would make a second button
• To decrease size I would make a third button.

(Maybe Instead of buttons I could use a slider)

From P5 to Arduino

• When the player grows the sphere past a certain point they lose and a RED LED light will turn on and turn off as they return to the home page.
• When the player decreases the sphere past a certain point they lose and a RED LED light will turn on and turn off as they return to the home page.
• When the player keeps the sphere at a certain size for a specific amount of time (for example 5 seconds), a GREEN LED light will turn on and turn off as they return to the home page.

sidetone: Maybe I give them candy if they win

If there is music, this one would play on its own and reset when it is done playing.

Background Song: (still in progress of decision)

• To Ashes and Blood – Arcane, Woodkid

Questions to ask:

• How can I make the buttons affect the size of the object?
• Can I use the songs or not (because of copyright)
• How can I start at a different size in the canvas
• Will there be an end of game or not? If there is, how can I do it?
  • • (For this scenario, I would probably follow the storyline where it is necessary to stabilize the wild rune, so if the user makes the sphere too big or too small it would be game over).

Fullscreen Mode Sketch 

Link to sketch: https://editor.p5js.org/imh9299/full/lv73qdahm

Main Inspiration: Arcane Season 2 Clip 

https://youtu.be/8PU2iKx0YtQ?si=qtSexmSyrLLJLWcc

Other student’s work inspiration:
https://intro.nyuadim.com/2025/05/08/week-14-final-project-2/ 

• https://drive.google.com/file/d/1cKzZDW381kVPHhkQ_SMRwg62PU8fu88L/view?usp=sharing 
• https://intro.nyuadim.com/author/bka2027/ 
• https://intro.nyuadim.com/2025/05/11/week-14-final-project-5/ 

Design Meets Disability

After reading this text,  I found myself agreeing with the author’s argument on fashion and designing products for disabilities. I’ve always been curious about the process behind designs for products meant to support people with disabilities, such as prosthetics, hearing aids, and glasses. Although at the beginning fashion was described as a form of reducing the size and enhancing the aesthetic aspect of products such as glasses, my thoughts about the author’s argument changed. But as I read further, I realized that reducing the size and making a product “fashionable” is not just about making it pretty, but also satisfying  the comfort of the client, and respecting their experience. 

The text reinforced some ideas I already had, especially the belief that good design is often thoughtful for problem-solving. I connected strongly with Charles Eames’ idea that design is guided by constraints, because it reminded me that although sometimes there will be limitations, this is just a first step towards understanding what the client wants and needs. At the same time, the reading challenged me to think about other  perspectives I thought about before, such as how making a design for disability discreet might unintentionally send a message that it should be hidden. Thus, it is important to always prioritize the comfort of the client, and take these different perspectives into consideration. 

Concept

Mini Piano

Given that we had to make a musical instrument, we were inspired by a project we found in YouTube of what seemed like a piano. From this, we aimed to make a smaller scale of this project following the requirements for the assignment. The circuit consists of one piezo speaker, a potentiometer as an analog sensor, and a three buttons as digital sensors.

Schematic

Circuit Diagram

Figure 2 ( Circuit design with code and simulation on “Magnificent Jaiks” by Abdelrahman

Final Results

VIDEO

Arduino code

One aspect of this project we were  proud of is the octave multiplier implementation. Instead of having fixed notes, Abdelrahman used the potentiometer to create a continuous pitch control that multiplies the base frequencies by a factor between 0.5x and 2.0x.

float octaveMultiplier = map(potValue, 0, 1023, 50, 200) / 100.0;

This line of code transforms a basic three-note instrument into something much more expressive and fun to play with. Users can play the same melody in different registers, which makes the instrument feel more like a real musical tool rather than just a tech demo.

else if (digitalRead(button2) == LOW) {
  int freq = notes[1] * octaveMultiplier;
  tone(buzzerPin, freq);
  Serial.print("Playing ");
  Serial.print(noteNames[1]);
  Serial.print(" at ");
  Serial.print(freq);
  Serial.println(" Hz");
}
else if (digitalRead(button3) == LOW) {
  int freq = notes[2] * octaveMultiplier;
  tone(buzzerPin, freq);
  Serial.print("Playing ");
  Serial.print(noteNames[2]);
  Serial.print(" at ");
  Serial.print(freq);
  Serial.println(" Hz");
}

I also thought this snippet was interesting since it captures how the notes are played and how the frequencies adjust when the buttons are played and the potentiometer is twisted.

Github

https://github.com/imh9299-sudo/Intro-to-IM.git

Challenges and Further Improvements

Despite the complexity of the circuit, Abdelrahman successfully managed to produce a design in Magnificent Jaiks which I managed to follow without any issues. After arranging the jumper wires and all the other pieces, the final result was as we aimed for. One of the biggest challenges we faced was finding a way to divide the work as a result of the distance. Nevertheless, we managed to make a plan after meeting on zoom, and finished our circuit on time. For future projects, one thing I would like to improve on is developing an instrument of this kind with more buttons in order to have a larger version of the mini piano done for this assignment.

One of the examples I found most interesting in “A Brief Rant on the Future of Interaction Design” was the author’s take on voice, especially when he described a fictional situation in which Monet uses his voice to obtain the painting he wants. It may sound ridiculous but I really do agree and understand his argument, how active exploration is necessary in some cases, and the use of voice doesn’t apply. This challenged my own way of thinking, expanding to something essential that the author may be trying to express, whether consciously or not. This is, some forms of interactive will not apply to some cases, and this is why the designer or programmer must understand what is most relevant and effective for the experience they are making. For example, in an interactive experience designed to be engaged while standing up, it might not be the best idea to make certain responses triggered by having the user go click on something on the laptop every time as well. Allowing the user to focus on a few things at a time will improve their experience and help them understand the relevance of the interactive elements within the main objective of the project

Something that caught my attention in Bret Victor’s follow-up article was the neglected factor when it comes to tools that are meant to amplify human capabilities, and how hands play an important role in these. I think I speak for many when I say that we often take the skills of our hands for granted. Cooking, drawing, writing, building, organizing, some of the best activities done both for pleasure or to complete a task are done with our hands. And I agree with the author that there is a unique satisfaction that comes from doing these things with our hands. For example, I do love drawing digitally, as the result of my efforts match my intention to draw realistic yet slightly cartoonish objects, landscapes, and characters. However, this process doesn’t match the precision and delicacy of using a brush and applying paint to a canvas, stroke for stroke.

Despite this, I must disagree with the author on one thing. Even though the connection between what I am doing with my hands and the outcome on a screen might not be as strong as doing with another more tangible medium, this does not mean there is no connection at all. Before technology took over most of our ordinary activities such as writing, I enjoyed writing stories with a pen or pencil on my notebook. However, this process became exhausting whenever I had to erase or cross something, or my fingers started to ache from writing for so long. Now, even though I am staring at a screen instead of brushing my fingers over a piece of paper, and typing over a keyboard instead of using a pen, I still enjoy writing just as much as before, and the action has become more manageable for me.

Concept

For this project, to create an analog sensor and one digital sensor (switch), and use this information to control at least two LEDs, I decided to make for the digital sensor a connection between a digital pin and a button to control one LED light. For the analog sensor I used the analog input and output to control the second LED light, turning it on and off depending on how much brightness the light sensor received.

Circuit Illustration

Final Results

VIDEO

Arduino code

oid loop() {

int sensorValue = analogRead(A3);
Serial.println(sensorValue);
// set the brightness of pin 11
sensorValue = constrain(sensorValue,500,900);
brightness = map(sensorValue, 500, 900, 0, 255);
analogWrite(11,sensorValue);
delay(30);


  int buttonState = digitalRead (A2);
  if (buttonState == HIGH){
    digitalWrite(13,LOW);
  } else{
      digitalWrite(13,HIGH);
  }

Although it isn’t the most creative or unique code, I was happy to find that my initial code was working to make both LED lights light up, and it was just a matter of adding information for the sensorValue and the brightness to make the LED light responding to the light sensor to show a greater difference in the changes of brightness.

Github

https://github.com/imh9299-sudo/Intro-to-IM.git

Challenges and Further Improvements

While I was able to successfully complete the assignment and create both digital and analog responses, I wish I could have found a more creative way of obtaining these responses. Moreover, I struggled to put the code together so both sensors would function simultaneously, as well as arranging the position of all the jumper wires, the resistors, and the LED lights themselves.  For my next project, I will seek help from the Lab assistants, and I will pay more attention to all the information on the slides we are provided in class to make sure I fully grasp the foundation behind every code and understand what each tool does. I would also like to explore the other tools found in the lab to make different responses in comparison to the tools we already have in our Arduino kit.

,

In “Making Interactive Art: Set the Stage, Then Shut Up and Listen”,  the author emphasizes the importance of not defining an interactive work, since unlike a traditional art piece, an interactive piece is not just an expression but a medium that will inevitably be interpreted differently by the users. I found myself agreeing with this statement, especially since it does apply to traditional art in some cases as well. There is something exciting about being the viewer or the user, and being able to not only produce our own interpretations of a creative piece, but also being able to engage with it, whether it is through a computer program or something tangible. It also reminds me of when I write creative stories; sometimes it is better to leave certain details unsaid rather than reveal everything about a setting or a character, as readers often enjoy filling in those gaps with their imagination. Ultimately, like any creative work, I agree with the author that an interactive piece can resemble a performance more than a finished painting or sculpture, allowing something beautiful and engaging to emerge. 

Similarly, in “Physical Computing’s Greatest Hits (and Misses)”, I found it interesting how the author notes that when people learning about physical computing realize a particular ideas has been done before, they often give up on it because they believe it’s not worth it since it is no longer original. My first thought was that this happens in art and writing as well. When a writer wants to explore a familiar theme, like reincarnation, they might hesitate because it has been done many times before. Before reading this text, I hadn’t realized that the struggle for originality and authenticity is just as applicable in physical computing as it is in other creative or noncreative fields. Now I feel like I share much more in common with this field than I initially imagined. 

Concept

Planning an unconventional switch in which we had to open and close a circuit like a switch without using our hands seemed extremely challenging. However, after some planning, and examining the material available in the IM lab, I set myself the goal of creating two bracelets that upon touching they would “close” the circuit. I have always been fascinated by jewelry, so I thought this would be a cute way of integrating the concept of accessories with the Arduino interactivity.

Circuit Illustration

The part I struggled the most was finding a way of connecting bracelets to the breadboard and for them to react once they touched each other in response to the code in the digitalRead. After a long time of trial and error, I managed to make the LED light respond to the touch between the bracelets by inserting the jumper wires where the button would have been as we learned in class.

For the final result, every time the bracelets touched, by pressing my wrists together, the LED light would turn off. And when they were separated, the light would turn on.

Arduino code

void setup() {
  // put your setup code here, to run once:
pinMode(13,OUTPUT);
pinMode(A2,INPUT_PULLUP);

}

void loop() {
  int buttonState = digitalRead(A2);

  if(buttonState == LOW){         // button pressed
    digitalWrite(13, HIGH);
  } else {
    digitalWrite(13, LOW);
  }
}

GitHub PermaLink

https://github.com/imh9299-sudo/Intro-to-IM/blob/c27a407fe44541c3602992c664133ee011a63b8c/Assignment_8_Creative_Switch_copy_20251028080521.ino

Challenges and Further Improvements

One of the greatest challenges I faced happened while I tried to find the way of arranging the jumper wires and the wires connected to the copper bracelets so they would react on the LED light once they touched.

For my next project, I would like to make something more creative, and add some more responses such as making the lights blink or react to the movement of the wrists too.

What stood out to me in both readings was how they started off with what seemed like simple, everyday stories, but ended up conveying something much deeper. It reminded me of those stories given in TedTalks or podcasts that sound ordinary at first, until the speaker reveals the real lesson behind it.

For example, “Her Code Got Humans on the Moon” wasn’t just about the perseverance of Margaret Hamilton, but about the process that led her to help with the success of the Apollo’s mission; how she build a code to anticipate human error to prevent what could have been a major accident. That shifted how I think about programming, it’s not just about building that works, but planning for when things go south.

In Norman’s “Emotion & Design: Attractive Things Work better”, the example of the mugs seemed simple too, but it lead a much more important point too: just how function and aesthetics aren’t separate, Affect and cognition work together rather than against each other when it comes to processing information in a system, despite their difference functions and parameters. 

Overall, both texts made me more aware that behind things we experience everyday, whether it is when we are programming or designing something to enhance its function or reduce “irrelevancies”, there are consequential decisions, intentions, and values that beyond the surface of what we see.