To paint inside our canvas we will need some shapes.

When you look at things created on a computer with algorithms, you might say to yourself “This looks very complicated to make.” In reality it often comes down to just a few very simple basic shapes and a game of layering, of stratifying simple forms. When you look at the work of Casey Reas - one of the “Processing” designers -, for example paintings like this: perhaps we say to ourselves “There are a lot of gestures in there, it’s a bit complex”. Whereas in reality, when you look at the thing being painted, you realize that it is nothing more than a slow and gradual movement of a few basic triangles. We also see it in other works by Casey Reas, such as his installation in Miami: this is a screening that took place every evening, at sunset until morning. There are projections of evolutionary forms. When we look closely we see again it is nothing but simple shapes. Here with a gradient and a shift in the shape itself, but in fact it’s nothing more than simple shapes that we will repeat. So tell yourself that it’s not actually all that complicated, if you understand the order of layering of the elements. If you know the basic instructions for drawing your shapes, you can do a lot. Anyway, I hope you will find it interesting. Or let’s say, at least, that I could possibly find it interesting to paint on my computer.

So what are the shapes?

Here, I have created — as I will ask you each time, in the setup() function of my algorithmic painting — a canvas that adapts to the totality of the available space. We have already seen that I can make shapes, for example a circle, and if you have watched the previous videos you know that we can take advantage of a magic word, a keyword, by which P5 knows the width of my canvas - regardless of the canvas width - with the word “width” and the word “height”. By setting the x position of my circle in the middle of this width and height and then assigning it a size, say 200 pixels, I can draw a circle in the middle of the screen.

If you don’t want a totally round shape, you can also make an ellipse. We will also put it in the center of the screen and this time I will allocate 150 pixels for width and 100 pixels for height. Which gives me an ellipse inside the circle.

I can also use more modular shapes - by that I mean I’m going to use 75% of the drawing space to define the diameter of the circle. I could also say it’s going to be half the height. “Divide by two” is also “multiply by 0.5”, i.e. 50% of the width and 50% of the height. This will give me a circle, as before. Written this way, I could start modulating and having an ellipse that won’t have a perfectly circular shape.

So those are the circle and ellipse functions.

There are also “squares” - if we have circle, then we also have square - and I could put my square in the middle of the screen. I can multiply by 0.5, or I can also divide by two. As you like. Here I am going to tell my square to be in the middle of my painting surface, of my canvas. I’m going to draw a square with a width of say 50 by 50 pixels.

So what happened here? I made a mistake: I gave four parameters, which defined the roundness of the corners. Sorry. We only needed three values.

For this square, I will place it, as before, in the center of the width and height, using a width of 50 pixels. And you are going to tell me “but in fact it is not totally in the center, it is decentered”. It’s the same with rectangles. If I don’t want a totally square shape, I can multiply by “0.5” to position the x andy of my rectangle with a width of 100 pixels and 150 pixels (remember, the order is important). And I see that my rectangle does not start completely from the center, but is rather offset.

In fact, rectangles and squares are defined from their corner, at the top left of the square. Here is an illustration of this principle. Ellipses and circles are drawn from their centers, while rectangles and squares and are drawn from the top left corner. Then we define in another parameter the width and the height of this shape. This is another way to draw shapes for rectangles and squares.

There is a way to change this behavior: if you prefer to draw your rectangles and squares from the center, you can activate rectMode (center). This command will put your shapes in the center.

You also have shapes like triangles, for example if I draw from the top left of my canoe goes with 50.50 (in pixels) for the first point and 150.100 (in pixels) on the second and we will go back to 100,200 for the 3rd point.

Note that I have put a small space: it is not necessary. Basically we must give it six numbers to define the position of the point x, y of the first point, x, y of the second point, and x, y of the third point. There, I have a triangle that was created here at the top.

Obviously I can also use more modular, more adaptive values, which could adapt to this magnificent painting. If I put it in “present” mode, the drawing will adapt according to the width and height of my canvas which is now more extended. Triangles take six values ​​and those values ​​correspond to x, y values ​​of three points of a triangle.

There are arbitrary shapes that I won’t show you now but you can have open and closed shapes that follow a more random outline. For example the silhouette of a person or a shape. Let’s stay in the simplest forms.

We have already seen that there is the “point”. Here is a point (0,0). If I draw a point, you can see in zoom that I have a pixel, a point, which created itself at the top left of my design space.

Another simple shape, often used in P5, is the line which could go from this point 0,0 to the width of my drawing, and in height. It will therefore completely cross the painting space. I can also tell it to go down a hundred pixels in width and down a hundred pixels in height. I can tell him to go to the center x 0.5 for the width and height x 0.5, and he will have up to the center. If I save, and I put myself in “present” mode, we might see something a little different depending on the adaptive space of my canvas.

Simple shapes: line, circle, square, triangle,… And like I said, there are even more complex shapes. If you want to know the full list of instructions and know the settings in more detail, there are many tutorials online. There is documentation - since this is an open source project, the documentation is a collective contribution. There is a reference on the P5js.org site. We see in the reference that there are colors that we will look at in another video, but that there are also “Shapes”. We see primitives like line, point, rectangle, square, triangle, arc, and so on… with the possibility of drawing for example “bezier curves” with “vertices”. You have the ability to create curves and you even have 3D primitives - because you can put 3D shapes in your 2D drawing and you can put 2D shapes in 3D space. But it will be for another time.

If I go into the documentation of the “point” I see that there are demonstrations, directly in the browser, which illustrate these different things like “line”, with a little explanation.

Online documentation that you will find on the p5js.org site with references. You do not have to read this documentation before starting, it is rather if you want to go into the explanations more.