Now let’s look at the canvas in P5. The canvas is very simple. It’s like painting: a surface on which we are going to paint.

Here we will work on the screen. It is possible to draw in P5 on other supports, but here we will start on a screen. And we will rather stay in two dimensions. Three dimensions is possible, but we will mainly work in two dimensions.

Here is the basic outline that P5 gives you. Here we are looking at the most minimalist version, with our instructions for placing our paint. We have the “setup” function in which I create a canvas of 400 pixels by 400 pixels. If I give a background color, with the number 0, it will give me a black canvas. With the numbers 255, I will see a white canvas. If I write 128 - it’s roughly in the middle of these two values ​​- I have a gray canvas. With a size of 400 x 400 pixels.

I’m going to take a little drawing of everything I just did there. We see that P5 creates a canvas for me. And this canvas is defined with 400 pixels wide and 400 pixels high. In English we say “height” and we say “width”. So there is the width and the height: currently it is 400 by 400.

I’m going to draw, and I’m going to start from point 0.0 in pixels. If I ask P5 to point me, at position 0,0 I will see a small pixel appear here. If I ask it to create a point by moving 200 pixels on the ‘x’ axis (in width) and 200 pixels on the ‘y’ axis (in height), and I ask it to make a point at ” 200,200 “, it will put a dot right in the middle of my canvas.

If we watch this in action, I could create for example a white background. No, in the end I’m going to stay gray. I could then ask him to make a point “200,200” which is right in the middle of my painting space. So P5 created a tiny dot for me which is visible if I zoom in with the mouse. It is therefore possible to draw a very small point where you want on my canvas.

In this example we have given exact dimensions, because we know at the start what we want as the width and height of the design. But if you look at an artist like Sol Lewitt, a conceptual artist who gave drawing and painting instructions. His instructions were kept very simple. The artist did not perform his own paintings, and these instructions allowed his paintings to adapt to the medium.

In the series of “Wall Drawings” we see shapes, for example here one of the most famous paintings by Sol Lewitt. And we see that, depending on the space available, this painting will unfold very differently.

If you want an example, there are people who have fun recreating Sol Lewit. For example, the “Solving Sol” project translates Sol Lewitt via algorithms into computer drawings. Here are the starting instructions written by Sol Lewitt. Wall Drawing number # 17, 1969:

“Four part drawing, with a different line direction in each part.”

So what happens? Here we see that on the surface, we have four different designs. And we can imagine that depending on the location or the size of the screen, the design will adapt.

There is also a way of working this way in P5, not using instructions with precise numbers but with special words. “WindowWidth” means the size available in width of the window, and “windowHeight” for the height. Please note: there is a capital letter on the “W” and on the “H”. It’s a tradition in programming. The computer is stupid, and won’t understand two words for a single instruction. We therefore attach the words together with capital letters. Forget it: it’s just a strange peculiarity of programming. “WindowWidth” and “windowHeight” will make the drawing fit my window regardless of its width.

I will test this. I will create a little more space. If I relaunch my painting, I see that my canvas is much larger. On the other hand, point has been defined with 200 pixels starting from this top left corner: it will start from 200 pixels on the x axis and 200 pixels on the y axis. I’m going to go pixel hunting and that’s it I found it. It is here, this pixel.

As you can see, we are no longer at the center of my drawing. Why? Well, because P5 did exactly what was asked of it. He was asked to start 200 pixels horizontally and descend 200 pixels vertically, then to make a point. But if the width and height of the space is different than 400x400, 200 is no longer in the center of the drawing. There is a trick to fixing this, which I am going to ask you to use right now. This is a word that is known by P5, which knows the number behind that width and behind that height. It’s called “width” and it’s called “height”. We can start using for example “width” divided by two and “height” divided by two. It will take whatever width it is and whatever height it is and put the point in the middle. If I now go hunting for my pixel, I’ll find it right in the center of my canvas, and the computer does that for me.

To see a little better, I’m going to create a circle. I’m going to put this circle in the middle of the width of my canvas, and I’m going to put it in the middle of the height of my canvas, with either a fixed number - say a hundred pixels. But we also have the same story: if I have a very small narrow space, or a much larger drawing space, the width of my circle will not adapt to my canvas. For the diameter of my circle, I could say that this circle will take the entire height or the entire width of the canvas. Otherwise another proportion. For example I could multiply by a quarter - in English we use points and not commas - we will therefore multiply (*) by “0.25” of the height. It’ll give me an ellipse that’s 0.25 or 0.5 or 0.75 - which will give three quarters of my space.

If I activate the “presentation” mode - here I save my drawing, I enter the “share” button, and I will select the “presentation” mode - I see, in full screen, my drawing perfectly adapted to the whole of the available surface. Here it is my computer screen.

If you want to do an installation with P5 you have a “file> share> present” mode where you can put your canvas in style. It takes up the entire screen space and we see in this example the interest of working, like Sol Lewitt, with an adaptive canvas.