HTML and CSS Reference
In-Depth Information
This type of closed shape would be difficult to create using a single polygon. You'd find yourself in a
situation where every polygon you create would have a different number of points and require special
handling to move the pen around. On the other hand, by combining triangles, you can model every shape
in a consistent, and efficient, manner—no special handling required. In Figure 16-10 you see how the
same closed shape can be broken down into smalled polygons by using triangles..
Figure 16-10.
The same shape as in Figure 16-9, rendered with triangles
You can then set up a function that takes three points and renders a single triangle. From there, you just
need a list of points and then a list of triangles. One loop goes through the list of points, positions them,
and applies perspective. Another loop goes through the triangle list and renders each one.
Using triangles enables further optimizations when setting up the geometry as well. Triangle fans and
triangle strips are common ways that 3D geometry is stored, because they allow for efficient traversal of all
the vertices, while eliminating redundant points. Yet another benefit to using triangles is that we can use
trigonometry to manipulate them using well-known calculations, as covered throughout this topic.
This isn't to say that you must use a triangle-only approach. You can make a function that dynamically
renders a polygon of any number of sides. But to keep things simple and flexible here, let's go with the
triangles.
We can try it out using the letter A example. First, you need to define all of your points and triangles. As
shown in Figure 16-11, we laid out the shape and numbered all of its points and each of its triangles.
