HTML and CSS Reference
In-Depth Information
Triangle.prototype.draw = function (context) {
context.save();
context.lineWidth = this.lineWidth;
context.fillStyle = context.strokeStyle = utils.colorToRGB(this.color, this.alpha);
context.beginPath();
context.moveTo(this.pointA.getScreenX(), this.pointA.getScreenY());
context.lineTo(this.pointB.getScreenX(), this.pointB.getScreenY());
context.lineTo(this.pointC.getScreenX(), this.pointC.getScreenY());
context.closePath();
context.fill();
if (this.lineWidth > 0) {
context.stroke();
}
context.restore();
};
We need another array to hold the list of triangles. So at the top of the script, define the array:
var triangles = [];
Then, after defining all the points, you create the triangles using three points and a color:
triangles[0] = new Triangle(points[0], points[1], points[8], "#ffcccc");
triangles[1] = new Triangle(points[1], points[9], points[8], "#ffcccc");
triangles[2] = new Triangle(points[1], points[2], points[9], "#ffcccc");
triangles[3] = new Triangle(points[2], points[4], points[9], "#ffcccc");
triangles[4] = new Triangle(points[2], points[3], points[4], "#ffcccc");
triangles[5] = new Triangle(points[4], points[5], points[9], "#ffcccc");
triangles[6] = new Triangle(points[9], points[5], points[10], "#ffcccc");
triangles[7] = new Triangle(points[5], points[6], points[7], "#ffcccc");
triangles[8] = new Triangle(points[5], points[7], points[10], "#ffcccc");
triangles[9] = new Triangle(points[0], points[10], points[7], "#ffcccc");
triangles[10] = new Triangle(points[0], points[8], points[10], "#ffcccc");
We order the points of each triangle to go in a clockwise direction. That isn't important at this stage, but it
becomes important in the next chapter, so it's a good habit to get into.
If you think that plotting all these points and triangles by hand is tedious, that's because
it is tedious. And it's going to get worse when you model solid forms. That's why most
3D programs have visual modeling front ends to them, which give you tools to create
forms and extract all the points and polygons for you. Although creating a 3D modeling
program is beyond the scope of this topic, a good strategy might be to parse an open 3D
model format, like COLLADA, and store the vertex positions in a format like JSON. You
can then load this file into your document and construct the model.
Now, your rendering loop looks like the following (don't worry, you'll see the complete file in a bit):
