P5JS – Homework and Class Recap

I’m glad to say that I completed Day Two!

I learned so much today that my brain is a little boggled. But that’s okay, with a little more practice I’ll be a pro in no time. Anyway, to get back on track I’m going to do a quick recap about what I learned today.

Tool 1 – In class today we learned about hyper. Hyper is a software that allows users to access Linux/Unix terminal across all platforms. It doesn’t matter whether your an avid Windows user or a Mac Professional. Anyone can use this software, which is extremely helpful for collaborations.

Tool 2- We touched briefly on the brew command. What the brew command does is update the different applications you have on your computer all at once. However, it doesn’t allow you to update xchange which must be done manually. For Mac their is a website called Home Brew that allows you to copy the code and paste it in ruby. For Windows you will need to look for a brew in Github.

Tool 3- Github. Github is an open code software repository that allows users to access and store their own codes publicly. These codes range from regular notes, all the way to program codes for different projects you may be interested in. We also learned that their are ways to protect your work but usually for GitHub that means that you would have to pay a small fee as it is typically an open source for all users. However, by posting their code online to the public, it allows companies to trouble shoot and collect data about users and their products.

Tool 4- P5js- We explored P5js and learned how to understand the grey scale. The gray scale ranges from 0-255. Zero being devoid of any color but black and 250 being the closest to white. We messed around with the functions such as backgrounds and fill to understand how they work. We even went as far as creating a canvas and adjusting the colors along the grey scale.

Tool 5- Creating a background. For Homework, we dabbled in creating a background. Attached below, you will see the mixture of colors that I played with. The first code resulted in a navy blue. The second code resulted in a violet like pink. And my final color (for fun) was trying to get as close to the p5 logo as possible. The more you played with the color the more dominant your colors became.

Tool 6- Creating a shape and filling the color. For Homework, we dabbled in creating a background and adding shapes. We referenced the p5js to add shapes, fill them, and dabble with the alpha command. As far as I can tell, the Alpha command is the most dominate color in the range of 0-255. When added to the fill command it will make the shape appear translucent. Attached below, you will see the result of the shapes and backgrounds meshing.

Tool 7- Creating a shape. As part of the homework we created a canvas and added a variety of shapes in all different positions along the x and y axis. These shapes give life to the empty canvas.

Tool 8- Adjusting the order of code. The last part of our homework was to adjust the coding and to see what would happen. To test this, I removed the function setup and instead started with the function draw.

What I noticed at first glance was a small square that could not be seen. What I realized was that it appeared as almost as if their was no solid canvas as x and y were not defined. Which in turn caused part of my shapes to disappear from view. It almost looked like the shapes in the crowded space had no where to go because the canvas was undefined. The area that was displayed was no bigger than that off a small uploaded photo you would see in a profile image on a website.

When I returned the function for setup back to it’s original order, the canvas appeared underneath the shapes. It almost appeared as though someone slide a piece of paper underneath the shapes allowing the shapes to be displayed in their entirety.

As per vice versa of the command order, if you kept the setup as your main function your canvas would appear first allowing you to create the width and height for your masterpiece. From their you would then draw your shapes and see them in it’s entirety scattered across the page. By reversing the order your shapes would not be displayed in their entirety as you have not given the x or y coordinates for your canvas.