The official launch of the site will take place soon. Stay tuned.

Shape it!

What shape does your (he)art have?

2D shapes are the basic building blocks of our art. From the simplest ones like a point or a line to complex ones like an ellipse, polygons and our own shapes defined by a sequence of points called vertices.

Shapes on our toolbelt

The p5js library comes fully equipped with all basic shapes as well as tools for creating any shapes. Working with shapes is very simple and straightforward. The names of the individual shapes are intuitive and easy to understand. Each shape is defined by its position (x, y) and dimension. The dimension is missing only for shapes such as point, line, and vertex, which in themselves have no dimension. Let’s take a look at how individual shapes are created and what their parameters are.

First things first

All shapes have something in common. The way how they can change their fill color (if they have an area), the color of the line stroke, the thickness of the line stroke, their angle of rotation. Here we will get acquainted with all commands that perform these operations. The line stroke thickness is defined by an integer value and represents the thickness in pixels.

strokeWeight(5);

The color of a line stroke is defined by specifying the color in several formats. In our case we will stay with the HEXADECIMAL format. For example, #ff0000 is red. We will talk more about colors in the Colors chapter, which deals with colors in detail.

stroke(“#FF0000”);

One command can be used to cancel the drawing of a line stroke completely. For shapes that do not have an area (point, line), nothing is drawn.

noStroke();

... and now back to shapes

Point

The point is the simplest shape in our tool belt. It is defined only by its position on a two-dimensional surface. It is defined by the X and Y coordinates. The point is then drawn as a small dot on the canvas. The default point size is one pixel. Look at the code bellow.

point(200, 200);

The size of this point can be changed with the strokeWeight(size) command, which does exactly what it is called. Size is an integer value and indicates the number of pixels of point thickness. Let’s look at the code for drawing a point and changing its default size to five pixels.

strokeWeight(5);
point(200, 200);

Another feature that can be changed for a point is its color. For more information on colors, see the Colors chapter. In our case, we will draw a point at X and Y coordinates. The point will be five pixels thick and we will change its leading color (black) to red. The color can be changed with the command - stroke(“#ff0000”). Let’s look at the code for drawing a point, changing its thickness, and changing its color.

strokeWeight(5);
sroke('#ff0000');
point(200, 200);

Note that all commands that change the thickness, color, etc. must be specified before the point(x, y) command itself. Otherwise, they would not affect the point.