A. Behind the Screens – Anita Luo & Kiana Ng – Inmi Lee
Front view:
Source: Own Image
Side View:
Source: Own Image
Back view:
Source: Own Image
B. CONTEXT AND SIGNIFICANCE
Behind the Screens was impacted by Kiana and my experience of making Emote Gloves in which the user uses gloves with flex sensors to control a headband that displays emotes. How each finger is bent and its combination will determine where the servo motor will rotate. Firstly, we were inspired by the narrative behind the project. Interaction, according to Chris Crawford, involves the cyclic and collaborative interplay of stimulation between two or more things. It can be illustrated as the conversation between two actors that “alternately listen, think, and speak”— the degree of their interaction is determined by the quality of each of these communication steps (Crawford 3). Through our experience, quality in this context does not only refer to the effectiveness of different senses and perceptions but also the unique lesson and takeaway that these interactions bring: an interaction that has good quality has a compelling storytelling factor. For example, the Emote Gloves illustrate the translation of hand gestures to visual data which allows the user to contemplate the significance of visual communication–especially in the context of accessibility tools. On the other hand, Behind the Screens is built on the narrative that the user is controlling a Looney Tunes scene between Wile E. Coyote and the Roadrunner. What is significant about our current project is the intentions behind the design. In this new digital age where speed is encouraged, we wanted to focus on the frame-by-frame consciousness in which the user feels the energy, effort, and collaboration needed to produce a scene on screen–by taking them behind the scenes. To improve the interaction, we added another layer in which the project also becomes the means of allowing two actors to talk, think, and speak to each other and not necessarily operate as one of the interlocutor. This is encouraged by the game-like setup and the need for the input of both users to elicit a response in the project. The target audience is niche; the project is neither a tool nor an actual game but stands alone as a conceptual art piece. The users are those who are interested in the narrative of this artwork.
C. CONCEPTION AND DESIGN
Initial Conceptual Drawing:
After reading The Design of Everyday Things (2013) by Don Norman, we understood the importance of having an appealing design on the visceral level. Thus, we ensured that the design was characterized by many organic lines (such as the curved corners of the television) and cardboard. Organic lines, we believed, were more soothing and welcoming to the viewers’ eyes. We selected cardboard as our main material because the all-cardboard visual best suited our project purpose–the project aims to offer a glimpse into the 1950s and evoke nostalgia. Cardboard was also encouraged for the project by the professors so we did not consider other options. Furthermore, other visual design decisions included the subject matter: Looney Tunes’ Wile E. Coyote and the Roadrunner are well-known icons of the 1950’s retro scene. Through the subject matter, we wanted to draw the audience’s attention. Additionally, the television would spark familiarity within the viewers which elicits curiosity. Buttons tackled the behavioral component of the design as we believed that users could subconsciously press them through common knowledge and practice. Other options were rejected as they were not suitable to be placed in the context of a television. The overall experience is curated, through an interplay between the narrative and design, for the reflexive part of the project.
*Above is the revised conception and design. Our initial idea in our Midterm Proposal adopted many adaptations which will be discussed in FABRICATION AND PRODUCTION.
D. FABRICATION AND PRODUCTION
Materials
- 1x Breadboard
- 1x Arduino Uno
- 1x USB Cable
- 2x Stepper motor (42STH33-0404AC)
- 2x Stepper Motor Driver Module with Barrel Jack Connector pre-connected
- 2x Shaft adaptor
- 1x 12 Volt Power Supply
- 1x USB Protector
- 1x Buzzer (Speaker)
- 2x 10 kOhm Resistors
- 2x Arcade Buttons (one per person)
- A handful of M/M and F/M jumper cables
- 1x Box cutter knife
- 1x Ruler
- 1x Hot glue gun
- 1x Cardboard sheets
- An array of acrylic paint
- Paintbrushes
- 1x Scissors
- 1x Wire cutters
- 1x Cutting board
- 1x Masking tape
- 1x Marker
Not included anymore:
- 1x Paper template
- 1x Glue stick
- 2x Rivets (paper fasteners)
- 2x LEDs
Building the Circuit (Anita)
Step 1: Race the Led
I first built the circuit following Race the Led. At first, the Roadrunner was set at a constant back-and-forth movement on a separate Arduino using a sketch with random(). Only the coyote determined the distance between the two characters in the main Arduino. However, during user testing, users were confused by the feedback they received. Thus, we decided to add both stepper motors in one Arduino and sketch so that both characters were responsive to the button presses.
Source: tinkercad
Step 2: Adjusted circuit with 2 stepper motors
For the new circuit, we incorporated both stepper motors and also removed the LEDs as we believed that this indication of a winner hindered the concept of the project–we did not want to suggest to the users that the project was solely a game.
New circuit:
Made with circuit-diagram.org (stepper motor symbol may not be accurate due to the limited symbol library on the website)
Lookback: I used masking tape and marker to label each wire. When the circuit became more complex, this strategy assisted me to make sense of the circuit and its components.
I also soldered wires to connect both stepper motor driver modules to one 12V power supply.
Obstacle: Later when Kiana and I started coding there were a few instances when the Arduino would abruptly disconnect. One reason was that we did not connect the circuit properly. We solved this problem by using the examples for analog and digital reading in Arduino to check each component’s connection. However, there were other reasons that we could not explain–the servo motor would not move despite being well-connected and coded. As a result, we removed the “Game Over” sign that would rotate down on the screen because it caused the Arduino to persistently disconnect.
Disconnecting problem:
Checking components using readings:
Servo motor not moving properly:
Solutions:
Building the prototype (Anita and Kiana)
Step 1: Building the Television
Following the diagram we drew in the proposal we cut out cardboard, painted a white base (for vibrant colors), painted color, and stuck the pieces together. For the antennae, we created a taco-shaped cardboard and twisted and soldered wire.
Lookback: Although we did not encounter any issues, it is recommended to indicate measurements in the sketches during the planning phase to prevent any potential miscalculations.
Step 2: Building the Stage
We were inspired by retro Hollywood sets with cardboard props. Thus, we cut and painted each layer of the background as well as the ground and sky.
Step 3: Making Wile E. Coyote and the Roadrunner
Using a frame from a Looney Tunes scene, we traced, cut, painted, and lined each character.
We stuck these on our stepper motors (explained later).
Step 4: Assemble
Obstacle: We decided not to add rotating legs (controlled by servo motors) as we were afraid that the wire attached to them would jam the track of each character.
Step 5: Button
Instead of putting the button on the television as seen in our initial sketch, we decided to extend it outwards to prevent potential damage to the circuit hidden at the base of the television as the user pushes the button.
Step 6: Adaptations after User Testing
Kiana and my initial idea was to create an interactive multiplayer game that introduces nostalgia and childhood recreation. Two users will recreate a Looney Tunes scene, in which Wile. E Coyotes chases the Road Runner, while simultaneously competing with each other to see who can press their respective buttons faster. However, after the user-testing session in class, we found many drawbacks to our design. Firstly, we followed the circuit and code of Race the Led as the basis of our game. Yet, we needed to code a game with a beginning, middle, and end, and incorporate music, a point system, and visual progress to enhance the gaming experience from feedback. Coding this was out of our scope in the course–for example, we had not learned the “for” loop yet to move characters forward in increments. Unfortunately, due to time conflicts and time constraints, we knew that asking for assistance would be problematic and time-consuming. Thus, we limited our design by transforming it into a conceptual work. However, we did incorporate sound and faster feedback as suggested in user testing.
To incorporate sound, we coded for a buzzer to play a shorter version of the Looney Tunes Main Theme Song to indicate the end of the scene. We also ensured the buzzer was protruding out of the television so that the sound could be heard clearly.
We ensured faster feedback to confirm the user’s expectations by changing the initial stepper motor mechanism to a belt mechanism. The belt mechanism ensured faster and bigger movement. Furthermore, we added hot glue grips so that the friction between the stepper motor and the cardboard belt could create precise movement. Alternatively, we could have bought a pre-made belt online. However, we rejected this decision because we wanted to maintain the cardboard style of the design. Almost all the visible components of the project are cardboard because we wanted to align the exterior design to the retro theme. The friction produced by the cardboard belt mechanism creates a non-mechanical sound which further supports this theme.
Initial stepper motor mechanism:
New cardboard belt mechanism:
Secondly, we included a sign that read ” 2 PLAYER/Recreate a Scene!” to suggest to the audience the co-op framework of the project. From the user testing, we noticed that people pressed both buttons. Although we used blue and red buttons as indications of the commonly known arcade buttons for player 1 and player 2, people may not have had this background to know this.
Thirdly, user testers recommended we add lights inside the television box to enhance the visuals. Hence, we stuck spotlights at the top of the inside as follows:
Writing the code (Anita and Kiana)
We coded with the guidance of Race the Led, toneMelody, and Recitation 5.
/* Behind the Screens */ /************************************************* Public Constants, defining the pin numbers used in Arduino *************************************************/ int buzzerPin = 8; int buttonPin1 = 10; int buttonPin2 = 9; //int ledPin1 = 9; //int ledPin2 = 10; /************************************************* Public Constants, defining the notes in Hertz *************************************************/ #define NOTE_B0 31 #define NOTE_C1 33 #define NOTE_CS1 35 #define NOTE_D1 37 #define NOTE_DS1 39 #define NOTE_E1 41 #define NOTE_F1 44 #define NOTE_FS1 46 #define NOTE_G1 49 #define NOTE_GS1 52 #define NOTE_A1 55 #define NOTE_AS1 58 #define NOTE_B1 62 #define NOTE_C2 65 #define NOTE_CS2 69 #define NOTE_D2 73 #define NOTE_DS2 78 #define NOTE_E2 82 #define NOTE_F2 87 #define NOTE_FS2 93 #define NOTE_G2 98 #define NOTE_GS2 104 #define NOTE_A2 110 #define NOTE_AS2 117 #define NOTE_B2 123 #define NOTE_C3 131 #define NOTE_CS3 139 #define NOTE_D3 147 #define NOTE_DS3 156 #define NOTE_E3 165 #define NOTE_F3 175 #define NOTE_FS3 185 #define NOTE_G3 196 #define NOTE_GS3 208 #define NOTE_A3 220 #define NOTE_AS3 233 #define NOTE_B3 247 #define NOTE_C4 262 #define NOTE_CS4 277 #define NOTE_D4 294 #define NOTE_DS4 311 #define NOTE_E4 330 #define NOTE_F4 349 #define NOTE_FS4 370 #define NOTE_G4 392 #define NOTE_GS4 415 #define NOTE_A4 440 #define NOTE_AS4 466 #define NOTE_B4 494 #define NOTE_C5 523 #define NOTE_CS5 554 #define NOTE_D5 587 #define NOTE_DS5 622 #define NOTE_E5 659 #define NOTE_F5 698 #define NOTE_FS5 740 #define NOTE_G5 784 #define NOTE_GS5 831 #define NOTE_A5 880 #define NOTE_AS5 932 #define NOTE_B5 988 #define NOTE_C6 1047 #define NOTE_CS6 1109 #define NOTE_D6 1175 #define NOTE_DS6 1245 #define NOTE_E6 1319 #define NOTE_F6 1397 #define NOTE_FS6 1480 #define NOTE_G6 1568 #define NOTE_GS6 1661 #define NOTE_A6 1760 #define NOTE_AS6 1865 #define NOTE_B6 1976 #define NOTE_C7 2093 #define NOTE_CS7 2217 #define NOTE_D7 2349 #define NOTE_DS7 2489 #define NOTE_E7 2637 #define NOTE_F7 2794 #define NOTE_FS7 2960 #define NOTE_G7 3136 #define NOTE_GS7 3322 #define NOTE_A7 3520 #define NOTE_AS7 3729 #define NOTE_B7 3951 #define NOTE_C8 4186 #define NOTE_CS8 4435 #define NOTE_D8 4699 #define NOTE_DS8 4978 /************************************************* Public Variables *************************************************/ //button and count variables int goal = 15; int buttonState1 = LOW; int previousState1 = LOW; int buttonState2 = LOW; int previousState2 = LOW; int counter1 = 0; int counter2 = 0; boolean winner1 = false; boolean winner2 = false; long time = 0; // the last time the output pin was toggled long debounce = 200; // the debounce time, increase if the output flickers //stepper motor variables #include int randNumber1; int randNumber2; int CDIR_PIN = 2; int CSTEP_PIN = 3; int CEN_PIN = 4; int RDIR_PIN = 5; int RSTEP_PIN = 6; int REN_PIN = 7; AccelStepper stepperC(AccelStepper::DRIVER, CSTEP_PIN, CDIR_PIN); AccelStepper stepperR(AccelStepper::DRIVER, RSTEP_PIN, RDIR_PIN); //servo motor variables //#include //Servo servoL; //Servo servoR; // notes in the main theme melody and duration int melody[] = { NOTE_G4, NOTE_A4, NOTE_E4, NOTE_G4, 0, NOTE_G4, NOTE_A4, NOTE_E4, NOTE_G4, 0, NOTE_G4, NOTE_A4, NOTE_E4, NOTE_G4, NOTE_A4, NOTE_B4, 0, }; int noteDurations[] = { 16, 16, 8, 4, 8, 16, 16, 8, 4, 8, 16, 16, 4, 4, 4, 1 }; void setup() { Serial.begin(9600); pinMode(buzzerPin, OUTPUT); pinMode(buttonPin1, INPUT); pinMode(buttonPin2, INPUT); randNumber1 = random(0, 100); randNumber2 = random(100, 200); //pinMode(ledPin1, OUTPUT); //pinMode(ledPin2, OUTPUT); Serial.println("******************* LOONEY TUNES *******************"); delay(1000); Serial.println("READY"); tone(8, 440); delay(1000); noTone(8); delay(50); Serial.println("SET"); tone(8, 440); delay(1000); noTone(8); delay(50); Serial.println("GO!!!!!!!!!!!!!!!!"); tone(8, 880); delay(1500);a noTone(8); // Set initial speed & acceleration for stepper motors pinMode(CEN_PIN, OUTPUT); digitalWrite(CEN_PIN, LOW); stepperC.setMaxSpeed(500); stepperC.setAcceleration(300); pinMode(REN_PIN, OUTPUT); digitalWrite(REN_PIN, LOW); stepperR.setMaxSpeed(500); stepperR.setAcceleration(300); stepperC.setCurrentPosition(0); stepperR.setCurrentPosition(0); //set up servo motors // servoL.attach(11); // servoR.attach(12); // servoL.write(90); // servoR.write(0); } void loop() { buttonState1 = digitalRead(buttonPin1); buttonState2 = digitalRead(buttonPin2); //Serial.println(buttonState1); //this checks the times player 01 has pressed the button if (counter1 < goal && winner2 == false) { if (buttonState1 != previousState1 && millis() - time > debounce) { if (buttonState1 == HIGH) { counter1++; Serial.print("player 01: "); Serial.println(counter1); time = millis(); } } previousState1 = buttonState1; if (counter1 == goal && winner2 == false) { winner1 = true; // digitalWrite(ledPin1, HIGH); Serial.println("PLAYER 01 WINS"); // servoL.write(180); // servoR.write(90); delay(500); playMelody(); endGame(); } } //this checks the times player 02 has pressed the button if (counter2 < goal && winner1 == false) { if (buttonState2 != previousState2 && millis() - time > debounce) { if (buttonState2 == HIGH) { counter2++; Serial.print("player 02: "); Serial.println(counter2); time = millis(); } } previousState2 = buttonState2; if (counter2 == goal && winner2 == false) { winner2 = true; //digitalWrite(ledPin2, HIGH); Serial.println("PLAYER 02 WINS"); playMelody(); endGame(); // servoL.write(180); // servoR.write(90); } } //this prompts the two characters to move based on the number of counts of each player if (counter2 > counter1) { stepperC.runToNewPosition(randNumber2); stepperR.runToNewPosition(randNumber1); } else { stepperC.runToNewPosition(randNumber1); stepperR.runToNewPosition(randNumber2); } } void playMelody() { for (int thisNote = 0; thisNote < 18; thisNote++) { int noteDuration = 1000 / noteDurations[thisNote]; tone(8, melody[thisNote], noteDuration); int pauseBetweenNotes = noteDuration * 1.30; delay(pauseBetweenNotes); noTone(8); } } void endGame() { stepperC.runToNewPosition(0); stepperC.runToNewPosition(0); int counter1 = 0; int counter2 = 0; boolean winner1 = false; boolean winner2 = false; stepperC.stop(); stepperR.stop(); // servoL.write(180); // servoR.write(90); }
E. CONCLUSIONS
The video below is a demonstration of the final project:
Behind the Screens is a conceptual interactive artwork aimed at inviting two players to recreate a scene from Looney Tunes. As a result, users have the cognizance of the handiwork and collaboration needed to create an animation. This narrative is noteworthy during an age of digital media in which speed is favored and appreciation of details and storytelling is lost in the process. The project aligned with the dialectic definition of interaction: after receiving information from the user’s button press, the machine processes and interprets the data to produce variable results “onscreen.” The users have the opportunity to interpret the feedback. However, due to limitations and adaptations (as discussed in FABRICATION AND PRODUCTION), the audience’s susceptibility to the narrative was restricted by the deceiving game design. If we had more time, we would a) add a start button, b) add “for” loops so that players see their progress in increments, and c) add continuous background music that increases in tempo as the players reach closer to the end. Despite the short duration of the midterm project, the experience of making Behind the Screens taught me not only the practical and theoretical aspects of physical computing but also teamwork, time management, adaptation, and ambition. Firstly, I learned the importance of combined effort and cooperation to create synergy. At first, I did both the physical computing and the coding. There was continuous troubleshooting which was unmanageable to do alone. Thus, I was honest with my partner and asked for assistance–I saw a noticeable improvement in progress. Due to time constraints, delegating tasks based on strengths and weaknesses was unrealistic. Furthermore, I realized working on projects was a great way to tackle such weaknesses. Allowing my partner to attempt at previously unexposed skills also taught me patience and I believe this value is essential for all members of a team in the long run. Secondly, the execution process was nonlinear, involving a few modifications. The end product was different from the original design to a large degree. Through this journey, I understood the unpredictable but thrilling process of creativity. Likewise, the value of the end product did not outweigh the worth of the failures and successes I had along the way.
Source: https://alumni.sae.edu/2016/05/24/understanding-the-creative-process-inspiration-execution-release/
F. DISASSEMBLY:
Components:
Recycling cardboard:
G. APPENDIX
H. REFERENCES
Crawford, Chris. The Art of Interactive Design. San Francisco, No Starch Press, 2002.
Norman, Don. The Design of Everyday Things. Cambridge, MA: The MIT Press, 2013.