HTML and CSS Reference
In-Depth Information
triangles[idx] = new Triangle(points[idx], points[1], points[idx+1], "#6666cc");
triangles[idx+1] = new Triangle(points[idx], points[0], points[1], "#6666cc");
This probably isn't the most straightforward code, so let's step through it with some explanation and maybe
a diagram or two.
You loop around in a full circle and create points at certain intervals. For each iteration you calculate an
angle, which is the full circle, divided by the number of faces, times the particular segment you're working
on.
With that angle (and some trigonometry you should be well used to by now), determine the x, y position for
the point on the circle. You then make two points, one with a
z
of -100 and one with a
z
of +100. When this
loop is done, you have two circles of points, one close to you and one a bit farther away. Now you need to
connect them with triangles.
Again, you iterate over each face, this time creating two triangles. Seen from the side, the first face looks
like Figure 16-20.
This makes the two triangles:
0, 3, 1
0, 2, 3
0
2
1
3
Figure 16-20.
The first face of the cylinder
Because the index (
idx
) variable is initialized to 0, you can also define these like so:
idx, idx + 3, idx + 1
idx, idx + 2, idx + 3
This is exactly how you define the two triangles. You then increase
idx
by 2 to handle the next face with
points 2, 3, 4, and 5.
You continue iterating up to the second-to-last face, and then connect the last one back to the first two
points, 0 and 1, as shown in Figure 16-21.
