Building Blocks

So as a beginning step to learning code and programming, P5JS can help with visualizing some basics.

These two functions are the bread and butter for the structure to what we can do with drawing on a computer.

setup – self-explanatory as is the case with much P5JS’s wording. This is the initial phase of the program and this happens before the function draw. This is used to give a basis of what we are working with for the program.

draw – This is where the meat and potatoes should be happening. Here we can take advantage of all the predetermined functions for shapes and much more the p5JS library has to offer. Examples being lines and shapes and color to list very few.

Heres a link to the References page on the P5JS website to read up on all the different functions in their library. It can be quite a read and a scary sight, but if you pick and choose what functions you want to learn about one at a time, it becomes bearable.

Playing around with some functions and reading up on how to use them by reading the reference material, I was able to put some shapes together.

Now how I said before the setup function is the initialization. This brings us to a thinking point… Does order matter with coding? Below I wrote out a simple test to see which background color would appear depending on where I put the function. In setup(), I told the background to be red, and in draw(), I told it to be green. It turns out that because the draw function runs second, after the setup function… the background resulted in being green.