Tag: Vestibule

Day 8

Today we just worked with some command lines. One of the students gave a tutorial on how to install, upload and download files on github on windows platform which was really useful.

Finally, I did some final touches on the project such as adding comments, etc. We also talked about some text editors and were introduced to atom which is one of the most popular text editors around.

It was sometimes frustrating to see the code break completely but very fruitful and satisfying to see it work. This has been a fun ride and I have learned a lot in these few days and make some really cool stuff.


Day 6

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.

Day 4- The revision

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.

Third day (introduction to variables)

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.


Second day at Vestibule class

The second day started off with Leila giving the students career assessments where we had to move the slider based on our characters/nature.

Then after Professor D asked us to update our wordpress by writing a little about ourselves. We learned how to create an empty canvas on p5js and draw different shapes on them. So, to draw any shape, one would need to enter the coordinates of the shapes(where to draw it) and the size of the shapes. The shapes we worked on today were rectangles, triangles, squares, straight lines and my favorite, circles. Interestingly, while drawing circles, we needed to enter both the height and width of the circle of the radius. It is not a bad thing since we can create ovals by just increasing or decreasing either the height or width.

We also learned to make the edges of the shapes thicker by using “stroke” and used the “fill” to paint the inside of the shapes which works like the bucket tool in ms-paint.

After that, we were told to pair up with a partner and create basic shapes and give a short demo on our project. I was teamed up with Yamil and we decided to do a snowman first. We were just messing around with circles and trying to find the right coordinate and size for the snowman’s head, body, legs, mouth and eyes. We changed the stroke’s color to white to make the border disappear so it appeared as a single snowman than 3 different segments. We wanted to do stick-hands on the snowman but couldn’t because of time constraints since there were no grids on the canvas and we would have to guess the x1,y1,x2,y2 coordinates of the hands.

The other project was called the bullseye project where I talked and Yamil typed. We first wanted to do a hot steamy donut but did not want to do curvy lines at this stage so we came up with doing a bullseye target instead. It was simply circles within circles and we added text to it using “text” to put numbers in the target area. We would have liked to divide the target into different pies like in a real target block using straight lines but couldn’t because of limited time.