In the previous class, we learned how to create different shapes and how to fill them with color, set background color, etc. But it turns out that we could do more in P5JS than just draw shapes. We could move the shapes and add additional interactive features to make the project more fun.
The professor showed us an example of a moving circle from left to right of the screen. This was done by using a “variable”. It is just a placeholder for a unique “name” which can be anything and can be called in the program later to perform special tasks.
In the moving ball example, a variable was reserved and given a name x, and was given a value of 50. Later, when the ellipse was defined, in the parameter, the variable x was used where the x-coordinate should have been, which is 50. This simply put the circle in the 50 x coordinate. Now by using x=x+1 later, the value of the x coordinate increased by 1 coordinate to the right each time the program looped until infinity or until the user decides to close the browser.
I really liked this idea of creating animations with just using texts because I had previously used flash players to do it but now it was purely texts. So, I played around with it for a while and decided to do it with a square but changed the width parameter of the rect instead and the square grew towards the right. It looked like a loading screen so I added “text” function to add the word “LOADING”, re-positioned the rectangle and created a loading screen. I also added a function “clear” which cleared the screen as soon as the rectangle reached the end of the canvas.
The other students in class all worked in pairs to create demos and showcased their work which was really cool and the other half who still had some confusions about anything were told to sit on one side of the class and the professor explained everything from scratch which really helped me catch up. I especially liked the rocket ship taking off demo because they followed up on their previous work. I think they might have done this by assigning each y coordinate in the rocket’s shapes with variables and increasing it by 1.
Pravesh's Vestibule Period 