Category: Assignments

For my final project, I set out to create a game that would teach people how to recycle. I think that at the end, I’m pretty satisfied with the outcome and feel that I’ve accomplished most of what I wanted to do. I think one of the things that was successful in the project was the serial communication between the “Arduino” and Processing, which itself took a week to figure out. I later went back and removed the motion sensor I had in there originally because it was too sensitive, and made do with three buttons instead. I also think I reached my goal of creating a game that was both educational and visually appealing, as I spent a lot of time on the visuals to make the game pop out more. However, there are also a lot of things that I wish I had more time to do, and would like to work on moving forward. One of them is a timer function, something like a 3, 2, 1, go mechanism at the start of the game, which was pretty complex and something I didn’t quite get to. I also would’ve liked to add audio, like the sounds of objects falling, movement, background noise, etc. as I think it would’ve added a lot to the experience. Another complicated feature I would’ve liked to add is a high score board where players can enter three characters “names” and have a total of maybe 5 high scores that would stay on the end screen, even after the game is closed.

Link to sketch on OpenProcessing (though it won’t work): https://www.openprocessing.org/sketch/546197

Documentation: documentation

For my final sketch, I wanted to create a music visualizer that the audience could also add sounds to. As the project progressed, I got carried away making the visuals and due to the lack of time I opted out of preloading sounds that the audience could activate by pushing the keys on the keyboard. However, that is something I would like to explore in the future, especially in a way that would have the audience add something that doesn’t sound “bad” to the music.

My final sketch consists of a title screen window with “stars” dotting the screen and a button that starts the song. When the song starts, it turns on the computer’s camera and the subsequent visualizations would consist of video manipulation or added elements to the screen in time with the song. And so, for this project I used p5.js’ DOM and sound libraries. The visualizations includes changing the video’s color, adding lyrics, adding a “static” effect, adding a “glitch” effect, adding a “lag” effect, adding a zoom effect, adding a pixel effect, and adding a pixel/grayscale/moving effect.  Unfortunately, I was ultimately unable to connect all the pieces of my project into one sketch; I had trouble connecting the video manipulations but I was able to successfully include the added elements like color, static, and lyrics. While I am disappointed I was unable to fully realize my project, I’m glad that I was able to successfully create each video effect individually and independent of one another. I really enjoyed creating these sketches and was able to explore video manipulation in depth and in creative ways; in the future, I would definitely like to be able to connect all of the sketches together into one piece and to also continue to create sketches alongside music and further explore the different visualizations I can make!

Link to final sketch: https://www.openprocessing.org/sketch/546049

Link to individual video effects: https://www.openprocessing.org/sketch/545819 (tint), https://www.openprocessing.org/sketch/545846 (lyrics), https://www.openprocessing.org/sketch/545911 (zoom), https://www.openprocessing.org/sketch/545914 (lag), https://www.openprocessing.org/sketch/543849 (pixelates), https://www.openprocessing.org/sketch/545986 (glitch), https://www.openprocessing.org/sketch/546013 (static), https://www.openprocessing.org/sketch/546018 (movement)

For my final project, I have a title scene before entering the music visualizer. I’m using scene manager to switch between these two screen, and it worked until I started coding more complex elements in my music visualizer scene. Once I write code in the music visualizer scene, sceneManager “breaks” altogether. In my music visualizer scene, I’m using the computer’s camera to record the viewer. I’ve written a few elements to alter the viewer’s appearance through the camera/pixels, but I’m having trouble getting them to work alongside sceneManager and potentially the song itself, but I’m not sure yet because sceneManager breaks before I can see what happens on screen. I can add/change basic elements, such as the background color altering or objects moving in time to the music, but manipulating the camera’s footage seems to be giving me the most problems. I also have yet to add sound that the audience can interact with, but I plan to preload sounds into the keys on the computer so the audience can press them to produce sounds.

For my final project, I’m making a game that teaches people how to recycle. So far, I’ve finished the physical circuit that includes the microcontroller, some buttons, wires, and a lot of other components. The Arduino code is also done. In processing, I’ve added many visuals, including the main sloth character that the user controls, the table, the bins, the background and more. I’ve also implemented the score function – if the garbage object is dropped into the correct bin, then the score will go up by one. However, there are definitely still some things I need to work out. Currently, if the object is not dropped into the correct bin, the program doesn’t really register this. So, I need to add something that allows the user to see that they’ve dropped the object into the wrong bin. Although the core functionality of the program is there, I’d also like to add some animations. First, I want the sloth’s hands to open up when he’s dropping the object. If the object is dropped into the correct bin, I want the sloth to be happy; if it’s in the wrong bin, I want him to be angry. If I have time, I would really like to implement a timer, in which the user only has 5 seconds to decide which bin the object goes into, and if time runs out, then it counts as wrong.

I am practicing piano these days, so I tried to associate coding and my hobby. It makes me to create piano keyboard with using p5js by pressing my computer keyboard. I recorded specific notes, and then I will load this music in to code.  These are not same as scale, butI will use ‘A S D F G H J ‘ which is in order in computer keyboard. If I pressed these button , then I will create random colored, and sized circle in the random position of the background. The reason why I make this is color is strongly related with sound I think.

So for this week I spent the time coming up with the story line for the interactive game I want to create. I wrote a narrative, and drew a map of the different decisions the user will be able to make. I decided on creating four different endings that the player will be able to get. I haven’t started the code yet, but depending on how quickly I finish the p5.scenemanager aspect of the code, I might be able to add more endings to the story. For the the next week I want to focus on the basic map of the code. I want to add buttons and to incorporate p5.scenemanager to switch scenes depending on what the user presses. During the final week I will work more on the visual aspect of the game/story…adding color, fancy text, and maybe even images of the characters, or even sound effects.

I’ll bring the sketchbook with the map of my story line to class tomorrow!

For my final project, I want to stick with my idea of creating a game that teaches kids how to recycle, except it will be slightly more interactive than an online flash game. The main character will be a sloth that can move across the screen from left to right, controlled by the user. 3 bins – trash, recycling, and compost – are on the bottom of the screen. Throughout the game, a random object will be given to the user, who has to decide which bin it goes into. For example, if the item is a water bottle, it should go into the recycling bin, and if the user does that correctly, the score counter increases by one. If it’s wrong, there will be an indication in the sketch that the object was dropped in the wrong bin. To make this sketch, I’ll be using serial communication between Arduino and Processing. The Arduino will have 3 inputs: 2 buttons and a PIR motion sensor. The buttons will move the sloth either left or right, and activating the motion sensor will drop the object into the bin. I’ll also be using the sprite library in Processing to animate the sloth when doing certain actions, such as opening his hands when dropping an object or being annoyed if he gets one wrong.

Interface design for clarification:

I’m not exactly sure what I want to do for my final project, but I would love to work with music. I really liked the presentations on Rob Clouth and Casey Reas, and I think it would be really cool to do some kind of music video/coding combination, where the code will interact with the music and create some kind of visualization on the screen. I’m not sure what form the visualization will take on; it could be similar to Clouth where he’d make shapes and designs on screen, or similar to Reas where he alters the video footage itself, or even both. My other worry is that I possibly also want some kind of interactivity on the audience’s part instead of them just watching the screen. I think this interactivity will add another dimension to the piece, as it’s very easy to walk past/click away from a video with visualizations otherwise. Maybe the audience will make the music?

This sketch inspired me regarding interactivity:

https://www.openprocessing.org/sketch/418569

Reas’ music video inspired me regarding video manipulation: