FINAL PROJECT

Figure 1 Sketch of the final project

The first step taken for this project was to create the initial sketch. When I began thinking about what to do, I immediately decided I wanted to blend art with the creation of a challenging game. For this reason, I decided to sketch a game where users would not only experience the machine's movements but also have the opportunity to interact with it. However, as the project progressed, it evolved in ways that were different from what I initially planned for user interaction. This step may not have resulted in the perfect sketch, but it was essential in helping me visualize my final project, which I found to be incredibly helpful. Moreover, this specific step taught me the importance of perseverance and trusting the process, even when things don’t go as expected.

Figure 3 Process of making the flowers

The next step was creating four flowers by hand. Since I had previously made handmade flowers during one of my recitations, this step felt a bit easier and more familiar. To start, I cut several fabric squares using material I found in the lab. Then, I measured and marked 10x10 cm squares on the fabric using a ruler. For each flower, I needed 12 squares, so I cut a total of 48 squares for the four flowers. Once I had the squares ready, I began the process of folding each one into specific shapes, similar to origami, to form the petals. To speed up the process, I used a stapler to secure each folded square, which made the task more efficient. Afterward, I glued the 12 petals together with hot glue and waited for them to dry. Finally, I cut out a small cardboard circle for the base of each flower and glued it to the bottom to provide support. I repeated this process four times to complete all four flowers.

Although this step seemed easy at first glance, it turned out to be more challenging than expected. I quickly realized that it required a lot of patience to carefully fold and assemble each petal. The most difficult part, however, was gluing everything together, as I burned my fingers while working on the first two flowers. Nevertheless, I felt that the effort was worth it. While I could have purchased ready-made flowers on Taobao, I chose to make them by hand because I wanted my project to reflect the message of perseverance. Moreover, I saw this as an opportunity to challenge and improve my crafting abilities. In the end, I’m proud that I made the flowers by hand. This process not only reinforced my message of perseverance but also helped me develop greater patience and attention to detail.

Figure 4 Diagram & breadboard and soldering wires

FIRST

To start the project, I needed to connect my Arduino to my computer and test the brightness of the LEDs. I used a breadboard to test different LEDs and decided to use small, very bright ones for better visibility. After assembling the circuit with four LEDs, I soldered wires to each LED to make sure they would stay connected during the project. Once I had everything set up, I proceeded to write the Arduino code for the Morse code game.

HARDWARE SETUP

In the hardware setup, I connected four LEDs to the Arduino using individual pins (pins 2, 3, 4, and 5). I used resistors (220K) to limit the current flowing through the LEDs and protect them from damage. The cathodes of the LEDs were connected to the ground (GND) pin of the Arduino, and the anodes were connected to the specific pins I defined in the Arduino code. Additionally, I connected the Arduino’s ground to the breadboard’s ground rail, and its 5V pin to the power rail of the breadboard to provide power to the LEDs.

CONTROLLING LEDs WITH ARUDINO CODE 

The core components for the Arduino code were the four LEDs, serial communication to receive input from Processing, and basic timing to control the duration of dots and dashes. In the setup() function, I initialized the LED pins as outputs and set up serial communication at a rate of 9600. This allowed the Arduino to receive the Morse code characters (dots and dashes) from the Processing code.

In the loop() function, the Arduino checks for incoming serial data. If it receives a dot (.) or dash (-), it calls the lightUpLEDs() function, which turns the LEDs on for the duration of the symbol. The LEDs are then turned off after the specified duration (1 second for a dot and 2 seconds for a dash). I found the logic to control the LEDs on a website called "C Code for LED Light Up - CodePal," which made it easy to implement the LED control in a clean and efficient way.

Figure 5 Process of trying LED lights

SECOND

Once the Arduino was ready, I focused on the Processing code. The goal of the Processing code was to send the Morse code to the Arduino using serial communication. The code starts when the user presses the spacebar, triggering the Morse code sequence for the word "perseverance." The code sends each symbol (. or -) to the Arduino in sequence. When the Arduino receives these symbols, it turns the LEDs on for the corresponding duration and plays sounds for the dot and dash.

Therefore in Processing, I set up the serial communication using the Serial class to send data to the Arduino. The keyPressed() function listens for the spacebar press, and once detected, the startMorseCode() function begins the Morse code sequence. I created this function to work by setting the isRunning variable to true and resetting the currentIndex to 0 to start the sequence from the first symbol. It then calls the startNextSymbol() function to send each symbol of the Morse code to the Arduino in order. Furthermore, I used sound files (dot.wav and dash.wav) to play corresponding sounds for each symbol in Morse code, which was essential since it added the auditory element to the project where the Morse code sound will project the sound.

FINAL THOUGHTS

Initially, I wasn’t sure how to begin, so I researched Arduino Morse code projects on YouTube and Google. I couldn’t find exactly what I needed, but after discovering the CodePal website, I gained a better understanding of how to control LED brightness with Arduino. I then proceeded to test various LEDs and build the circuit using basic logic, even though I didn’t have the proper cables. Instead, I learned how to solder the wires myself, which was a valuable skill. The soldering process took longer than I anticipated, but it was rewarding to see everything come together.

Furthermore, the coding process also presented some difficulties. At first, the codes weren't working, and I was frustrated. However, after reviewing the codes line by line, I discovered a missing semicolon in the Arduino that was causing the issue. Once I fixed it, everything worked perfectly, and I felt a great sense of accomplishment. 

In the end, the project worked as intended, with Processing sending Morse code symbols to Arduino, which controlled the LEDs and played sounds. Lastly, I feel that this first part of the project improved my skills in both hardware and software, and it gave me the confidence to continue working on this project for the final.  

Figure 6 Process of making the introductory video

CREATING THE INTRODUCTORY VIDEO 

After user testing, I decided to create an introductory video guide to explain the game, as I realized some people might not understand the instructions if they were only in English. With the help of a Chinese friend, I translated the subtitles to ensure clarity. Once the video content was ready, I researched how to play videos in Processing and found guidance on the official Processing website. Furthermore, in order to make the video fit my screen, I resized it to 1900x1200 pixels and used an online tool to convert it to an MP4 format, which is compatible with Processing’s Movie (3) library. 

DESIGNING THE BUTTON

Next, I designed a circular green button at the center of the screen using the PGraphics class, which allowed me to create custom graphics. After investigating how PGraphics (4) worked I used createGraphics() to define the button's size and drew it using functions like ellipse() for the circle and text() for the English and Chinese subtitles. The text was positioned in the middle with the English text above and Chinese text below the center. Furthermore, I initially paused the video using video.stop() (5) so that it wouldn’t play until the user interacted with the button. This step ensured the video only started when the player was ready to press the button. 

INTEGRETING BUTTON WITH VIDEO 

To combine the video playback and button functionality, I introduced a boolean variable (6) called videoStarted to track whether the video had begun. In the draw() function, I used a condition to check the value of videoStarted, so if it was false, the program displayed the green button over a black background; if it was true, the video played full-screen. Later, I added interactive functionality in the mousePressed() function, where I used distance calculations to detect if the user clicked within the button's area. If the button was pressed, the videoStarted variable was set to true, and the video began playing using video.play().  To ensure the video played without any problem, I used the movieEvent() (7) function, which continuously updates video frames as they are loaded, which enabled a smooth video.

THOUGHTS

This step took longer than I expected, as I had to research extensively to understand how to write the code. Fortunately, Processing has an official page that helped me discover many new functions I hadn’t learned before. Additionally, a friend from another recitation helped me figure out how to play the video, as it initially wouldn’t work. She suggested using an online tool to convert YouTube videos to MP4, so I uploaded my video to YouTube and followed the same process. However, despite the code, I encountered issues with the video not playing. After careful review, I realized I had missed some parentheses and semicolons, which took me another two hours to fix. Finally, after fixing the problem I understanded that this process improved my research skills, and I felt even prouder when everything finally worked.

Figure 7 Diagram, breadboard and arduino wiring 

INVESTIGATION

After making the introductory video for my project, I wanted to implement interactivity and at the same time making it both memorable and visually appealing. To achieve this, I decided to implement a light sensor that would turn on an LED strip when exposed to a flashlight. So, I began by searching for a specfific code and diagram in the internet and after some hours I was able to find one on a website called ArduinoGetStarted (8). As shown in Figure 7, what I did first after finding the code and diagram is to prepare the wiring to  initially test the circuit with a simple LED light and light sensor setup without soldering.

MODIFYING THE CODE

However, I noticed an issue: the original code turned the LED light on when the sensor blocked light, but I wanted it to work in the opposite way. To correct this, I modified the code to ensure the LED would light up in response to higher light intensity rather than lower. Specifically, I changed the condition in the if statement to trigger the LED when the sensor's value exceeded the threshold (analogValue > ANALOG_THRESHOLD), rather than when it was below the threshold (analogValue < ANALOG_THRESHOLD). This change allowed the LED to light up in brighter light conditions, which was essential for the project interactivity. 

Once the simple LED setup was successfully tested, I shifted my focus to adapting the code for an LED strip. To do so, I incorporated the Adafruit_NeoPixel library, which is essential for controlling NeoPixel LED strips. This library allows me to manage the color and timing of individual LEDs on the strip. So, i was able to  define the strip’s pin and total number of LEDs, set up the light sensor, and initialized the strip within the setup() function. Then, to ensure the proper functioning of the circuit, I added 220k resistors between the LED lights and connected an external 5V power supply, which was necessary to provide sufficient current for the LED strip , since the Arduino could proabably have short circuit. 

CREATION OF FINAL EFFECT

In the loop() function, I continuously checked the value from the light sensor to compare it with a predefined threshold. If the light intensity exceeded the threshold, this indicated that there was enough light to trigger the LED strip. As a result, the lightUpSequence function was created and used to make a sequencial effect on the strip. Specifically, this function gradually lit up each LED one by one, starting with the first LED and continuing in sequence. Each LED turned on with a yellow color, and the delay between each LED lighting up was controlled by the delayTime parameter. Once all the LEDs on the strip were illuminated, they remained on for 20 seconds before turning off. This created a smooth and visually effect, making the LED strip appear lively and vibrant. Moreover, this dynamic effect significantly enhanced the overall aesthetic of the project, making it more memorable and engaging. 

THOUGHTS

I was very lucky to find a code that was perfectly suited for the purpose I wanted to achieve. It made my project much easier to execute. However, I believe one of the biggest challenges wasn’t just the code, but the soldering of the sensor. It was more difficult than working with the LED lights, so I had to be very careful. Additionally, working with the LED strip proved to be more complicated. When I resumed my project after December 1st, there were no LED strips available, and I was in a bit of a bind. Luckily, a classmate lent me a 10-meter LED strip, which turned out to be a blessing. The length of the strip added even greater significance to the project, because as seen in future steps, I was able to build something beautiful. Finally, from this process, I realized how important it is to implement resistors and take other precautions to prevent accidents. This experience helped me mature, as I understood the importance of properly managing the materials I’m working with and now I recognize that this project could be dangerous if I don't handle everything carefully.

Figure 8 Process of making the morse code board

The first step for crafting the final presentation was using laser cutting to make the acrylic board for my Morse code. I chose acrylic because I had seen the Interaction Lab nameplates made from acrylic for the learning assistants, and I thought it looked nice with the LED lights underneath. So, I decided to do the same for my project.

Before starting, I made an appointment with Mr. Daly, who helped me print out the files for the laser cutting. Once the acrylic was cut, I needed to figure out how to show it. I decided to make a custom case for it. I used a pencil, ruler, and cutter to measure the acrylic and the base. After cutting some black cardboard, I was able to make the case. Finally, I added fabric to the case, and every time I connected everything, I was really happy with how it turned out.

This part didn’t seem too hard, but I had to look up how to create an image for laser cutting. I found a helpful YouTube video called  "Easy Diode Laser LED Acrylic Signs! xTool D1 10 Watt Diode Laser Engraver "(10), which showed me exactly what to do. After following the instructions, I gave the image file to Mr. Daly, and he helped me engrave and cut the design with the laser cutter. Finally, I felt impressed with the resources of the university and this experience made me realize how many resources we have as students in the Interaction Lab. 

Figure 9 Making more flowers and testing lights process

After completing the acrylic Morse code board, my next task was to create 22 more flowers and attach them to the board. For each flower, I had to cut around 12 10x10 cm squares, not including the larger flowers, which required about 20 squares each. Once all the flowers were made, I focused on creating a heart shape on the board using an LED strip. After searching around the lab for a solution, I decided to use pins to secure the LED strip in place. The arrangement of the flowers and the pins helped me form the heart shape. Furthermore, once the heart was created, I needed to drill two holes: one for the LED sensor cable to be soldered to a yellow flower, and another for the remaining LED strip, where the cables would connect to the Arduino. After completing these tasks, I tested the code, and I was amazed when it worked on the first try. To finish, I added black fabric behind the flowers so that, when lit, the heart shape would appear in a sequence of three layers.

Finally, this step was both fun and demanding. Making the flowers took about three days, as I had to be very careful with the details of each one. Despite the time commitment, I am proud of crafting these flowers by hand. As I mentioned earlier, they symbolize one of the main reasons I created this project to demonstrate perseverance to my users. My final challenge was ensuring the LED strip worked. I didn’t think I’d be able to find one at that point until a friend lent me her 10-meter LED strip. It was perfect for my project, as it allowed me to highlight the heart shape. I feel that this experience taught me a lot, and at the same time I feel my crafting skills have  improved.

Figure 10 Process of last details and final project pictures

My final steps involved adding some cardboard to cover the cables and securing the entire board and Arduino to the base to prevent any movement of the wiring. As shown in Figure 10, I created an access point for the 5V power cable and another hole to connect the USB to my computer. I also added black masking tape around the board to keep the LED lights and LED sensor in place, ensuring they wouldn’t shift. Afterward, I covered everything with fabric and secured it using hot glue. Additionally, as seen in the figure, I incorporated a display and speakers to make it easier for users to read and hear the instructions.

For me, this part of the process was a relief. After testing the code multiple times to ensure it worked, I was finally able to focus on the finishing details of the project. Moreover, I was excited to present my work at the IMA show and felt proud of myself for successfully completing and showcasing my project.