Layering

Let’s talk now about the importance of ordering, of layering. There are instructions we will give to the computer that will be succeeded by other instructions. The order of these operations will be important in determining the logic of stratification: i.e. the logic of what is placed on the canvas first, what is placed second, etc.

Instruction List

We will start very simple. To start we will create a list of linear, simple instructions: we will create a canvas, we will color its background, and then we’ll put a shape on top of that. For example, we could put a circle in the center of this canvas that we just defined, using the width and the height of this drawing canvas.

Later we are going to create loops. In these loops, we are going to ask P5: “Hello P5, please draw for me lines that extend from this part of the canvas to that part of the canvas. Draw for me different colored ellipses, with a hundred ellipses inside of the looped instruction.”

Even within loops - and even including endless, animated loops that evolve over time - there is nonetheless a notion of order which is still respected, even within the busiest and most complex parts of the program. It is therefore important to understand this process of ordering, and the list of numbers that accompagny it.

Setup

Let’s open the browser, and type editor.p5js.org. I will log into my abstractmachine account. And here I am going to erase the “draw” function and keep only “setup”. Inside setup, I’ll even erase all the instructions there.

Here we see the most minimalist program that does absolutely nothing. It is perfectly acceptable to create a program that does absolutely nothing and the computer will follow your instructions without complaint.

In P5 we always have at least the “setup”. We also have another possible function called “draw” that we will explore in a future video.

The “setup” function does what its name indicates. For now forget why there are parentheses and braces: just tell yourself that everything between the opening and closing braces is a series of statements that will be defined and executed in order - and that inside are instructions on what P5 should do when we “set up”, i.e. when we “turn on” our drawing. The “setup” function describes the elements that define the starting point, the beginning of our drawing.

Instruction Numbers

Perhaps you have already noticed that there are numbers, and the numbers describe the order of operations. This is what I was explaining earlier: these numbers describe the order of layering.

If I ask P5 to draw an ellipse on instruction #2, and then I later decide to create a new background color in instruction #3, this instruction #3 will erase all the contents of the ellipse that would have been drawn in step #2. So it’s important to do things in a certain order.

Your Morning Routine

Think about your daily life. If you get up, you undress, i.e. you take off your pajamas. Or let’s say you sleep entirely naked and you get up, you get in the shower, you get out of the shower, you dry yourself off and you get dressed … it’s not at all the same sequence of operations than if you get up, you get dressed, and you then go into the shower. In this case, you will have a completely different result.

The order of operations should follow the idea of what you want as a result on your canvas.

Painting or Drawing?

I just said “canvas”. So there is an instruction called “createCanvas” which is — as its name suggests - the creation of the drawing canvas. Or painting. I keep saying drawings, and in the other videos I said “drawings”. Maybe I should say “painting” because Processing at its core is much closer to painting than drawing software like Illustrator. It’s closer to Photoshop with a notion of pixels and the pixel it puts on top of other pixels. This notion is closer to painting, and to this process of stratification. So I will try to use the idea of ​​a painting canvas - although the term for some reason strikes me as a little odd.

windowWidth, windowHeight

I am going to create a canvas and as you have seen in the example it is essential to set the width in pixels of this drawing canvas. There is a trick that I will teach you right away. I use something called “windowWidth” and “windowHeight” which are variables already known by P5 at its core. Each represents an adaptive value. It does not just represent one single value like 400 pixels, 500 pixels, 300 pixels, or 2000 pixels. These values depend on the available window of your browser. It will take the number of pixels in width, and the number of pixels in height that are available.

If we look at my example, in the drawing space I can have a wider or narrower drawing, and the same for the top and the bottom. By writing createCanvas(windowWidth, windowHeight) my drawing will adapt to the available space. It becomes very practical when, you want to draw in “presentation” mode, for example when making an installation for an exhibition. I will explain this to you in another video.

Background

Once I have created this canvas, I will paint a color on the background. Here I will paint the color black. The value of the color black - quick tip - is zero. That’s all. I now have a shape drawn in this space that extends to the available space of the window, depending on how much space I give to P5 in my browser.

Circle

Finally we will create a circle. Here there are also some magic words that I could have used, but I will keep it relatively simple: I will just put my circle at the top left of the screen. Here I am going to go 100 pixels starting on the x axis, and 100 pixels on the y axis. I know there are a lot of notions that I just dropped on you. I said “x,y” and “100,100”. Forget all that for now. Just know that I am trying to define the horizontal and vertical position of my circle. And define how many pixels of width I want for my perfectly round circle. These instructions move a hundred pixels from the left edge, a hundred pixels from the top edge, and paint a circle, i.e. a perfectly round ellipse.

The Order of Instructions

So here is the order of the operations which are here described by lines #3, #4 and #5. All three are instructions of what P5 will do when I set up my drawing.

Hidden Shapes

As I said earlier: if I make an order that is not well thought out, I will no longer see my circle. I could have created a canvas, drawn a circle on it, and on top of my circle (in stacking order) painted a black background. The stratification is still perfectly respected. In the “setup”: line #1 (first step) says to create a canvas that takes up all of the available window space, then to draw a circle, and then to pour a big paint bucket on top of all of that, creating a black background. This gives me a drawing that erases the previous drawing. It gives a painting that erases another painting.

From Back to Front

Now, if I change the order of these instructions — if I say “first, create the canvas, then the background, and then the circle” — I will see my circle appear again on top.

Black and White

We are in black and white, but of course there are colors in P5. The order of operations will be even more important when you start to mix colors because you can have colors that “blend” together - especially in P5, unlike Processing where it was sometimes a little more difficult. In P5 there are a lot of options to indicate the “blend” type of of the different layers of paint.

Conclusion

For now, just remember the essentials and ignore what I just said about colors. Just remember that the numbers on the side describe the order of actions, starting with the base, the background, and then what I’m going to draw on top of it.