The day began with Leila showing us some motivational quote boards which the students had made and we talked about hidden job markets and also watched a motivational video recommended by a student. We also set up a LinkedIn account which I had always wanted to do but never got around doing it and saw many familiar faces who were my email contacts. We followed each other on LinkedIn and proceeded to complete our profiles.
Later part of the day, Professor D asked us to create a Github account. Github is basically a repository where we can save or store our codes. We do this for several reasons as we can rollback to previous changes if the code stops working later, we can share codes among other programmers and share ideas, work together with other coders on a similar project, and also we dont have to carry our flash drives around.
I followed other people in class and made a pull request, forked chris’s and eric’s projects and added some comments to it. We then worked on the assignment after class at college premises.
On the fourth day of the class, we basically went over everything we did so far. I created a project in class that would change the background’s color using variable. In the same project, I created a circle grow to a certain amount and also used “IF” statement to make a circle change direction when it reached a certain size. My goal is to create a day and night scene in which the background and certain objects such as sun and moon would loop infinitely.
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.