Author: Aliya Koishina

Idea

First of all, I got inspired by the old game (https://kbhgames.com/game/throw-paper), where a player needed to throw a paper into a trash bin. Then, I decided to modify it, thinking about making a waste sorting game. For this idea, I decided to rely on the campus’s recycling procedure. I made some research and stumbled upon plenty of valuable resources from our university about sustainability and effective recycling. https://www.thegazelle.org/issue/148/features/recycling-rundown?fbclid=IwAR29lGNj9u9fJKsSh04SI1rM-9KAqOV92OBGTBX-ObOIKGupfIssHzaCB2A.

https://docs.google.com/presentation/d/1pbGNdAsGjuJ5EpqZOm0oOVZWK7rg-g04gpsV4Wo7e0E/edit#slide=id.p.

 

Process

Throughout the process, I had struggles with implementing the idea. I could not rely on the game I got inspired by, since there is no need of being able to “hit the bean”. Instead, the program should sort trash into different categories, which is more about a “correct placing”. Thus, this idea reminded me of the old game Tetris, where a player needs to use keys to place a figure. Similarly, in my project, using the arrow keys, a player needs to sort out the waste and put it inside the correct bin. 

I had some difficulties in making randomly appearing pictures from the array, and it, honestly, took me a lot of time. Therefore, it is kind of a slow progress :):

Plans

I have a lot of work to do. First of all, I need to figure out how to do the main “sorting” process in the code. Roughly speaking, the program should be able to separate images into three categories: general waste, paper, plastic. Then, I need to add audio, a menu with instructions, a timer and scores.

Inspiration
I found a media outlet on Instagram, which is called We The Urbans. As far as I understand, this is the community that empowers people through art, music, fashion and other creative ways. I enjoyed their works on Instagram, which may serve as a constant source of inspiration and motivation. Being impressed by their ways of delivering important messages, I got inspired to create something similar.
https://www.instagram.com/wetheurban/

Design
I made a quick sketch of my work. Also, to be honest, I make the same mistakes of sticking to the design rather than thoroughly thinking about the ways of programming it. Yet, thanks to Professor Aaron, the idea could be put into action, and the professor demonstrated to me how to put a text into a circle. Then, thinking about making my work more interactive, I decided to use the mousePressed() function to make appearing words when you move a mouse. Also, I used frameCount to create a sort of flashlight effect. However, the facing issue was that I did not know how to rotate the text. After searching the web, I found that there is an explanation presented on the p5js website. The information presented there was quite useful, so I used it as a reference.
https://p5js.org/examples/typography-text-rotation.html

Result
Generally, I am satisfied with the result. That was a nice practice of self-love and working with a text in p5js 🙂 Yet I still need to clarify some details regarding the text inside a circle.

I honestly could not generate artwork from scratch. Thus, I got inspired after watching Daniel Shiffman’s coding challenge of creating a starfield. He used OOP in the example, so I decided to use his sketch. I watched the video till the end, while also enhancing my understanding of implementing OOP. (source: https://www.youtube.com/watch?v=17WoOqgXsRM&t=581s)

The interesting fact is that I have a fear of being stung by bees. Perhaps, this is the reason why I got inspired to create them. My parents would have always told me that I need to freeze at the sight of flying bees, otherwise they might get angry. I interpreted this idea into the code: when you move the mouse, more crazy bees are generated.

Throughout the process, I also learned how to embed an image into the code, which I needed to create bees.

All in all, I wish I could reach that level of creating beautiful abstract and complicated artworks.

I had many ideas to do this assignment, yet I was stuck with a fixed idea of recreating this picture.(https://www.pinterest.com/pin/594827063294340838/)  and making it as if it was an animation. During the process, I was hoping to do a random change of pupil colours, I tried to play with the code many times yet I could not make the desired work. Apparently, I over-thought this assignment without considering that I do not have background knowledge. I used the “for” loop to generate many random eyeballs. Generally, I believe that I should have put more effort into making the assignment more complex in terms of coding rather than focusing on the superficial part, which took too much time. In the future, I will be more focused on understanding the basic concepts instead of being too concerned with the appearance of the project and just trust the process, but, at least, it was fun.

I was looking for different simple face illustrations on Pinterest to have an idea of what shapes and face features I would like to use. Also, I wanted to create something as if I was the main character in a cartoon or children’s book.

source: https://www.pinterest.com/pin/122793527330625093/

I played with different shapes and colors.
The main challenge that I had was working with curves and beizers, I could not place coordinates and spent a lot of time trying to figure them out. Particularly I had many struggles while drawing my eyebrows, have never thought that it is going to be the hardest part. I wanted to use beizers and make real eyebrows, yet it took plenty of time. Therefore, I decided to use arc() instead. I need more practice to work with curve(), beizerVertex(), and other shape-creating functions.

I had many creative thoughts for this assignment, but they included some animations and curves… However, I hope to learn more about these functions fully express my ideas in future projects.

Generally, I am satisfied with my first assignment, considering that I have never used JavaScript before. So, here I am 🙂