Changing the drawing size¶

When we talked about moving a drawing, we mentioned that it is better to do all the calculations in the program, because it is easier that way to move the drawing, or to draw it in several places when needed. The situation is similar when we want to draw the same drawing in different size, possibly in several places (each could be in different size). Instead of calculating all the coordinates from scratch, it may be enough to change one single number in our program to get a drawing of another size.

To learn how to make drawings that can be resized easily, let’s first see what needs to be changed in a drawing program so that the drawing gets a different size. For example, if we drew a cloud using these statements:

def cloud(x, y, shade):
    # draw a cloud of three circles
    gray = (shade, shade, shade)
    pg.draw.circle(canvas, gray, (x,      y), 50)
    pg.draw.circle(canvas, gray, (x - 50, y), 30)
    pg.draw.circle(canvas, gray, (x + 50, y), 30)

cloud(200, 200, 180)

and now we want the cloud to be twice as small and its midpoint to be still at point (200, 200), then we would change the function given above to:

def cloud(x, y, shade):
    # draw a cloud of three circles
    gray = (shade, shade, shade)
    pg.draw.circle(canvas, gray, (x,      y), 25)
    pg.draw.circle(canvas, gray, (x - 25, y), 15)
    pg.draw.circle(canvas, gray, (x + 25, y), 15)

The radii of all three circles should be cut to half the previous size (25 pixels instead of 50 and 15 instead of 30), but that is not enough. If the centers of the small circles remained where they were, we would get three separate circles (try it). In order for the drawing to still look like a cloud, we also need to bring the circles closer together. More specifically, the distances of the centers of the smaller circles from the center of the large circle should also be twice less than before, that is, 25 instead of 50 pixels.

In general, we do not always want a cloud that is twice as small, but that the clouds can be of different sizes. In addition, we do not want to create a separate function for each cloud size, but to have one function that can draw a cloud of a given size. IUt would be the most comfortable if we could set the size of the cloud with only one number and change the size of the cloud by changing that one number. To do this, we need to express all the sizes that change with the change of cloud size (which is the distances between the centers of the circles and the radii of those circles) using one selected size. For example, for that selected size we can take the radius of the middle circle, which we will denote by \(r\). The distances of the centers of the smaller circles to the center of the larger circle are exactly \(r\), and the radius of the smaller circles is equal \({3 \ over 5} r\) regardless of the size of the cloud. When we use all these relations we have noticed, the function looks like this:

def cloud(x, y, r, shade):
    # draw a cloud of three circles
    gray = (shade, shade, shade)
    r_small = round(3 * r / 5)
    pg.draw.circle(canvas, gray, (x,     y), r)
    pg.draw.circle(canvas, gray, (x - r, y), r_small)
    pg.draw.circle(canvas, gray, (x + r, y), r_small)

The function has one parameter more - besides the position and the shade of gray, we also set the size of the cloud to this function. Now we can make drawings like this:

Now, let’s list the steps for a general procedure to remake any movable drawing so that it can be resized as well:

• We need to determine one length in the drawing, which will be set directly. We can call this selected length basic length or unit of measure. In the example of clouds, the basic length is the radius of the middle circle.

• All radii of the circles of which the drawing consists are expressed in proportion to the basic length. This means that if our base length is denoted by \(a\), all other lengths in the program will be multiples of \(a\), for example \(2a\) or \(5a\). We determine the number \(a\) from the ratio of the required length and the selected basic length in the initial drawing (this ratio remains the same when the size of the drawing changes). In the example with the cloud, the radius of the small circle is always \({3 \over 5}\) of the selected basic length \(r\). If rectangles or ellipses appear in the drawing, the heights and widths of those rectangles and ellipses should also be expressed in proportion to the basic length, in the same way as the radii of the circles.

• We determine the coordinates of all points with respect to the principal point, by adding or subtracting a certain number of basic lengths to coordinates of the principal point. The required number of basic lengths is determined again from the relation in the initial drawing. In the example with the cloud, to obtain \(x\) coordinate of the center of the left circle, we subtract one basic length from \(x\) coordinate of the main point (center of the middle circle). We do so because the ratio of the difference of \(x\) coordinates and basic length equals to one. The same procedure applies in principle to \(y\) coordinates, though in this case it is particularly simple. Since \(y\) coordinates of the centers of the circles are the same, the ratio of the difference of the \(y\) coordinates and the basic length is zero, so zero basic lengths should be added to \(y\) coordinate of the anchor to get \(y\) coordinate of the center of a smaller circle.

To better understand the process of resizing a drawing, we will also apply it to the example of a teddy bear.