© The Author(s), under exclusive license to APress Media, LLC, part of Springer Nature 2021
M. Cywiak, D. CywiakMulti-Platform Graphics Programming with Kivyhttps://doi.org/10.1007/978-1-4842-7113-1_2

2. Two-Dimensional Mapping and Rotation Equations of a Point

Moisés Cywiak1   and David Cywiak2
(1)
Leon, Guanajuato, Mexico
(2)
Queretaro, Mexico
 

In this chapter, we cover basic equations for rotating two-dimensional points and mapping them on the computer’s screen.

2.1 Rotation Equations

In this section, you learn the basic transformation equations to rotate points on a two-dimensional plane. You’ll begin by finding the equations that relate the coordinates of a point in a two-dimensional static coordinate system to a rotated one. The static coordinate system (x, y) has two-unit direction vectors, i and j. Analogously, in the rotated system with coordinates (x, y) the direction vectors are iand j. The angle of rotation between both coordinate systems is θ, as depicted in Figure 2-1.
../images/510726_1_En_2_Chapter/510726_1_En_2_Fig1_HTML.jpg
Figure 2-1

Two-dimensional static coordinate system and a rotated one to calculate coordinates of a point given by a constant position vector P

As shown in Figure 2-1, the direction vectors in the rotated system can be expressed in terms of the unit vectors of the static system and of the angle of rotation as:
$$ {i}^{prime }=mathit{cos}left(	heta 
ight)i+mathit{sin}left(	heta 
ight)j $$
(2.1)
$$ {j}^{prime }=-mathit{sin}left(	heta 
ight)i+mathit{cos}left(	heta 
ight)j $$
(2.2)
We now express the constant vector P in both systems as:
$$ P= xi+ yj={x}^{prime }{i}^{prime }+{y}^{prime }{j}^{prime } $$
(2.3)
Substituting Equations (2.1) and (2.2) in Equation (2.3) gives:
$$ P= xi+ yj={x}^{prime}left[mathit{cos}left(	heta 
ight)i+mathit{sin}left(	heta 
ight)j
ight]+{y}^{prime}left[-mathit{sin}left(	heta 
ight)i+mathit{cos}left(	heta 
ight)j
ight] $$
(2.4)
Equating vector components in Equation (2.4) gives:
$$ x={x}^{prime}mathit{cos}left(	heta 
ight)-{y}^{prime}mathit{sin}left(	heta 
ight) $$
(2.5)
$$ y={x}^{prime}mathit{sin}left(	heta 
ight)+{y}^{prime}mathit{cos}left(	heta 
ight) $$
(2.6)
For programming purposes, the static coordinate system (x, y) corresponds to the screen and the coordinate system (x, y) corresponds to a reference system that rotates around the origin. Thus, from Equations (2.5) and (2.6), we express the (x, y) coordinates as:
$$ {x}^{prime }= xcosleft(	heta 
ight)+ ysinleft(	heta 
ight) $$
(2.7)
$$ {y}^{prime }=- xsinleft(	heta 
ight)+ ycosleft(	heta 
ight) $$
(2.8)

Equations (2.7) and (2.8) are used in our programs to rotate the polygons.

2.2 Mapping Spatial Two-Dimensional Points to the Screen

To correctly map points from a two-dimensional Cartesian coordinate plane to the computer’s screen, it is necessary to consider inherent differences between them. On the Cartesian, two-dimensional plane, a pair of real numbers (x, y) determines the position of a determined point. In contrast, in a computer display, pixels are arranged in a two-dimensional grid in which a pair of integer numbers, which we will denote as (n, m), determines the position of a pixel. The integer n corresponds to the column index of the pixel and m to its row index. Thus, mapping points from a two-dimensional coordinate system to the computer’s screen requires mapping pairs of floating numbers (x, y) to pairs of integer numbers (n, m). Strictly speaking, the function in charge of this task is not bijective.

To obtain analytical relations between the Cartesian coordinate plane and the screen, we first assume that the coordinates of the points on the screen are real numbers rather than integers. This assumption will not alter the results because, in the end, we will take the integer part of the calculated values.

For our calculations, let’s draw two coordinate planes, one below the other, as depicted in Figure 2-2. The upper drawing is a region of a Cartesian coordinate plane around the origin. The lower one consists of a rectangle region on the Cartesian plane resembling the computer’s screen with its center shifted from (0, 0). We want to obtain analytical expressions to map points, from the upper coordinate plane to the ones on the screen on the lower Cartesian plane. The procedure is as follows.

Let’s consider a point on the upper Cartesian (x, y) plane, pointed by vector P and a point with coordinates (xp, yp) pointed by vector Q on the screen, on the lower plane, as shown in Figure 2-2.

We want to find an analytical correspondence between the coordinates of both points. We will impose the vector Q on the computer’s screen to be a scaled version of P. We have to fulfill this requirement with each vertex of the polygons, built in the Cartesian plane, to display a scaled version of them on the screen.
../images/510726_1_En_2_Chapter/510726_1_En_2_Fig2_HTML.jpg
Figure 2-2

Mapping a point with coordinates (x, y) to a point (xp, yp) on the computer’s screen. Vector C points toward the center of the screen

Based on this description, we will write Q = ScaleP. Here, the scale factor is represented by the parameter Scale.

From Figure 2-2, we can see that R = C + QR = Xpi + Ypj, and C = XCi + YCj. The coordinates (Xc, YC) represent the center of the screen. It then results that:
$$ {X}_pi+{Y}_pj=left({X}_C+ Scalex
ight)i+left({Y}_C+ Scaley
ight)j $$
(2.9)
From Equation (2.9), dividing the vector equation into its components gives the pair of required mapping equations, which can be written in a more general form as:
$$ {X}_P={X}_C+left( Scale\_X
ight)x+{X}_0 $$
(2.10)
$$ {Y}_P={Y}_C+left( Scale\_Y
ight)y+{Y}_0 $$
(2.11)

In Equations (2.10) and (2.11), we have increased the scaling options by introducing two independent scaling terms in the x and y directions, Scale _ X and Scale _ Y. Since we need to shift the points to other regions of the screen, we have introduced additional shifting parameters, (X0, Y0).

Equations (2.7)-(2.8) and (2.10)-(2.11) can be used for constructing and rotating polygons in a two-dimensional space and displaying them on the computer’s screen. In the following chapter, we illustrate the use of these equations.

2.3 Summary

In this chapter, we obtained analytical equations for rotating points in a two-dimensional Cartesian plane. Additionally, we derived analytical equations for mapping them on the computer’s screen. These equations are used in the following chapter to construct two-dimensional polygons in a two-dimensional coordinate system to be displayed and rotated on the computer’s screen.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset