TechIMPACT - Day 2

Today we started getting into coding. We're using p5.js, which is a pretty cool JavaScript based library and it even has it's own (outdated) editor. The thing about P5 is that it was originally created to help artists and other non-developers draw things on the web quickly and easily.

So in today's class we covered the typical setup of a p5 file. It always includes a setup function and a draw function. The setup function is how you build the 'canvas' or environment and the draw function is where you place everything else that you want the program to render. Pretty simple.

We also got into creating basic shapes. Because p5 is a library, it has all these functions that it already recognizes and all you have to do is provide it with the parameters. So for an ellipse for example, you'd input ellipse( 50, 50, 100, 100); and that basically is telling it where to locate the center of your ellipse from the x and y coordinate as well as the width and height of the shape.

Did I mention that computer graphics doesn't use a typical coordinate system?! ya...that's a thing. The origin is at the top left and positive numbers go to the right and down.

Other shapes we covered were rectangles, triangles, and lines. We also added color to our backgrounds and shapes. P5 recognizes RGB, HSB, RGBA, Hexadecimal Codes as well as color names. 

We're learning through experimentation how order of operations affects our code. For one thing stroke and color can affect everything if it's the only one of its type and it needs to be above the shape it's referring too. 

I'm most proud of this little alien I created. Let's see what I can make tomorrow. 

~ Lisa Lou