|
Any soccer fan who watches World Cup or Euro Cup on TV, is used to the
animations of the
soccer ball
shown before many games, which became so popular in 1990s. As a soccer fan,
and a person learning computer graphics, I was curious about making something like what I see on TV.
First I had to figure out how to draw the ball.
I had an old, worn-out
Tango from World Cup'1978 in Argentina to use as a model in front of me.
Today it's possible to find
graphical tools that could be used to make such
images,
and draw a nice picture without knowing much about the ball itself. This article is not about them. I will focus on the mathematical part of the task. Once this part is solved, it's possible to draw a decent image using very basic computer graphics techniques.
The classic soccer ball is made of the collection of leather pieces of 12 regular pentagons (that are usually painted black) and 20 regular hexagons (painted white). The pentagons are
placed at the vertices of imaginary icosahedron (one of the
Platonic perfect solids), and separated one from another with the hexagons. The pentagons and hexagons border each other, and therefore have the same side sizes.
|
|
I am not claiming that this is the only way to draw the ball, but knowing
where exactly the points that define the pentagons (and the hexagons) are in 3D, can get us started.
Knowing these points, I can draw a sphere, reshape the seam areas (this is where pentagons and
hexagons border each other) and paint corresponding areas as I wish.
First, let's start with figuring out coordinates of the icosahedron vertices. For simplicity, we set ball radius to be 1, and center of the ball to be at (X=0,Y=0,Z=0). Also, let's position the top vertex, T at (0,1,0), and bottom at (0,-1,0). For simplicity, we position one of the vertices neighboring T (I will call it A), at Z=0. What are the other two coordinates of A, X and Y? To calculate them, it would be enough to know ∠TOA, the angle between imaginary lines connecting the center of the ball (O) with T and with A.
I will use the fact that all distances between neighboring vertices are the same, therefore
∠TOA is the same as ∠TOB, ∠AOB, ∠AOC and ∠BOC. Let's call the ∠TOA beta (β). Then coordinates of A, B and C are the following:
| |
X |
Y |
Z |
| A |
sin β |
cos β |
0 |
| B |
sin β cos72° |
cos β |
sin β sin72° |
| C |
sin β cos36° |
-cos β |
sin β sin36° |
We have following equations:
Subtracting one from another, we get:
sin²β×(cos36° - cos72°) = 2×cos²β
or
tg²β×(cos36° - cos72°) = 2
Using the fact that
 |
and |  |
we get
tgβ = 2
and finally:
|
sin β = 2/√5 | and | cos β = 1/√5 |
As we have the value for beta, it's very easy to represent all the remaining vertices. Five vertices neighboring the top vertex T, will all have the same Y coordinate as A, cos β. All of them are
on the circle on the plane ABD, and all are the corners of the regular pentagon with bounding radius of sin β. Enumerating them as N from 1 to 5, we have
X (N) = sin β × cos (N×72°)
Z (N) = sin β × sin (N×72°)
Finding the other five vertices (of the lower hemisphere) is trivial: icosahedron is symmetrical.
Therefore, just take negative of each coordinate of the six vertices we've found, and you get the remaining six ones.
 |
The second step is to find the exact coordinates of all corners of the black pentagons on the ball. The total number of such pentagons is 12, and each is centered at one of 12 the icosahedron vertexes we just found. Each pentagon has five corners, so the total number of these points is 60. Each is connected to the three closest other such points with lines that coincide with seams on the ball. To find how far the corners of these pentagons are from the pentagon center, let's study the ball a bit.
Let's call two corners on two black pentagons, centered at T and A, which lie in plane TOA, respectively U and V (refer to the image on the left). Let's also call angle TOU alpha. Alpha is the angle that we are going to find. Note that ∠TOU is equal to ∠VOA.
|
| | X | Y | Z |
| U | sin(α) | cos(α) | 0 |
| W | sin(α) cos72° | cos(α) | sin(α) sin72° |
| V | sin(β-α) | cos(β-α) | 0 |
For calculations purposes, I will use γ = (90° - β).
Then:
Vx = sin (β-α) = cos (γ+α)
Vy = cos (β-α) = sin (γ+α)
Distance UV is the same as UW (they are
sides of a regular hexagon). Therefore, we can write the following
equations:
UV = UW
UV² = (sin (α) - cos (γ+α))² + (cos (α) - sin (γ+α))²
UW² = (sin (α) - sin (α) × cos 72°)² + (sin (α) × sin 72°)²
2 - 2sin (α) × cos (γ+α) - 2cos (α) × sin (γ+α) = 2sin²(α) - 2sin²(α) × cos72°
2 - 2sin (γ+2α) = 2sin²(α) × (1 - cos 72°) = (1 - cos (2α)) × (1 - cos 72°)
2 - 2sin (γ) × cos (2α) - 2cos (γ) × sin (2α) = 1 - cos 72° - cos (2α) + cos 72° × cos (2α)
(1 + cos 72°) + cos (2α) × (1 - cos 72° - 2sin (γ) = 2 cos (γ) × sin (2α)
Now, square both parts of the equation. We get a quadratic equation with cos(2α) as unknown and
a = 4 × cos²(γ) + (1 - cos72° - 2×sin(γ))² = (55 - 13√5)/8
b = 2 × (1 + cos 72°) × (1 - cos72° - 2sin (γ)) = (5 - 7√5)/20
c = (1 + cos72°)² - 4×cos²(γ) = (15√5 - 93)/40
Solving it, we get:
cos (2α) = (345 + 32√5)/545
α ≅ 20.07675128°
 |
Now we know the coordinates of all 12 vertices and the angle between
the center of the black pentagon (coinciding with a vertex) and this pentagon
corner. For U and V, the coordinates now can be calculated using
the table shown above. For the remaining 58 points that are corners of ball's black
pentagons, we can find coordinates in several different ways.
Each of these 58 points, just like U and V, also belongs to
two hexagons that separate two neighboring pentagons. I will call
centers of such pentagons T' and A'. Each (T', A') pair has its own pair of (U', V').
|
Method one would be to find the linear transformation
of (T, A) into (T', A'). Then, by applying the same transformation to known U and V, we find coordinates of U' and V'.
Method two is to use system of three equations. Plane OT'A' is defined by the following equation:
(T'y×A'z - A'y×T'z)×x + (A'x×T'z-T'x×A'z)×y + (T'×A'y - A'x×T'y)×z = 0
Since U' belongs to this plane too:
| |
(T'y×A'z - A'y×T'z)×U'x + (A'x×T'z-T'x×A'z)×U'y + (T'x×A'y - A'x×T'y)×U'z = 0
|
(1) |
Multiplying vectors OT' and OU' we get:
| |
T'x×U'x + T'y×U'y + T'z×U'z = cos(α)
|
(2) |
Multiplying vectors OA' and OU' we get:
| |
A'x×U'x + A'y×U'y + A'z×U'z = cos(β - α)
|
(3) |
 |
Method three is perhaps the easiest one. It involves a simple trick. I will define the point where lines TA and OU intersect as X. Since both TA and OU belong to the plane Z=0, Xz=0. What I am looking for is the ratio TX/TA. Knowing this ratio, it is possible to find X' (intersection of T'A' and OU') only using coordinates of T' and A'. Point
X' (just as X) is not on the ball's sphere, but normalizing vector OX' gives us coordinates of U'.
Equation for TA:
x × (Ay - Ty) + y × (Tx - Ax) + (Ty×Ax - Tx×Ay) = 0
or
x × (cos (β) - 1) - y × sin (β) + sin (β) = 0
|
Equation for OU is simply:
x × cos (α) = y × sin (α)
From these two equations, we easily find:
Xx = sin (α)×sin (β) / (sin (α) + sin (β-α))
Xy = cos (α)×sin (β) / (sin (α) + sin (β-α))
| |
TX/TA = sin (α) / (sin (α) + sin (β-α)) = 1/3
| (Surprise!) |
|
At this point, we are ready to draw a simple, but accurate image of
the soccer ball. No shading or ray tracing. I will use only the most basic
graphics functions, like line(), circle() and polygon(). There are
a couple of hurdles to overcome.
Segments, such as
UV and UW, being projected on the sphere, become parts of ellipses, with centers in O. But the focuses of these ellipses are not positioned on horizontal or vertical lines, to be easily drawn with standard Ellipse or Arc calls, present in most graphical libraries.
I decided to split each such segment into a number of smaller parts (using technique similar to the Method Three in previous section), and draw a series of short straight lines that represent them.
|
This also helps to hide lines that are on the back of the ball and are invisible.
If both ends of the segment have negative Z coordinate, this segment is not drawn.
Another problem is painting the black pentagons on the ball. Using calls
such as floodfill would only work when pentagon is close to the center
of the visible part of the ball. But if pentagon is on the edge, and only part
of it is visible, it often would not produce the desired result.
I was able to solve this puzzle in the following way.
- Calculate the sequence A of all points that represent (accurately enough) the black pentagon.
For example, if each seam (such as UW) were split into 10 parts, there would be
50 points. It's important to have all 50 points in a right sequence,
going clockwise or counter-clockwise around the pentagon.
-
Check if all points in A are visible (have positive Z coordinate). If yes, just call Polygon function that draws the polygon and fills it with a desired color, passing A as a parameter. Go to step one and repeat for next black pentagon.
-
If only some, but not all of the 50 points in A are visible, save the visible points (they always are sequential in the original array of 50), in a special array B. Then calculate the two "edge" points that separate visible part of the pentagon from invisible, and add these two to B.
-
Calculate the number of points that represent ball's edge between these two points, and also add them to B. The number of these additional points should depend on the length of the "edge" segment, to represent it smoothly as part of the circle.
-
Call Polygon on B. Go to step one and repeat for the next black pentagon.
The following Java applet encapsulates this logic.
|
|
Source on GitHub
Click on the ball and drag the mouse to rotate.
|
links:
Polyhedron of Soccer Balls
The Icosahedron
www.mathleague.com/help/geometry/polygons.htm#hexagon
Morphing Polyhedron
The History of the Soccer Ball
Yuri Yakimenko,
|
