Moving the drawing¶
In the previous examples, we made several drawings composed of basic shapes. In doing so, it was necessary to determine the correct position for each of these shapes to fit all the pieces together. For some drawings, it was possible (and in some tasks required) that the coordinates of individual points be calculated based on the known coordinates of other points. This computation could have been done outside the program and then the calculated coordinates could just have been entered into the program. However, it is better to perform such calculations in the program itself, for several reasons:
We may not calculate the coordinates correctly in the first attempt. In such a situation, it is easier to modify the calculation instructions (i.e. the program) than to calculate everything manually from start.
When we create the drawing ourselves, it may be that after the first version of the program we may want to add something, for example on the left side of the drawing, but that we do not have enough space. In this case, the whole drawing should be moved to the right, so that the x coordinates of all points are increased by the same value. If we manually calculated the coordinates of the points, we need to calculate them all again. In a well-organized drawing program, it is sufficient to change one number to move entire drawing to the right. This process may need to be repeated several times until we are happy with the position of the drawn part, so trying it out is a lot easier when the program does the calculation instead of us.
If we want to draw the same drawing in multiple places in the window, the benefits of computing inside the program come to light again.
We will now systematise the coordinate computation a bit more and use it to move the drawn objects more easily. Before we get started, it would be a good idea to check the background and answer these questions:
- (50, 60)
- Try again.
- (50, 80)
- Try again.
- (40, 70)
- Correct!
- (60, 70)
- Try again.
- (40, 60)
- Try again.
Q-62: What are the coordinates of a point 10 pixels to the left of the point (50, 70)?
- (50, 60)
- Try again.
- (50, 80)
- Correct!
- (40, 70)
- Try again.
- (60, 70)
- Try again.
- (40, 60)
- Try again.
Q-63: What are the coordinates of a point 10 pixels below the point (50, 70)?
- pg.draw.rect(canvas, color, (70, 120, 50, 60))
- Try again.
- pg.draw.rect(canvas, color, (100, 150, 110, 120))
- Try again.
- pg.draw.rect(canvas, color, (100, 150, 50, 60))
- Try again.
- pg.draw.rect(canvas, color, (70, 120, 80, 90))
- Correct!
- pg.draw.rect(canvas, color, (70, 180, 80, 90))
- Try again.
Q-64: The rectangle is drawn using pg.draw.rect(canvas, color, (100, 150, 80, 90)). How can one draw a rectangle of the same size, located 30 pixels to the left and 30 pixels above this rectangle?
- pg.draw.circle(canvas, color, (100, 120), 40)
- Correct!
- pg.draw.circle(canvas, color, (100, 160), 40)
- Try again.
- pg.draw.circle(canvas, color, (120, 100), 40)
- Try again.
- pg.draw.circle(canvas, color, (160, 100), 40)
- Try again.
- pg.draw.circle(canvas, color, (20, 120), 40)
- Try again.
Q-65: The circle is drawn using pg.draw.circle(canvas, color, (100, 200), 40). How can one draw a circle of the same size above this circle and touching it?
Changes to make a drawing easily movable¶
Let’s see how a cloud is drawn in the following example:
Let’s summarize, with small generalizations, what needs to be done in order to be able to show one drawing in various places:
We need to select one point whose coordinates are set directly. We call this selected point the main point, (sometimes this point is also called anchor). In the example of clouds, the main point is the center of the middle circle.
After selecting the main point, the coordinates of all other significant points are determined in relation to it by adding or subtracting a certain displacement to the coordinates of the main point. In the example with the cloud, to get \(x\) coordinate of the center of the left circle, from \(x\) coordinate of the main point (center of the middle circle) we subtract 50 pixels, and for the right circle we add 50 pixels.
In the general case, there may be shapes other than circles in the drawing. The significant points that determine the positions of these shapes are:
for a line: its ends
for a polygon: its points
for a circle: its center
for a rectangle: its upper left corner
for an ellipse: the upper left corner of the rectangle in which that ellipse is inscribed
All of these points should be given with respect to the main point, that is, their coordinates should be expressed as coordinates of the main point, increased or decreased by some value.
Check your understanding of the previous explanations and answer the questions.
- pg.draw.line(canvas, pg.Color("red"), (x-50, y-50), (150, 150))
- Try again.
- pg.draw.line(canvas, pg.Color("red"), (x-50, y-50), (x+50, y+50))
- Correct!
- pg.draw.line(canvas, pg.Color("red"), (x-50, x+50), (y-50, y+50))
- Try again.
- pg.draw.line(canvas, pg.Color("red"), (x+50, y+50), (x+150, y+150))
- Try again.
Q-66: We want to customize a drawing consisting of several shapes so that everything is drawn relative to the anchor with the coordinates x = 100, y = 100. One of the statements that form a drawing is
What statement should replace the given one?
Q-68: We want to customize a drawing consisting of several shapes so that everything is drawn relative to the anchor with the coordinates x = 100, y = 100. One of the statements that form a drawing is
The program calls the framed_circle function seven times, which draws the given circle with black border (though it could have been avoided for the three small black circles). To be able to change the position of the drawing, let’s select the main point (anchor). Make it the center of a large circle, that is, the heads of the bear. The coordinates of this point are (250, 150). Now we need to express the coordinates of the centers of all other circles relative to the main point. Take the bear’s right ear as an example.
\(x\) coordinate of the center of the right ear is \(310 = 250 + 60\), while \(y\) coordinate is \(80 = 150 - 70\). From here we can see that the coordinates of the center of the right ear can be written in the program as (cx + 60, cy - 70), where (cx, cy) are the coordinates of the main point.
Follow the same procedure for the other circles and complete the draw_teddy function.
Let the main point be: code: (x, y) = (50, 150). Complete the started remodeling of the program in the box below, where the drawing is done in the function draw_house(x, y, wall_color). After making sure that the drawings in the two programs look the same (except that they draw in windows of different sizes), replace the call draw_house(50, 150, pg.Color (" khaki ")) with the next 4, to get the picture as when clicking the “Play task” button:
draw_house(150, 90, pg.Color(220, 220, 220))
draw_house(220, 130, pg.Color("white"))
draw_house(350, 160, (255,255,150))
draw_house( 50, 150, pg.Color("khaki"))
In the program that follows, the drawing function is just started. Complete it by drawing the same drawing, but using the anchor \((x, y)\), which is located in the center of the blue circle (initially this is the point \((100, 100)\)).
When you finish the function, make sure it works the same as when you click the “Play task” button.