Assignment 6: Digital & Analog Sensor

Concept

The concept of this assignment is traffic light. In the circuit, I used red, yellow, and green LEDs to mimic the traffic light. The red and yellow LED turns on when the button is pressed and off when the button is not pressed. The green light changes its dimness according to the potentiometer. Many drivers often wish the green light to be on for a long time so that they can drive continuously through the traffic lights. So I used the potentiometer to let the green LED stay on with full dimness when all of 5V is supplied.

Code & Sketch

When creating the circuit, I focused on building the digital circuit first and then the analog circuit. In this way, I did not confuse myself and was able to make sure each component worked.

I referenced the design of the circuit for the potentiometer that I learned in class (the sketch is displayed below). Along with the design of the circuit for the potentiometer or the analog sensor, I used a very simple design for the button or the digital sensor. For both designs, I used a 330 ohm resistor because using a 10K ohm resistor was unnecessary.

Below is the code for the entire circuit. I only coded for the potentiometer because Arduino code was not needed to activate the button. The code for running the potentiometer is very simple. I initially defined a variable ‘led’ and used sensorValue to determine the brightness of the LED. I used PWM pin 11 to activate the brightness effect and delay to make the dimness effect visible.

int led = 11;

void setup() {

  Serial.begin(9600);

  //pin 11 output
  pinMode(led, OUTPUT);

}

void loop() {

  int sensorValue = analogRead(A2);
  Serial.println(sensorValue);

  // set the brightness of pin 11 according to the sensorValue and divided by 4
  analogWrite(led, sensorValue/4);

  // delay effect for 30 milliseconds to see the change in dimness
  delay(30);

}

Reflection

Creating the circuit was not difficult because most of it was materials covered in class. However, if I had to mention one slightly challenging thing, I would say it is working with tiny materials. My hand was comparatively larger than all the elements and trying to place them on the breadboard, I had to be careful to not misplace or interrupt the other elements already positioned on the breadboard.

To add on, when I first thought of this assignment, I wanted to have separate buttons for the red and yellow LEDs. However, due to the limited space on the breadboard, I was not able to do so. Therefore, for improvement, I would like to readjust the position of the elements on the breadboard so that I can fit one more button for the LED and be able to control the red and yellow LED separately.

Outcome

How the circuit works

 

 

Reading Reflection: Week 10

I liked how Tigoe described interactive art as conversation. Before I took this class, I wasn’t familiar with artworks that require the audience to interact with. Therefore, when it comes to art, I thought of paintings that simply express a thought/idea; in other words, artworks that state what the artist thinks. However, now that I have taken this class, I learned that art isn’t just about expressing the artist’s thoughts. It could be a conversation that the audience shares with the art itself. For that reason, for some artworks, the audience may not understand what the artwork is trying to deliver at first glance. Through interaction and conversation, the audience will gain an understanding of the artwork’s meaning.

Tigoe spoke to artists and asked them to shut up once they had set the initial statement so that the audience could interact through their senses. A good thing about interactive art, I believe, is that it is open to interpretation and gives the audience the freedom to expand on the meaning of the artwork. In this way, the artwork could reach a wider range of audience and be more entertaining.

An example of interactive art that caught my attention was “Tilty Stands and Tables”. This artwork required the audience to physically tilt the flat surfaces and experience the artwork’s response to the changes. Other than this, many other interactive artworks appealed to our senses. By calling the audience to physically interact with the artwork, the audience can freely interpret the meaning behind the work and add to their experiences. Now, with an understanding of what interactive art is, I am looking forward to sharing conversations with artworks and coming up with my interpretations.

Assignment 5: iPad Switch

Concept

Considering myself, I realized that people spend too much time on their electrical devices such as phone, tablet, and laptop. To encourage people to stop using their devices for unnecessary time, I created a circuit that turns the LED on when the user closes the iPad case. I intentionally used green light because green symbolizes a sign of “good” and I wanted to make the user feel good about himself when he stops using his iPad.

Process

Figuring out the the path of the current was not difficult but constructing the circuit was. I had to attach the resistor to the iPad case and two jumper wires. Locating the position of the resistor and the jumper wires on the iPad was slightly challenging because I had to find the exact position where the jumper wires and the resistor would meet. But once this was established, everything else was easy to accomplish.

The flow of the circuit looks like this: 5V – jumper wire – resistor – jumper wire – LED – GND. I tried to minimize the number of jumper wires and make a very simply circuit. I am satisfied with the design of the circuit and although it is simple, the circuit maintains to turn the LED on when the resistor and jumper wires come in contact.

The video below shows how the iPad Switch works.

iPad Switch

The picture below shows the circuit in more detail.

Reflection

One thing I do want to point out is that due to the gap between the iPad case and the iPad itself, I have to initially press on the case cover to let the resistor and the jumper wires come in contact. I wanted the LED to turn on immediately when the case is closed but unfortunately taping the jumper wires created a gap between the case cover and the iPad. However, when the case cover is slightly pressed, the LED turns on and functions well.

Also, technically I am still using my hands to turn the LED on. So for future improvement, I would like to figure out ways I could eliminate the use of hands to turn the LED on.

The picture below shows the gap between the case cover and the iPad.

 

Reading Reflection: Week 8

I have always questioned the relationship between aesthetics and usability/functionality. In many of the designs that exist, I feel like people value the appearance more than the functionality of the design. Therefore, some designs failed to fulfill the purpose they were supposed to serve. In this case, although the design adds color and taste to the environment, I feel like they are not useful since they do not satisfy the role they should.

Donald A. Norman in his writing said “Although poor design is never excusable, when people are in a relaxed situation, the pleasant pleasurable aspects of the design will make them more tolerant of difficulties and problems in the interface” (page 5-6). Although I prioritize functionality over aesthetics, I found myself agreeing with what the author said. When my emotions are chill and I am in a relaxed situation, I become more tolerant and easygoing about designs that do not satisfy my needs. Whether or not I am pleased with the usability of the design, if I am in a “good mood” I forget about the the poor design and am convinced that it is a good design. Therefore, the mood of a person plays a big role in determining the quality of the design.

Similarly, when I am in a bad mood, small issues with the design seem big and they irritate me. Just as the author said, good human-centered designs are especially important in stressful situations and designers must find ways to create designs that will not make the users want to stop using them.

In all, I realized that there are a lot of factors that we have to consider when designing. Following up with previous readings, human emotion is a factor that greatly affects the quality and usability of designs. Due to the fluctuation in human emotion, I found the designer’s job very difficult and I wonder what other factors designers consider before releasing the design to the public.

Midterm Project: Brick Breaker Game – Help the Wolf Break the House

Concept and Guide of the Game

The original story of three little pigs ends with the wolf failing to break into the brick house. The concept of my game is the opposite of this. The aim of the game is to help the wolf break the brick wall of the house and encounter the pigs. I wanted to give a twist to the original story and help the wolf win over the three little pigs. 

The game follows the same rules of the brick breaker game. But the idea is to break all the bricks using the bouncing ball so that the wolf can meet up with the pigs. Playing the game is simple. When the user clicks on the start button on the opening page, the game starts immediately. The user must use the mouse to move the paddle to bounce off the balls and break the bricks. Simultaneously, a timer runs to measure the time it takes the user to break all the bricks. The aim of this game is to break all the bricks in the shortest time possible. The timer is displayed throughout the game at the bottom left corner and the final time is displayed at the ending page that appears when the bricks are all gone. The user can replay the game by simply clicking on the replay button that navigates the user back to the opening page. 

Understanding the Overall Code

I created three classes for the game: ball, paddle, and brick. 

First, in the class Ball, I have three smaller functions: draw, move, and bounce. The functions instruct the ball to be drawn on the canvas, to animate across the canvas, and to change directions. 

Second, in the class Paddle, I drew the paddle and made it so that the ball bounces off the paddle when in contact. 

Lastly, in the class Brick, I drew the brick and used ‘if and else’ to detect the four edges of the brick. Also, I used ‘if and else’ to test if the ball and the brick collided. 

With these three classes, I called them in the main sketch and operated the game. In the main sketch, there are 9 other functions: preload, setup, startGame, draw, drawStartPage, allBricksGone, endGame, replayGame, and createTimer. There are specific instructions under each function that controls the behavior of the game. 

What I am Proud Of 

The first part of the code that I am proud of is the function for the timer. At first, I had no timer and hence the goal of the game was to simply break all the bricks. However, I realized that if there is no timer, the user is not put under any pressure to play the game well. Therefore, I decided to place a timer so that the user is pushed to play and finish the game faster. 

function createTimer() {
  //timer object with update and display methods
  let timerObject = {
    startTime: 0,
    elapsed: 0,

    update: function () {
      this.elapsed = millis() - this.startTime;
    },

    display: function () {
      textSize(13);
      textAlign(CENTER, CENTER);
      fill('black');
      stroke('white');
      textFont('Verdana');
      text('Time: ' + this.format(), width / 2 - 150, height - 10);
    },

    format: function () {
      //convert milliseconds to a readable time format (mm:ss)
      let minutes = Math.floor(this.elapsed / 60000);
      let seconds = ((this.elapsed % 60000) / 1000).toFixed(1);
      return minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
    },
  };

  return timerObject;
}

Another part of the code that I am proud of is the function for endGame. Under this function, I created a button that allows the user to replay the game. So when the endButton, which is the button used to replay the game, is pressed, the function for replayGame is operated. When the endGame function runs, the time it took the user to finish the game is displayed for the user. 

function endGame() {
  //show the end page with replay button
  background(255);

  push();
  translate(10, 50);
  scale(0.4);
  image(startImg, 0, 0);
  pop();

  //create a replay button
  endButton.show();
  endButton.position(width / 2 - endButton.width / 2, height / 2);
  
  textSize(30);
  textAlign(CENTER, CENTER);
  fill(0);
  textFont(myFont);
  text('You destroyed the house!', width / 2, height / 4 - 70);
  textSize(16);
  text('Click "Replay" to play again.', width / 2, height / 2 - 140);
  
  endButton.mousePressed(replayGame);

  //display the final time
  textSize(16);
  text('Your Time: ' + timer.format(), width / 2, height / 2 - 100);
}

Also, I am very pleased with the look of the game. The theme or the design fits well into the concept of the game and adds to the experience of the user. The picture below is the the initial design of the game. From that design, I added colors and images to add aesthetics.

Difficulty & How I Overcame It 

The hardest part of coding was using the ‘if and else’ statement to change the pages of the game (opening, game, and ending). As shown below, the code itself is simple: I just have to call the classes and functions that I created previously and use the ‘if and else’ statement to create conditions. However, for some reason I could not navigate from one page to another. Through trial and error, I was able to get it to work. 

function draw() {
  //draw the start page if the game hasn't started or if it's replaying
  if ((!ball || allBricksGone())&& start== true ) {
    drawStartPage();
  } else {
    //draw the game elements
    push();
    translate(-15, 0);
    scale(0.34);
    image(backgroundImg, 0, 0);
    pop();

    paddle.x = mouseX;

    //nested loop for creating bricks when not collided with the ball
    for (let i = 0; i < cols; i++) {
      for (let j = 0; j < rows; j++) {
        if (bricks[i][j].val == 0) {
          bricks[i][j].drawBrick();
          bricks[i][j].collided(ball);
        }
      }
    }

    //check if all bricks are gone
    if (allBricksGone()) {
      endGame();
    } else {
      //update the timer
      timer.update();

      ball.moveBall();
      ball.bounceBall();
      ball.drawBall();

      paddle.hitPaddle(ball);
      paddle.drawPaddle();

      //display the timer
      timer.display();
    }
  }
}

These are the pages in the order of opening, game, and ending.

Improvement

For improvement, I would like to enable fullscreen. As of now, the game screen is too small and the game experience would be enhanced when the game screen is larger. 

Another improvement I would like to make is displaying the record of the 5 fastest times on the ending page. In this way, the user would be more motivated to play better and faster.

Lastly, it would be more entertaining if I create a losing condition. For instance, I could make the ball not bounce off the bottom wall so that when the ball passes through the bottom wall, the time increases by 3 seconds. In this way, it would take longer and be harder for the user to complete the game.

Midterm Project Progress: Brick Breaker Game

Concept

The concept of the game is breaking the brick wall of the house of three little pigs. As of the original story, the wolf fails to break into the house of the youngest pig because brick walls are too strong. However, through my game, the wolf is able to break into the house and meet the pigs. Therefore, as the user breaks the bricks, an image of three little pigs that were hiding behind the bricks will be visible.

Design

So far, I have worked on creating the code for the bricks, bouncing ball, and the paddle. Using classes and functions, I organized the code and tried to make it look “neat”. However, I have not added any details or aesthetic to the game. Therefore, as it is shown below, the outlook of the game is quite dull.

Regarding the aesthetics, I am planning to add color and use brick png in place of the rectangles. The background will be decorated to look like the house of the three little pigs. Also, I am going to add sound effects to make the game more interesting. For the home page, I will use text for the title and create a button to start the game. I will also create an end page that allows the user to replay the game.

Difficulty 

The most difficult part in the coding process was figuring out how to make the bricks in rows and columns and make them disappear when collided with the ball. I watched and referenced this video and it was confusing for me to use the “if statements” to create various conditions. The code I used to create class brick is shown below.

class Brick {
  constructor (x, y, w, h){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.collide = false;
    this.val = 0;
  }
  
  drawBrick(){
    if (this.collide){
      fill(255, 255, 0);
    } else {
      fill (255);
    }
    rect(this.x, this.y, this.w, this.h);
  }
  
  
  collided(ball){
    //x and y cordinate of the edges of the brick to detect when the ball collides with the bricks
    let closeX = ball.x;
    let closeY = ball.y;
    
    //detecting right and left side of the brick
    if (ball.x > this.x + this.w){
      closeX = this.x + this.w;
    } else if (ball.x < this.x){
      closeX = this.x;
    }
    
    //detecting top and bottom side of the brick
    if (ball.y > this.y + this.h){
      closeY = this.y + this.h;
    } else if (ball.y < this.y){
      closeY = this.y;
    }
    
    //testing if the ball and the brick collided
    let distance = dist(closeX, closeY, ball.x, ball.y);
    
    if (distance <= ball.r){
      this.collide = true;
      this.val = 1;
      ball.dy = ball.dy * -1;
    } else {
      this.collide = false;
    }
    
  }
  
}

This is the code in the main sketch that creates the bricks in rows and columns by using arrays.

function setup() {
  createCanvas(400, 400);

  //nested loop for creating rows and columns of bricks
  for (let i=0; i<cols; i++){
    bricks[i] = [];
    for (let j=0; j<rows; j++) {
      bricks[i][j] = new Brick(i*size, j*size, size, size);
    }
  }

This is the code in the main sketch that makes the bricks appear when not collided, hence making them disappear when collided.

function draw() {

 //nested loop for creating bricks when not collided with the ball
  for (let i=0; i<cols; i++){
    for (let j=0; j<rows; j++){
      if (bricks[i][j].val == 0){
        bricks[i][j].drawBrick();
        bricks[i][j].collided(ball);        
      }
    }
  }

Other parts of the project that I am concerned about is creating the buttons for “play” and “reset”.  I have never created a button for other assignments and I will be challenging myself to create several buttons to add user interaction.

The only user interaction that is possible so far is moving the paddle with mouseX function. This is why I want to add the buttons to add more interaction and user experience.

Reading Reflection: Week 5

I was surprised by the ways in which computer vision works with interactive art. Recently, I have been interested in public surveillance and curious about the use of technology in the field. The Suicide Box was the one I thought was meaningful and useful. Recognizing suicide attempts in the Golden Gate Bridge, humans devised a machine to detect the vertical motion of people and hence make a guess on whether or not the person is about to jump off the bridge.

The debate that arose around the Suicide Box was interesting as well. The question of “is it ethically okay to record suicides” and “are the recordings real” make us think if the invention of such technology is necessary or useful. As of I know, there are still a lot of questions regarding the topic of public surveillance and the use of technology for face recognition and video recording. While I think these tools are very useful, I also understand the ethical concerns that comes with the uses of the tools.

To continue, computer vision is quite difficult to use considering the setting in which it works best. For example, background subtraction and brightness thresholding could fail if the person in the scene have similar color or brightness to his surroundings. The fact that we have to design the physical conditions in which computer visions will be used is bothering. Although computer visions in their perfect setting works well and abstracts useful information, figuring out ways to use computer vision in any setting would be even more useful and beneficial to the society.

In short, the intersectional study and use of computer vision and interactive media seems to have great potential in the coming future. Computer vision and interactive media have areas in which they can be used and the developments made so far show how life in general can advance.

Reading Reflection: Week 4

As a user of many machines, I agree with what the author said about the two most important characteristics of good design: discoverability and understanding. The example the author gave with opening doors was the one I found myself relating to. There were many doors that I encountered that gave me difficulties in figuring out what I should do in order to open the door. This touches upon discoverability that the author discussed. Some doors challenged me to try various actions (push, pull, slide) to sucessfully open the door. 

Something I noticed about modern designs is that they are drawn for aesthetics. While the designs manage to perform all the functions that they are supposed to, users often struggle to figure out how to use the design and question why they are built the way they are. Aesthetics is important, especially in the current age where people care about the looks of things. However, when it comes to creating problem in using the design, I feel like it may be better to put aside the aesthetics and focus on the functionality and accessiblity of the designs. 

To move on, the author talked about engineers being too logical in creating the designs. Because engineers who build the designs are being too logical, the machines they built are eventually also too logical for non-engineers to use. Hence this creates difficulties for the users and prevents them for using the inventions that the engineers spent time building. To fix this, I think engineers have to have the mindset of “we are building designs for people according to their ability” and not “we are creating designs for people who think like we do”. In this way, instead of having the users fit into the designs, designs will fit into humans and meet their needs. 

Overall, the reading made me rethink about designs around me and their purpose. While there are many great designs already out there in the world, I believe people can create better designs by understanding the abilities and logic of humans or the target customers. 

Assignment 4: Displaying Text

The concept of this assignment is emotions. There are numerous ways to express one type of feeling. As I saw from this website, there are 5 main emotions (enjoyment, sadness, fear, anger, disgust). I have selected 5 words from each category and generated a code that randomly selects and displays the words on the canvas. Ultimately, my goal for this assignment was to show the many emotions humans feel.

In this assignment, I used the pause code to make the artwork interactive. When the user clicks on the canvas, the randomly selected words pause and the canvas freezes. When the user clicks on the canvas again, the random generation resumes. The code below shows how I implemented it.

//when mouse is pressed, random display of words pause/resume
function mousePressed(){
  
  if(pause == false){
    noLoop();
    pause=true;
  }
  
  else {
    loop();
    pause=false;
  }

For improvement, I would like to add a reset button. I’ve tried adding the button but was unsuccessful at it. Adding the reset button would allow the users to have a more interactive experience and also get a view of the image before it gets covered with words.

click on the canvas to pause/resume the display of words

 

Reading Reflection: Week 3

The way the author defined the term “interactivity” caught my attention. To me, interactivity simply means interactions between two things or people. However, the author defined it in terms of a conversation where two actors actively take turn listening, thinking, and speaking. To further the definition, the author mentioned the role of subtasks (thinking, listening, speaking) in determining the quality of the interaction. Interactivity is not only about the interaction itself but also the subtasks that need to be well-performed to result in a high-quality interaction.

The author made an argument on what things are considered not interactive. I found myself agreeing with what the author defined as not interactive and an example given was a printed book. Although it speaks the words to the readers, it does not listen or think. In other words, the book and the reader do not alternately listen, speak, and think. In this way, the book is not interactive and hence cannot collaborate with humans, who are considered interactive.

To add on, an example of dancing as a non-interactive activity was a surprise. I thought dancing was interactive because dancers move according to the music. However, according to the author, dancing is not interactive because music is not an actor that can think and listen. It speaks the melodies and lyrics of the song but is not able to interchange with the dancer. Similarly, the movie is another subject that humans cannot interact with. Although I felt like I was exchanging ideas with the movies I watched, in fact, I was not interacting with the movies or the actors displayed in the movies.

Overall, the author’s definition of interactivity was fascinating. The author’s definition made me rethink what I consider interactive and hence how to develop good designs. While great designs can result between interactive and non-interactive actors, harmony between two interactive actors can also create designs of high quality and interest. With this reading, I will be trying to create designs that show the conversation of several interactive actors.