Prompt of This Week’s Assignment / Final Project
- take something you did earlier this semester and expand it
- or scratch a new itch or make a Frankenstein project by combining earlier code
Working on This Week’s Assignment
For my final project, I decided to expand on my mid-term assignment and create a Christmas scene as holidays are approaching. I kept my background and slider component the same as my previous sketch, but replaced the rest and also added in new elements.
To begin with, my preload function contains the music, screen-capture video camera, a bunch of image layers including the background, scene elements such as the candy cane, Santa, etc, and a total of 14 tree decoration ornaments.
Deconstructing the computational aspects of my project, one of the main new component I included was the live screen camera on the ball ornaments on the Christmas tree. I hid the createCapture ( ) camera in the preload function and drew 2 mirrored camera screens at the respective location of the ornaments. My aim was to recreate the metallic reflection on the ball ornaments from standing in front of them in real life. To achieve this, I then overlaid an additional image layer of the Christmas tree with the ornaments semi transparent so that the camera views become semi see-through as shown in the images above.
In addition to the live screen camera, I tried to include a variety of interactions that can be controlled by the mousePressed ( ) function. For my tree decorations, (similar to the sakura flowers in my mid-term assignment) I started out by checking if the mouse is pressed inside the Christmas tree area through establishing rectangle boundaries. The 14 ornament are put into an array that contains all of these images. If the click is within the boundary, a random ornament would be picked from the array and appear on the Christmas Tree with each mouse press.
The slider remains the same from my previous project to control the snow pile on the ground and the rate / amount of snow falling, but I also mapped the “Merry Christmas & Happy Holidays” text to the slider so that it only displays when no snow is falling. For the details of the computational explanation of my slider, please refer to my ICM week 6 blog post.
A new component I included was that I used the star on the Christmas tree as the button to control the playing and pausing of the background music. In the mousePressed ( ) function, I had to check if the click is within the boundaries of the star. If the conditional statements happens to be true, the music will play or pause respectively.
Other than the elements linked with the mousedPressed ( ) function, I tried to add in additional layer of interactivity with the star and Santa on the sleigh in the sky. For the star, I mapped the angle rotation of it along with my mouse location with mouseX and mouseY using the atan( ) and rotate ( ) syntaxes. As I felt that I already have multiple interactions controlled by the mouse, I decided to map the control of the location of Santa with the computer left and right arrow keys, to move Santa and his sleigh in the respective direction while setting a limit on both sides of the canvas so that it doesn’t go completely off screen. I also had to upload and include a image of Santa being flipped horizontally as I wasn’t able to figure out how to flip him in p5js directly through code.
Screen Captured Video of Assignment Outcome
Reflection
How did coding your project make it different from what it would have been if you had used software?
Prior to this semester at ITP, I definitely would not have imagined myself to be able to put together this interactive sketch with code. Coding my project make it different from using software was that I had to think through all the individual components and how they can be interacted with which I didn’t have to if I were to make a similar animation or visual drawing only. For example, after I applied the mousePressed ( ) control of the playing and pausing of music to the whole canvas originally, I realized that if I click to drag the slider or press on the tree to add a deco, the music will play or pause every time I do so, which is not what I want to happen. Thus, I then thought of using the star to control the playing and pausing of the music and set boundaries to the mouse click through conditional statements to solve my problem. If I had to used software such as After Effects or other game engines, I probably won’t face this issue, but experiencing this while coding taught me the importance to really think through the relationships between all components of a sketch to prevent myself from running into issues.
How do you feel about WHY you want to use code in your work now compared with the beginning of the semester?
In the beginning of the semester, I simply feel that learning to code can most likely help me execute design or other create ideas in a wider range of mediums. After learning to code through this class, I realized that thinking through the logic behind each and every individual element and component can really help me better understand how things can be built and why some decisions are made as oppose to other less feasible or logical ones. I would definitely want to use code in my work to create interactive projects that are engaging, bridge the gap between multiple mediums, and hopefully connect the use of p5 with other softwares or platforms to further explore the unlimited possibility after gaining a solid understanding of how things can be put together and intertwine.
If you are struggling with your sketch and can’t get things to work, you should feel free to put your energy into writing about what didn’t work (and vent any frustrations!)
I am fairly happy with how my sketch turned out at the end with my drawings being uploaded to p5js and connected with multiple interactions to create a Christmas Holidays scene. However, just noting down the few struggles I had, I wasn’t able to figure out how to set up the Santa and sleigh so that it remains facing in the left direction after I release my left arrow key (right now it still flips back to the opposite direction). Another minor problem I was having was that once in a while when I load and play my sketch, I would receive an error message in the console and the camera-capture won’t show up and the sketch won’t work. But after stopping the sketch and clicking play again, the sketch would work fine. I’m not sure if this issue is due to the large amount of images I need to load each time along with loading the camera and background music, or if there’s somewhere in the code that I should adjust to prevent this problem from happening. Overall, this course was definitely provided a valuable learning experience for me and really helped me become a lot more familiar and confident with coding.
Stephanie's ITP Blog 