Project 2
By Joanna Ko
Final Sketch
Link: https://editor.p5js.org/koj097/sketches/uVwixZueS
Model: https://teachablemachine.withgoogle.com/models/qwgaoXVvo/
The final project is a mirror with an emoji filter. Based on the first iteration of the experimental camera, which also used an emoji as a filter. It also incorporates the consentful interface I made in the previous semester, by explaining the function of the mirror to the user, and asking if they want to continue on with using the mirror. If you say no, the interace will not push any further and ask you to move on. If you say yes, the emoji filters will activate. The interface explains that you can change the type of emoji the filter uses, depending on the type of hand gesture you create. Thumbs up would create 🍀, thumbs down would create ❌, finger hearts would create 💗, the okay sign would create 🪙, the peace sign would create 🌐, and the handwave would create 🖐
Process and Prototypes
I wanted to do something related to symbols and hand gestures. More speficially, through using the teachable machine, I can cause the camera visualize different colors, objects, or symbols, using said hand gestures.
I created the first prototype for this project, using the teachable machine for a first time in a while. I created three inputs, each one being of a hand holding up one, two, or three fingers. It wasn't that successful. I had trouble with getting the machine to get the correct answer, and the input for "yellow" was missing in the end result.
Another struggle I had was with the exporting of the model itself. I was incredibly confused by how the code snippets were formatted in the p5.js option. Why would there be html text adjacent to js text? Although I was able to get help from the professor, and seperate the texts from one another, it was still confusing nonetheless. I ended up using the the template provided from the tutorials as a result.
Link: https://editor.p5js.org/koj097/sketches/SYYMqrZLW
Link: https://editor.p5js.org/koj097/sketches/mF2DtDoih
Link: https://editor.p5js.org/koj097/sketches/N7yZWtaY3
I looked back at the Experimental Camera and Consentful Interface I made last semester.
The Experimental Camera was a camera filter that used the rainbow emoji. While the Consentful Interface, based on the FRIES method, had a yes or no button. If you pressed the former, the interface would activate the reflection, if you pressed the latter, it will tell you to click off the screen.
When working towards the final prototype, I initially was going to go with the original plan of using the numbered fingers gestures. One finger being a red emoji filter, two fingers being a yellow emoji filter, and three fingers being a blue emoji filter. I used the template provided by the video tutorial. I initially went through some trouble, because I mispelled "ml5" as "m15." After I foxed that however, the sketch still messed up. The console still said "failed to fetch," it was incredibly frustrating to deal with, as I did not know the solution. I double checked and compared it to the original video's template, nothing important has changed except for my embellishments. In fact, when I checked the original template, it had the same console error.
My partner, Aisha, gave feedback via discord messages. She enjoyed the concept, but suggested that I add text at the bottom of the screen to clarify which filter is which. I took that feedback when I created the teachable machines.
I ended up choosing to get a tutor to help me with the project. The tutor's name being Elena Peng. I initially thought that the emojis was the problem. However, after looking it over with Elena, we discovered that it I used the tutorial's template instead of the provided p5 editor link, because the former was dated. With Elena's help, I was able to seperate the texts into the according files. After that, the project became easier to complete.
Link: https://editor.p5js.org/koj097/sketches/DPyh6Y3Zm
It didn't become that easy however, this is where I decided to change execution into something less generic. I changed from using numbered fingers to hand gestures instead, with their corresponding colored emojis. The creating the teachable machine for this was much more tedious this time. Mainly because I had 5-6 hand gestures to collect images of, and the internet became much slower as a result. In between all of that, I had to test out the machine and save to google drive, to make sure I don't lose progress. And every time I press the training button, it would always give that pop up that says the page is unresponsive. In the end though, I was able to save and export the model.
After combining the components of the Experimental Camera and Consentful Interface into the a prototype, I used if else statements to get the filter to get certain emojis to respond to the correct hand gestures. It had the same problem as teachable machine, in which the service was incredibly laggy. Not helped by the fact that I used windowWidth * windowHeight. I had to zoom out of the sketch and shrink the font use so I can see the entire project. I ended up settling for a canvas size around 600 x 600.
The last error I dealt with was pretty minimal. It says that the "webgl isn't supported on this device." It was weird because this warning didn't effect the performance of the camera itself, it still worked. And this error of it being the wrong device wasn't brought up before anyways.
Reflection
This project, while more difficult, was more fulfilling and fun to complete. Although there were still difficulties present in the process, it became much more liberating and easier to deal with, and leaving much more room to change up the creativity and statements of the camera. After getting feedback from the proffesors, my partner, and the tutor, tried to be more creative this time around. It honestly felt more enjoyable as a result, even if it was hard. This is also the first time I took a tutoring session to help me with my homework, and I feel it really helped me and improved my project this time around. I'll most likely do another session again in the future.