Author: Isabella Hernandez

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.

Vision for humans can vary. Some might not be able to distinguish colors properly. Others may need glasses to focus on little details, or see what is slightly farther away from them. However, one thing remains consistent, what humans see is not what they choose to see, but what is in front of them. They can’t see a pool if there is not a pool in front of them. If there is a house, they will see a house. However, a human’s vision will also vary on different factors: the brightness, the colors arounds them, the state of an individual’s eyes, and more. On the other hand, computer vision relies mostly on algorithms, pattern and feature recognition, etc. However, all of these are process, that, as described in the text, if they are low-level computer vision, they won’t even be able to resister a person or object in a video, making it flawed and susceptible to making crucial mistakes if not programmed properly. Nonetheless, this arguably shares a similar trait with humans when their vision is not 20/20, hinting that computer and human vision are both prone to having flaws.

One useful technique, aside from the others mentioned in the reading, such as keeping track of environmental conditions, patterns of pixels, and frame differencing or background subtraction, I found interesting is the example of the use of a “telecentric” lens to improve the performance of certain kinds of shape-based or size-based object recognition algorithms. I have always known that every algorithm in any computer system has a distinct role. However reading about how this lens has such a meticulous and specific task in detail has taught me the importance of each algorithm in the larger scale of aiming to achieve a successful, computer vision.

Personally, a computer’s vision capacity for tracking and surveillance can be quite effective in the use of interactive art, especially when it comes to immersive experiences. Its ability to “modify physical conditions” and capturing things such as movement or gestures can be useful to create responses to human actions which can be explore in immersive installations. Hence, like many immersive experiences, these responsive systems would allow participants to enhance the value and experience, conveying a more complex and meaningful kind of interactive artwork.

Concept + Design

For this project, I wanted to go for something mystical yet down to earth. This is why I wanted to integrate “ordinary” objects such as trees, flowers, and combine them with magical designs, such as the fantasy-like structures on the background, and blue hues.

Although I am still in the process of deciding what the interaction will be for the viewers to engage with this project, I have narrowed my main ideas to two.

1. The roses will display different colors and musical tracks whenever the viewer clicks on them. For example, one rose will show a different color after the viewer clicks on it. Another will change music every time it is clicked on it. And the third one might give an inspirational message after every click. This will allow an entertaining and colorful interaction to match the tone of the sketch.
2. Another option, while less entertaining, will focus on the visual aesthetics, hence, the interaction will rely on a function that resembles a magnifying glass so viewers can take a closer look at all the objects displayed, and depending on where in the canvas they move the mouse, they will be able to listen to a different musical track.

Most Frightening/Complex Part

Although I haven’t written a code or program that can detect, prevent, or avoid specific problems or glitches, I one code I wrote to prevent the image in my canvas from having any issues is the preload function. This should allow the code to load properly before displaying the image.

// Edited Image PNG 
let palace;
function preload(){
   palace = loadImage('palace.PNG');
}

Another function I struggled to make but eventually led to a success was the custom shape, which initially was made in another sketch to define the shape of the tree. However, after I realized that I would need to move this shape in my final sketch, I introduced the translate code, along function “drawCustomShape” in order to execute the function for the custom shape and translate it in the canvas to my desired position.

function draw() {
  background(51);
  

 drawCustomShape(450, 230);
  drawCustomShape(-50, 230);

  
}


// function of custom shape (tree) + translation of position at x and y

function drawCustomShape(x, y) {
  push();

  translate(x, y);

  noStroke();
  fill("rgb(235,233,233)");
  beginShape();

  vertex(140, 95);
  vertex(140, 250);

  vertex(140, 250);
  vertex(100, 280);
  vertex(225, 280);
  vertex(225, 280);

  vertex(190, 250);

  vertex(190, 95);
  endShape(CLOSE);

  fill("rgb(32,32,228)");
  ellipse(120, 90, 170, 120);
  ellipse(180, 98, 130, 110);
  ellipse(150, 45, 140, 160);
  ellipse(200, 55, 150, 120);

  pop();
  // end of code for custom shape
}

Embedded sketch

Reflection and ideas for future work or improvements

My next steps are to find a way to display text to introduce the context and instructions for the interaction. I also plan to decide what said interaction will be based on the feedback and begin to write the codes necessary in a separate sketch before applying it to the final one. In the meantime, I will also search for the music pieces I will be using and edit them accordingly.

Furthermore, I need to plan how to include the option to start a new session without restarting the sketch. Any kind of feedback will be highly appreciated.

What’s something that drives you crazy and how could it be improved?

One aspect of mobile design that has always bothered me is the design of exit buttons on ads. Often the (x) icon is so small that even when I tap directly, I am redirected to the App Store instead. This forces me to switch back and forth between apps until I can finally close the ad. This issue becomes even more frustrating when it occurs repeatedly on the same app, making the user experience distasteful. Evidently, one of the solutions to this problem is simply increasing the size of  the “x” button. While I understand the choice of design might be on purpose as part of a strategy to encourage users to download the advertised app once they are looking at the App Store, personally this makes the advertised product or app less appealing.

How can you apply some of the author’s principles of design to interactive media?

Throughout the text, Don Norman emphasizes a few arguments that can be applied to any kind of design. One is particularly significant, I believe, that can also be used as part of the brainstorming that comes before writing a code is trying to imagine how would someone without the experience respond to the work presented. As he effectively describes, there should be a clear communication between the user and the technology in use. For example, if I make an interactive artwork, it should be clear for the user what they are supposed to do to set in motion said interaction. I know that there are displayed images or text resulting from a code and that by clicking on the canvas, some kind of reaction occurs. However, someone who doesn’t have my experience or knowledge on interactive media might not catch on what is happening. Thus, it would be necessary to make instructions for the user to understand how to process, or indicate in some other form what must be done. Norman’s arguments made me realize how often we forget that all our accumulated experiences and knowledge are not shared by anyone, and even if it might seem unnecessary for ourselves, we must find ways to let a designed programs be accessible to a broader audience.

Concept + references

Lana Del Rey – Young And Beautiful (Lyrics) – Youtube

This piece was inspired by the landscapes that are usually used for some songs when a person wants to look at the lyrics, and I thought it would be a nice idea to explore with the generative text output. Although the parameters and functions used are very similar to the ones we learned in class, I tried to make changes to the structure of the text, as well as its position in the canvas, the background, and the color of the text. Overall, the generative text output resulted from a combination of words which I found most “romantic” and appealing, while also integrating a sense of “discomfort” laced within the text.

Highlight code

As previously mentioned, most of the codes are drawn from the ones learned in class. Despite this, my favorite code I incorporated into this project was the use of random text color and the gradient color background. These codes allowed me to 1) set a random change of color of text that adjusts to the random changes of the words for each sentence, and 2) create a gradient color background to resemble a sunset.

// This function is to make the background colors gradient
let c1, c2;


function setup() {
  createCanvas(400,400);
   c1 = color(240, 0, 110); // Red
  c2 = color(240, 120, 0); // yellow
  // setting the function so that the colors are displayed 
  
  
  
  // Number of lines (2)
print('The number of lines:' + strings.length);
print(strings);
  
}


function draw() {
  background(255);
  
  
  // mapping the text from excel to the canvas
  for (let y = 0; y < height; y++) {
        let n = map(y, 0, height, 0, 1); // Scale y to a 0-1 range
        let newColor = lerpColor(c1, c2, n); // Interpolate between colors
        stroke(newColor);
        line(0, y, width, y); // Draw a horizontal line
      }

  // random function for text color
    // these are random RGB values
  let r = random(255);
  let g = random(255);
  let b = random(255);

Embedded sketch

While this project was able to fill the basic requirements for a generative text output, I wish I could have been more creative and explore a different and more interactive way of displaying the text. For future works, I will try to research in advance how to implement interactivity while also taking in consideration the time needed and if the techniques I found are accessible to my level of experience.  Nevertheless, I do appreciate the visual aspect of the work, and believe it adjusts to my initial vision of how I wanted the outcome to be.

Concept + references

For this artwork, I was actually inspired by the composition of Still-life, a genre of art in which the artist focuses on applying an outstanding level of detail to an arrangement of everyday objects. One of the most popular choices for this genre are the paintings of fruit, which I decided to feature in my work. However, I decided to display these with their most fundamental structure, lacking any of the depth or level of detail found within the Still-life. After this, to exercise the use of the arrays, and object-oriented programming, using as inspiration one of the array functions I found in the section of Array Functions on p.5 j.s tutorials, I decided to create a trail for one of my favorite fruit, the watermelon.

Array functions

Highlight code

Although the watermelon trail is the most eye-catching, interactive, and unique code in this entire work, the code I am actually most proud of are the ones that make up the functions for my fruit. It was fun to create these functions and later simply add the berry(x coordinate, y coordinate) under the function draw() as well as for the apples, since not only did this process make it easier to make multiple copies, but it was nice to see objects of my own creation as part of the objects as if they were another primitive shape we can use whenever we want.

function apple(x,y){
  fill(200,40,50);
  ellipse(x,y,35,35);
  fill(0);
ellipse(x-1,y-10,10,8);
  //stem
  fill(50,190,40);
  rect(x-3,y-25,4,15);
 
}

function berry(x,y){
  fill(70,40,190);
  ellipse(x,y,15,15);
 
}

Embedded sketch

Reflection and ideas for future work or improvements

Although I am happy with the results, I wish I could understand more properly how the function of the trail works so I could make it smoother even if I move the mouse faster. Also, I would like to learn how to make more than one form of interactivity at a time, since I also wanted the rest of the fruit to fall down the canvas while the watermelon remained interactive for the viewers. Despite this, I learned the advantages of creating one’s own functions, how arrays can provide a a¿variety of  interactive outcomes, and how all of these elements compliment each other to make the final piece more engaging.