week11.assignment – Serial Communication

Exercise One – Ellipse Movement with Sensor

In this exercise, I decided to use the light sensor to control the horizontal position of the ellipse in the center of the screen by mapping the serial values of the light sensor to the y position of the ellipse.

let yShift = 0;
let alpha = 255;


function setup() {
  createCanvas(640, 480);
  textSize(18);
}

function draw() {
  
  background(205);
  
  ellipseMode(CENTER);
  ellipse(width / 2 , height/2 + map(yShift, 0, 1023, -255, 255), 50, 100);

  // the other value controls the text's transparency value
  fill(255, 0, 255, map(alpha, 0, 1023, 0, 255));

  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
    

    // Print the current values
    text('yShift = ' + str(yShift), 20, 50);
    text('alpha = ' + str(alpha), 20, 70);

  }

function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}

// This function will be called by the web-serial library
// with each new *line* of data. The serial library reads
// the data until the newline and then gives it to us through
// this callback function
function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////

  if (data != null) {
    // make sure there is actually a message
    // split the message
    let fromArduino = split(trim(data), ",");
    // if the right length, then proceed
    if (fromArduino.length == 2) {
      // only store values here
      // do everything with those values in the main draw loop
      
      // We take the string we get from Arduino and explicitly
      // convert it to a number by using int()
      // e.g. "103" becomes 103
      yShift = int(fromArduino[0]);
      alpha = int(fromArduino[1]);
    }

    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    let sendToArduino = "0,0" + "\n"; 
    // we dont need arduino to recieve anything so we can send empty         
    // information
    writeSerial(sendToArduino);
  }
}

 

Exercise Two – LED Brightness Control from Arduino

Yet again, I decided to repurpose the previous code and modify it so that now P5 would send data to the Arduino, but it doesn’t need any data from Arduino.

function setup() {
  createCanvas(640, 480);
  textSize(18);
}

function draw() {
  
  background(205);

  // the other value controls the text's transparency value
  fill(0)

  if (!serialActive) {
    text("Press Space Bar to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);

  }

  // when clicked, digital LED will turn on,
  // other analog write LED will have brightness corresponding to the height of the mouse when it is press. can be pressed and dragged for controlling brightness
  if (mouseIsPressed) {
      LEDbright = mouseY;
  } else {
    LEDbright = 0;
  }
}

function keyPressed() {
  if (key == " ") {
    // important to have in order to start the serial connection!!
    setUpSerial();
  }
}

function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////

  if (data != null) {
    // dont need any data from arduino
    let fromArduino = 0;


    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    
    //send the posiiton of mouseY when clicked to control brightness
    let sendToArduino = LEDbright + "," + LEDbright + "\n";
    writeSerial(sendToArduino);
  }
}

 

Exercise Three – Gravity Wind Bounce

For this exercise, I had to modify the code of Aaron Sherwood’s sketch and allow for serial communication between the Arduino and the sketch. To control the blinking of the LED, I modified the if condition, which is active when the ball touches the ground, and added a variable to turn on an LED, the right one, that is. Additionally, I use the data from the Arduino potentiometer to control the wind. A video is linked below the code.

let velocity;
let gravity;
let position;
let acceleration;
let wind;
let drag = 0.99;
let mass = 50;
let ledState = 0; // control LED when ball bounce

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 (!serialActive) {
    fill(0);
    text("Press the letter 'c' to select Serial Port", 20, 30);
  } else {
    text("Connected", 20, 30);
    applyForce(wind);
    applyForce(gravity);
    velocity.add(acceleration);
    velocity.mult(drag);
    position.add(velocity);
    acceleration.mult(0);
    ellipse(position.x, position.y, mass, mass);

    if (position.y > height - mass / 2) {
      velocity.y *= -0.9; // A little dampening
      position.y = height - mass / 2;
      ledState = 1;
    } else {
      ledState = 0;
    }
  }
}

function applyForce(force) {
  // Newton's 2nd law: F = M * A
  // or A = F / M
  let f = p5.Vector.div(force, mass);
  acceleration.add(f);
}

function keyPressed() {
  if (keyCode == LEFT_ARROW) {
    wind.x = -1;
  }
  if (keyCode == RIGHT_ARROW) {
    wind.x = 1;
  }
  if (key == " ") {
    mass = random(15, 80);
    position.y = -mass;
    velocity.mult(0);
  }
  if (key == "c") {
    setUpSerial();
  }
}

function readSerial(data) {
  ////////////////////////////////////
  //READ FROM ARDUINO HERE
  ////////////////////////////////////

  if (data != null) {
    // make sure there is actually a message
    // split the message
    let fromArduino = split(trim(data), ",");
    // if the right length, then proceed
    if (fromArduino.length == 2) {
      wind.x = map(int(fromArduino[1]), 0, 1023, -1, 1);
    }

    //////////////////////////////////
    //SEND TO ARDUINO HERE (handshake)
    //////////////////////////////////
    let sendToArduino = ledState + "," + "480" + "\n";
    writeSerial(sendToArduino);
  }
}

LED BOUNCE

Reflection

Overall, I believe that this was a great opportunity to understand how serial communication between the Arduino and P5JS works. Personally, I found these concepts quite understandable and was able to work through the exercises easily. One issue, however, that I did encounter was trying to make the LED light up when the ball bounced. Unfortunately, there is a slight delay in the Serial communication, and additionally, when the ball bounces the first few times, it bounces extremely fast, and thus, the LED blink is too fast to perceive with the human eye. Additionally, it can be seen that for the final few bounces, the blinking is also delayed.

week10.assignment – Creative Musical Instrument

Concept

For this group assignment, Shahd and I thought deeply about all the possibilities, and frankly, it was difficult to decide what to create. Nevertheless, after having a general idea of what sensors and switches we would like to implement into the project, we decided to create a “digital nature” musical instrument. Specifically, we decided to use photoresistors to measure the amount of light that was reaching our artificial flowers. If a flower is covered with a shadow, the instrument emits a lower-tone note. Adversely, if the flower were lit up with a flashlight or an LED, it would play a higher-pitched note through the piezo buzzer. We decided that the instrument would be controlled by a bee made out of cardboard on a stick that would land on the flowers and emit the “buzz.” However, during the creation of the instrument, another idea struck us, and we decided to add another way to control the instrument. For this, we decided to use the ultrasonic distance measuring sensor and make it play an octave of notes, depending on how close you place your hand, in intervals of three centimeters.

Implementation/Code

We began by constructing a basic circuit using just one photoresistor and the Piezo buzzer to see if our idea was going to work well or not. After numerous attempts to debug the code, we realized that the buzzer was not connected properly to the pin that was supposed to output the sound, so our main issue was solved. We proceeded to add an additional three photoresistors, four total, and I decided to extend their heights by soldering solid core wires to the “legs” of the sensor, varying their heights. Soon, we decided to add a toggle switch, which would transition into the second phase of the instrument, the distance sensor. Ultimately, the code was quite simple and used a variety of if conditions to control each sensor and the respective outputs sent to the Piezo. The code and video of the working instrument are below.

#include "pitches.h"

const int BUZZER = 8;
const int ECHO_PIN = 9;
const int TRIG_PIN = 10;
const int FLOWER1 = A0;
const int FLOWER2 = A1;
const int FLOWER3 = A2;
const int FLOWER4 = A3;
const int SWITCH = A5;
int flowerSound = 0;
int LED=2;
long duration = 100;

int DARK_THR = 600;

void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
  pinMode(FLOWER1, INPUT);
  pinMode(FLOWER2, INPUT);
  pinMode(FLOWER3, INPUT);
  pinMode(FLOWER4, INPUT);
  pinMode(BUZZER, OUTPUT);  
  pinMode(ECHO_PIN, INPUT);    // echo pin measure the duration of pulses coming back from the distance sensor
  pinMode(TRIG_PIN, OUTPUT);   // trigger pin output pulses of electricity
  pinMode(LED,OUTPUT);
}

void loop() {
  digitalWrite(LED,HIGH);
  int flower1 = analogRead(FLOWER1);
  delay(1);  // delay in between reads for stability
  int flower2 = analogRead(FLOWER2);
  delay(1);  // delay in between reads for stability
  int flower3 = analogRead(FLOWER3);
  delay(1);  // delay in between reads for stability
  int flower4 = analogRead(FLOWER4);
  delay(1);  // delay in between reads for stability
  int switchOn = digitalRead(SWITCH);
  delay(1);  // delay in between reads for stability

  // Serial.println(switchOn);  ///debugging

  if (switchOn) {
    //dark sensor = lower notes
    if (flower1 <= DARK_THR) {
      tone(BUZZER, NOTE_C3, duration);
    } else if (flower2 <= DARK_THR) {
      tone(BUZZER, NOTE_D3, duration);
    } else if (flower3 <= DARK_THR) {
      tone(BUZZER, NOTE_E3, duration);
    } else if (flower4 <= DARK_THR) {
      tone(BUZZER, NOTE_F3, duration);

    //bright sensor = higher notes
    } else if (flower1 >= 850) {
      tone(BUZZER, NOTE_G3, duration);
    } else if (flower2 >= 850) {
      tone(BUZZER, NOTE_A3, duration);
    } else if (flower3 >= 850) {
      tone(BUZZER, NOTE_B3, duration);
    } else if (flower4 >= 850) {
      tone(BUZZER, NOTE_C4, duration);
    } else {         
      noTone(BUZZER);
    }
  } else { // if switch is changed to distance sensor
    int distance = getDistance();
    Serial.println(distance);
    if (1 < distance && distance < 3) {
      tone(BUZZER, NOTE_C4);
    } else if (3 < distance && distance < 6) {
      tone(BUZZER, NOTE_D4);
    } else if (6 < distance && distance < 9) {
      tone(BUZZER, NOTE_E4);
    } else if (9 < distance && distance < 12) {
      tone(BUZZER, NOTE_F4);
    } else if (12 < distance && distance < 15) {
      tone(BUZZER, NOTE_G4);
    } else if (15 < distance && distance < 18) {
      tone(BUZZER, NOTE_A4);
    } else if (18 < distance && distance < 21) {
      tone(BUZZER, NOTE_B4);
    } else {
      noTone(BUZZER);
    }
  }
}

float getDistance() {
  float echoTime;                   //variable to store the time it takes for a ping to bounce off an object
  float calculatedDistance;         //variable to store the distance calculated from the echo time

  //send out an ultrasonic pulse that's 10ms long
  digitalWrite(TRIG_PIN, HIGH);
  delayMicroseconds(10);
  digitalWrite(TRIG_PIN, LOW);

  echoTime = pulseIn(ECHO_PIN, HIGH);      //pulsein command to see how long it takes for pulse to bounce back to sensor
  calculatedDistance = echoTime / 55.2;    //calculate  distance of object that reflected the pulse in cm 
  return calculatedDistance;  
}
Reflection

Ultimately, I enjoyed working on this assignment and believe that our project / musical instrument was successful in accomplishing the tasks that we wanted it to do. Nevertheless, there is much room for improvement. From a visual standpoint, a variety of different improvements could be made. For instance, creating an enclosure for the wires, Arduino, and breadboard leaving only the flowers, switch, and distance sensor for view. This would allow for the instrument to be more visually appealing. Additionally, instead of the Piezo buzzer, we could use a speaker for generating the notes more clearly, and perhaps the switch could make different types of notes (piano and guitar, etc…). There could also be a different approach in which two people can play the instrument simultaneously, but that would require 2 speakers and more complexities.

week10.reading – A Brief Rant on the Future of Interaction Design & Responses and Follow-Up

A Brief Rant on the Future of Interaction Design

In this article, Bret Victor criticizes the mainstream vision for the future of interactive and technological advancements. His main arguments stem from a video created by Microsoft, “Productivity Future Vision,” that demonstrates how people could possibly interact with technology in the future. Mainly, I can understand why Bret Victor finds this vision unnecessary, and “a timid increment from the status quo, and the status quo, from an interaction perspective, is terrible.” Taking a step back to look at the big picture, the current technologies have been mainly developed with one main purpose in mind: simplifying tasks, allowing us to get from point A to point B in a minimal amount of steps. That is most likely why “Pictures behind Glass” became such a prominent theme in 21st-century technology. Using a finger on a small glass display minimizes the distance needed to interact with the GUI, allowing the computer to perform the tasks. Therefore, it is considered efficient.

Being raised in a digital age of technology, my generation had grown up with these “Pictures behind Glass” technologies, and they have become extremely intuitive for us to understand. Bret Victor, on the other hand, grew up in a different era where these technologies have not yet been developed. I believe that is a crucial factor to consider when trying to understand his opinion about the future of interaction design. I agree with a lot of the arguments he makes about how our hands are crucial tools for understanding the world and objects around us and the digital touch displays that we are so used to removing a significant portion of digital interaction. However, it is hard to imagine how one can combine physical response with digital computations in an efficient and effective way. One example of this that I recently saw was a new project on Kickstarter where a company developed a pen that operates just as a normal pen when you write notes. However, simultaneously converts the physical ink into a digital copy to one of your devices. Ultimately, I believe that Bret Victor does make a variety of strong arguments and suggestions as to how future interactive technologies should aim to perform, but I also believe that his vision differs significantly from those of the newer generations.

Responses and Follow-Up

Whilst responding to the most common questions and suggestions about the article, I believe that Bret Victor was able to elaborate on certain aspects of the article that were missing. For instance, he had clarified that the problem isn’t that these superficial ‘touch-screen’ technologies are prominent now, but rather he is worried that if we don’t address the need for more “hands on” interaction, then the future interaction designs will not be up to his ideology of what they should be. And with that, I can agree. Specifically, had had also mentioned the ideology from parents that their children can interact with an iPad but cannot tie their own shoelaces. I believe that this is actually a significant problem that we face in our societies. Each year, children are introduced to these technologies at a younger age than before, and consequently, their brains develop substantially differently from ours. There are two ways to look at it. For instance, if a child is neglected by their parents and is given a device to entertain themselves, the child will consequently search for comfort and entertainment in the digital realm. What makes this scary is that the companies that develop the applications that kids love so much have no interest in providing tools to better educate and help with the healthy mental development of children, but rather all they care about is their annual revenue. This leads to children adopting and forming bad habits through constant device usage and lack of physical hands-on interaction.

I believe that Victor’s responses helped me understand his perspective more thoroughly and consequently agree with his ideas. As humans, we love to simplify and make our daily lives for efficient, from the development of cars to get around faster to the development of modern smartphones to perform the equivalent of hundreds if not thousands of separate tasks from a few decades ago, all with one device. Of course, for mature individuals, these tools can be seen as a blessing in saving our precious and finite time left, but I believe they pose a much greater risk for the generations that are to come after us. As Victor deliberately mentions, our hands allow us to better understand the world around us, and when we teach our young ones to neglect the full potential of their hands and envision a future where even less tactile interaction will be better, I come to realize how unsettling the next decades can be.

week9.reading – Physical Computing’s Greatest Hits (and misses) & Making Interactive Art

Physical Computing’s Greatest Hits (and misses)

In this article by Tigoe, a variety of different examples of ‘physical computing’ projects are discussed and lightly analyzed. I believe that this article is particularly useful for us Intro To IM students in order to start thinking about various ideas we might have for our final projects and how we could implement our ideas into action. It is also highly helpful that in the article, Tigoe also provides a simple explanation of how each of the provided examples most likely works.

Additionally, I think the first statement of the article is crucial for individuals to not easily give up on their project when they are just getting started. Tigoe writes, “Sometimes when people learning about physical computing hear that a particular idea has been done before, they give up on it, because they think it’s not original. What’s great about the themes that follow here is that they allow a lot of room for originality.” This statement precisely encourages everyone who is interested in physical computing not to get discouraged just because something has been done before but rather explore the possible options to make it original. As for myself, I have not yet decided on what type of final project I might be making but I will surely use this article as a resource for more ideas and brainstorming.

Making Interactive Art: Set the Stage, Then Shut Up and Listen

In this different article from Tigoe, the presentation of an interactive artwork is discussed. The article is well structured and explains at first the common misconceptions newcomers to the field might face because of what we were taught about art in school. Then the article goes on to discuss a perspective on how an interactive artwork or environment must function. Even though this is subjective to each individual, I believe the provided formula is a great framework for how these types of projects must be structured. This article is highly complementary to the article discussed above, and I believe it gives us a thorough perspective on how we should approach our future projects in interactive media.

What I found interesting, though, is that there are multiple factors that might not have been mentioned. Ultimately, is it accurate to assume that the majority of people will have mixed reaction. As noted in the article, I believe that the context and the environment in which the media is presented is a high contributing factor to the overall experience of the audience. I think that cultural context can have a significant effect on how the installations might be interpreted. This is most likely not the case for us university students as we are highly integrated with our current environment, but for bigger projects, the artists might want to consider how the geographical location might affect the experience they are trying to provide. Nevertheless, I believe that overall this article is highly beneficial for us to understand how we should structure and organized a interactive media project or experience.

week9.assignment – Too Close!

Concept

When we first started working with the Arduino, I was intrigued by learning about how certain sensors work. Last year, I used an Ultrasonic Sensor for an experiment for my physics class, and once I discovered a similar but less advanced sensor in our Sparkfun kit, I was eager to understand how it functions. Additionally, since the assignment required us to use LED, I came up with an interesting idea. Similar to how a park-assist sensor works to determine the distance between the car’s bumper and a wall, I decided to use the sensor to determine how close an object is and consequently alternate the brightness of an LED based on how far away the object is. Since we hadn’t learned about the HC-SR04 distance sensor, I looked through Sparkfun’s guide, where every element of our kit was explained. There, I found a good example of how the sensor functions.

Implementation

Initially, the process seemed quite simple: connect the sensor to the breadboard, use the jumper wires to connect it to the Arduino, and use the information gathered by the sensor to manipulate an LED connected to a PWM pin, which would allow me to use analogWrite. However, as I quickly discovered, it is vital to be precise in every component of the circuit. Accidentally, I managed to overload one of the LEDs I was using, consequently burning it. I am still unsure where the issue was; however, I suspect it could’ve been the cathode of the LED which was very close to the resistor. If it had accidentally touched the starting part of the resistor, the current would jump straight into the LED before it went through the resistor and thus burnt the LED. Nevertheless, apart from this minor issue, everything else worked well and after tinkering around with the code, I was able to produce exactly what I had envisioned. One of the two LEDs was multipurpose. It can be turned on using the button (digital switch) and controlled in a digital fashion. Additionally, that same LED circuit is also connected to a different pin, which allows it to turn on once the distance sensor value exceeds a certain threshold. One other issue I encountered was with converting the data from the analog sensor into understandable units. The example provided by Sparkfun used inches as their units; however, I decided to use a ruler and experiment with the math to adjust the sensor to be accurate using centimeters. Two videos of the working project and the code are below:

Distance Detector Video

Digital Switch

const int ECHO_PIN = 12;       //input, collects data from waves
const int TRIG_PIN = 11;       //output, sends out the waves

const int RED_LED = 8;         // red to light up when objects close
const int YELLOW_LED = 6;      // yellow to fade if object getting further

float distance = 0;            // variable to store distance

void setup() {
  Serial.begin (9600);         // set up a serial connection with the computer

  pinMode(ECHO_PIN, INPUT);    // echo pin measure the duration of pulses coming back from the distance sensor
  pinMode(TRIG_PIN, OUTPUT);   // trigger pin output pulses of electricity

  //set LED pins to output
  pinMode(RED_LED, OUTPUT);
  pinMode(YELLOW_LED, OUTPUT);
  pinMode(PUSH_BUTTON, INPUT_PULLUP);
}

void loop() {
  distance = getDistance();   //variable to store distance measured by the sensor in cm

  Serial.print(distance);     //print the distance that was measured
  Serial.println(" cm");      //print units after the distance

// if conditional to control LED's depending on distance.
  if (5 <= distance && distance <= 30) {
    int brightness = map(distance, 5, 30, 255, 0);
    analogWrite(YELLOW_LED, brightness);
    digitalWrite(RED_LED, LOW);
    Serial.println(brightness);
  } else if (distance < 5) {
    digitalWrite(RED_LED, HIGH);
  } else {
    analogWrite(YELLOW_LED, 0);
    digitalWrite(RED_LED, LOW);
  }
}

float getDistance() {
  float echoTime;                   //variable to store the time it takes for a ping to bounce off an object
  float calculatedDistance;         //variable to store the distance calculated from the echo time

  //send out an ultrasonic pulse that's 10ms long
  digitalWrite(TRIG_PIN, HIGH);
  delayMicroseconds(10);
  digitalWrite(TRIG_PIN, LOW);

  echoTime = pulseIn(ECHO_PIN, HIGH);      //pulsein command to see how long it takes for pulse to bounce back to sensor

  calculatedDistance = echoTime / 55.2;    //calculate  distance of object that reflected the pulse in cm

  return calculatedDistance;               //send back calculated distance 
}
Reflection

Overall, I found this experience to be extremely useful and crucial in understanding how to find information about new sensors and objects I could use for future projects, as well as understanding how to structure the code for the collection of sensor data. I also found it extremely helpful to print out the values of the sensor to help me adjust the math calculations, which is common practice I used in P5JS to determine if everything was working well, and it translates well into the physical computing environment.

week8.reading – Attractive Things Work Better & Her Code Got Humans on the Moon

Attractive Things Work Better – Donald A. Norman

In this preview of Don Norman’s forthcoming book, Norman writes about the implications of pleasurable and attractive design on human interaction and functionality with certain elements. His first example of the three types of teapots concisely demonstrates different balances of the two main aspects of an object’s design and functionality. Whilst some objects might have a ‘negative affect’, (negative visual response to an object being unattractive), they might still be completely functional. Nevertheless, Norman’s research suggests that these negative responses can “make simple tasks more difficult” and, conversely, with a positive ‘affect’ “difficult tasks more simple.”

By the end of the article, I have mostly agreed with Norman, however, I believe that there are a few considerations he did not mention. For the most part, I agree that if an object is ‘attractive’ and equally functional, it is far better and more understandable than one that is ‘unattractive’ yet equally functional; this idea can stem back to the previous reading of the Design of Everyday Things. Nevertheless, what Norman did not mention is that in certain circumstances, humans prefer a challenging design. For instance, physical puzzles can come in many shapes and forms but are usually confusing to humans at first sight, which could be considered ‘unattractive.’ Nevertheless, most people would prefer to attempt the challenge of solving the said puzzle and try to work through the solution. Of course, these things are designed to be difficult, but they might contain a simple solution. This would support the idea that a challenging design can complicate the tasks at hand, however, depending on the context, I believe that this could be beneficial and even pleasurable to us humans.

Her Code Got Humans on the Moon – Robert McMillan

In this WIRED article, McMillan writes about Margaret Hamilton, the woman who wrote code for the first-ever Apollo mission, which brought humans to the moon. In the article, numerous quotes from Hamilton are given, describing her experience in creating the highly sophisticated program and how she managed to do it.

I found it highly interesting learning that a young mother, working for MIT, was able to accomplish and build such a significant part of the world’s history, and it just goes to show that you can do anything you put your mind and heart to. Due to the widespread stereotypes about ‘men ruling the tech industry,’ it is refreshing and intriguing to learn that women played a much more significant role than most of us realize in the creation of the so-called “tech-run world” that we live in. The article also emphasizes the importance of error prevention, which was a significant issue on the Apollo 8 mission when all the navigation files were deleted due to the program P01 being launched. This instance reminded me of a video I recently saw which described why Japanese cars are considered more reliable than German cars. It is because Japanese engineers consider all cases and expect that the users won’t follow every instruction by law, where as German engineers construct cars that will work perfectly well if used as intended, but can quickly break if misused. Similarly, as a programmer and software engineer, I believe it is important for programmers to consider all cases, however as we know by the frequent bugs and crashes we experience, we all make mistakes.

week8.assignment – Creative With Switches

Concept

Since this is the first time I get to work with electric components, specifically the Arduino Uno, I am excited to explore all the possibilities with physical computing and circuit design. For the first assignment using the Arduino, we were tasked to come up with a creative switch, a physical component that opens and closes the circuit, without the use of our hands. The concept that I came up with was to create a switch that completes the circuit when you bend your arm in and flex your bicep.

Process

Accomplishing this switch was slightly more challenging than anticipated, At first, I realized that the wires given in the starter kit were not long enough, to comfortably create connective pads. Additionally, I tried to use conductive fabric, however, the tape I had would not hold it in place properly. Finally, I decided that it was best to use two aluminum foil pads for creating the connection. A video of the working switch is attached below.

VIDEO FOR SWITCH

Reflection

Overall, with my limited knowledge of circuit design and lack of certain supplies, I believe that I could have created a better switch. Nevertheless, since this is my first time working with these concepts, I am proud of the switch I created, and I believe it is a fun way to connect a circuit. On a side note, even though the circuit was only 5V, it still gave me a weird sensation on my skin as the current was trying to pass through me. I look forward to working on more complex projects involving the Arduino.

Midterm.Project – “No Way Out”

Link to the sketch: https://editor.p5js.org/oa2302/full/Yn69_3-Qb

Concept:

The overall concept for my midterm project I have described in my first progress post regarding this assignment. I was inspired by another student’s project, as well as reminiscent of the 2D mobile puzzle games that I loved to play, and thus, I decided to create my own puzzle game. I think puzzle games are meant to be mysterious and invoke a lot of thinking in order to solve them, and thus, when I initially planned on what my midterm would be, I was highly ambitious. Nevertheless, I am extremely happy with the outcome, and exploring this type of concept, though challenging, was highly engaging and fun for me.

Though I initially planned to do 4 different puzzles, as I was creating the first puzzle, I realized that creating 4 different ones was not a task I could do in such a short amount of time. Nevertheless, I chose two puzzles that I could make work well with my beginner coding experience. These two puzzles are finding the differences and solving a riddle. Once these two puzzles are solved, the indicators above the door will turn green, and the door will open, signifying you have won.

What really made this project take so long for me was the fact that I decided to draw each element and scene by hand, and thus, creating each required scene took much more time than it could’ve if I had just used images from the internet. Nevertheless, this makes my work original and authentic.

Process / How It Works:

I began by creating 2 main scenes in a digital drawing application on my iPad. I drew an introduction screen where I would generate the title, start, and instructions buttons. Then, I designed the game scene, focusing on a nearly monochrome 2D scene. Since I wanted each element in the game to be interactive, I decided to draw each element in a separate layer, and then create a button using a transparent PNG file for just that object. Similarly, I created the start and instruction buttons. I also created a state machine using if conditions and constant variables, which allows you to travel between a zoom-in of each object or the main game screen.

The code I am most proud of is most likely breaking every part of the game into pieces, which I made into functions, and thus, my actual function draw() loop only contains the if conditions.

//state machine using if conditions and the infinite draw function loop
function draw() {
  if (state == INTRO_SCREEN) {
    introScreen();
  } else if (state == RULES_SCREEN) {
    rulesScreen();
  } else if (state == GAME_SCREEN) {
    mainMusic.amp(0.4);
    gameScreen();
  } else if (state == PLANT_ZOOM) {
    showPlant();
  } else if (state == PAINTING_ZOOM) {
    showPainting();
  } else if (state == CLOCK_ZOOM) {
    showClock();
  } else if (state == BOOKS_ZOOM) {
    showBooks();
  }
}

function introScreen() {
  //show or hide buttons
  startButton.show();
  rulesButton.show();
  backButton.hide();
  backToGameButton.hide();

  //hide objects
  exitDoor.hide();

  //main
  image(startBG, 0, 0);
  push();
  fill(20);
  stroke(200);
  strokeWeight(5);
  textFont(font1B, 190);
  text("NO WAY OUT", width / 2, 290);
  pop();
}

function rulesScreen() {
  //show or hide buttons
  startButton.hide();
  rulesButton.hide();
  backButton.show();

  //hide objects
  exitDoor.hide();

  image(startBG, 0, 0);
  push();
  fill(20);
  stroke(200);
  strokeWeight(5);
  textFont(font1B, 150);
  text("INSTRUCTIONS", width / 2, 290);
  pop();
  push();
  strokeWeight(20);
  stroke(200, 200, 200, 100);
  fill(125);
  rectMode(CENTER);
  rect(width / 2, 550, width - 100, 310);
  pop();
  textFont(font1A, 30);
  textWrap(WORD);
  text(instructions, width / 2, 450, width - 170);
}

function gameScreen() {
  //hide buttons
  startButton.hide();
  rulesButton.hide();
  backToGameButton.hide();
  answerInput.hide();
  submitButton.hide();
  difference1.hide();
  show_difference1.hide();
  difference2.hide();
  show_difference2.hide();
  difference3.hide();
  show_difference3.hide();
  difference4.hide();
  show_difference4.hide();

  //show all objects
  exitDoor.show();
  plantPot.show();
  clockButton.show();
  booksButton.show();
  paintingButton.show();

  //background and above door indicator
  image(gameBG, 0, 0);
  image(indicator, 257, 175);
  let indicator1 = new Indicator(300, 210);
  let indicator2 = new Indicator(380, 210);


  if (puzzle1solved == true) {
    indicator1.setCorrect();
  } else if (puzzle2solved == true) {
    indicator2.setCorrect();
  }
  indicator1.display();
  indicator2.display();
}
Reflection:

Overall, I believe that this midterm project has been a major milestone in my journey of learning how to code. Ever since I was small, I always dreamed of being able to create games and about all the endless ideas I had. Finally, I can proudly say that I am on the track to fulfilling my dream. Additionally, I believe that by creating all my elements as buttons, it was much easier to manipulate when they were shown and hidden. I am sure this can also be done in many other ways, and I will explore those when the right time comes. Nevertheless, the main issue I faced was expecting too much from myself. I spent over 10 hours in total, drawing, coding, and figuring this game out, however I was unable to reach the goal of 4 different puzzles. I also found it challenging to create puzzles, such as a sudoku, within this game. Nevertheless, I am extremely happy with the final result.

week5.reading – Computer Vision for Artists and Designers

In his article Computer Vision for Artists and Designers, Golan Levin writes about the progression of computer vision and how it has played a crucial role in shaping what we perceive to be interactive tech, art or not. It is interesting to acknowledge that prior to people experimenting with using computer vision for artistic endeavors, the “application development for computer vision technologies, perhaps constrained by conventional structures for research funding, has generally been limited to military and law-enforcement purposes” (Levin). Nevertheless, in our fast-paced and exponentially growing society, it is bizarre to note that with each decade, our computer vision capabilities expand vastly.

In his article, Levin demonstrates multiple examples of where computer vision met artistic and interactive ideas, all ranging in creation times spanning the past few decades. Levin also focused on the different techniques that are used to allow the computing of visual files, mainly by pixel analysis, and this led me to reflect on how, throughout my childhood, we took these technologies for granted. When I was 10, like any other young aspiring boy who liked to play video games, I dreamt of creating the perfect set-up to record myself playing my favorite games. Green screens were extremely popular during that time amongst various creators, and they allowed them to capture and project only the subject of the video onto a different layer. This effect was ultimately used to achieve a better immersive experience for the viewers; however, it is only now that I realize how these applications function and what algorithms and processes are involved to create the seamless effect of being able to change your background. And with each month, we see more implementations of these techniques; for instance, Zoom allows people to change their backgrounds, even without a proper green screen.

In conclusion, I believe that it is a fascinating topic for many to explore, and understanding the complexities behind all the computer vision algorithms is substantially brought into a simpler context in Levin’s article.

week5.assignment – Midterm Project Progress

Concept Design

As we were looking at previous Midterm projects in class, one of them reminded me of a type of game I used to highly enjoy. The project that reminded me of this was the Coffee shop experience. A few years back, I really enjoyed playing mobile 2D puzzle / escape room games, which had a very similar structure to how the Coffee shop experience functioned. You would be able to zoom into certain parts of the walls, where the objects were placed, and solve interactive puzzles, which would eventually lead to you figuring out some final code to opening the door and passing the game. Thus, I decided that I would attempt and create a virtual 2D escape room game of my own. I am still debating on whether I should create the images myself or find references online. I began by sketching out two versions of how I would want the game to function.

 

 

 

 

 

 

 

I am still not fully decided on the overall theme of the experience/puzzle game; however, I will shortly begin sketching possible ideas for the visuals and take it from there.

Code Design

In order to piece all of the walls and “zoom-in puzzles” together, I am sure that I will need to come up with some sort of layers and switch them according to some indicators.

As of now, I think the best approach for this would be to create a class that would help differentiate between the different scenes. Additionally, I need to consider where I will include each of these elements:

  1. At least one shape – Perhaps the door, maybe create shapes as objects underlying the images for them to detect if they are being selected
  2. At least one image – Images for puzzles, keys, characters, background, etc.
  3. At least one sound – Some theme song playing in the background.
  4. At least one on-screen text – One of the puzzles will be a riddle which will include on-screen text.
  5. Object-Oriented Programming – I will create a “Layer Manager” class which will help me switch to different layers, such as the overall wall view, zoom into a specific puzzle, etc.
Frightening Concepts

Since I have not yet tried creating objects that are clickable, I believe that this aspect, along with switching views, will be the most challenging for me. In order to overcome this, I will try to research methods of how I can implement this. I have a few ideas about how I can create clickable objects, and I will create a tester p5 sketch, where I will try to implement all of these concepts, which are complex to me. After I am able to make sure that they work well, I can then confidently add them to my midterm project.