Assignment 2: Generalized Cylinder Wireframe

Objectives:

Draw the basic frame of a generalized cylinder.

Description:

In the previous assignment, you gave functionality to the user to draw a polyline. Now, you will construct a generalized cylinder using the polyline as a spine. You will also provide functionality to the user to save and load generalized cylinder models to and from a file.

Generalized Cylinders:

A Generalized Cylinder is a 3D geometric object created by "sweeping" a 2D face (often a circle/square/polygon/etc) across a spine, which is some line or curve in space. In our case, you will use your polyline as the spine, and a 12-sided regular polygon as the face. You will also only be drawing the Wireframe, that is, the faces will be hollow, and we will only see the outlines of the sides (the "skeleton"). Here are some examples of what it should look like:

There are several things to note:

• There is no perspective; the cylinder looks completely 2D. This is called an "orthographic projection," which will be covered later in the course. Essentially, our 3D model looks flattened in the z-direction, removing any depth. This is essentially what you did in Lab 1, so no extra modifications need to be made. Your generalized cylinder model SHOULD, however, be specified in 3D coordinates, as later assignments will allow us to rotate and move around our generalized cylinders with perspective.
• There are a lot of extra, crisscrossing lines. Typically when you think of a cylinder, you imagine it having rectangular faces going down the side, and polygonal faces at the ends. However, it is more typical to specify faces in computer graphics with triangles. Thus in the images above, each rectangular face is actually represented with two triangles. (If you look closely, however, it appears like each rectangle is four triangles in a sort of 'X' shape. This is not actually the case: we are simply looking through the cylinder to the other side, which is also broken up into two triangles, giving the illusion of four triangles).
• The sections of the cylinder intersect cleanly. If you simply stick together a bunch of cylinders like the one in the first picture together for each section of your polyline, you will end up with weird gaps at the intersections. So, you need to implement some method of seamlessly connecting the sections (there are a few ways of doing this. Some methods will be discussed in lab).

Saving and Loading:

Saving and loading generalized cylinders will be done using the 'ioSOR.js' script, which is provided. The functions in this script will turn your models (stored as arrays of vertices and indices) into OBJ format and back. The script is fairly self explanatory, and you can find a short documentation in the comment header for the script. This script will be briefly gone over in lab.

How you should proceed:

Students in the past have struggled with this assignment, as it can be a little long and it introduces a lot of new—but also very fundamental—concepts.

In the end, your assignment should first allow the user to draw a polyline (just like in assignment 1). When the user right clicks to finish the polyline, a 12-sided generalized cylinder is then drawn around the polyline. Since you have to build on top of your previous code, this has the potential of becoming very messy.

Instead of going directly for this, first try just drawing a single, fixed-position generalized cylinder of fixed-length. Then, once that is comfortable, move on to figuring out how to attach that cylinder to the polyline. From there you can then move on to the additional points. This will all be talked about in more detail in lab.

As for the saving and loading portion of the assignment, since it is a pretty separate feature, you can easily save this for the end. However, take care about how you store your vertices (how your points and indices are organized in your arrays) and how you read them back to reconstruct the generalized cylinder. That is, make sure you interpret the vertices you get from a file the same way that you store them.

Look at the starter code as a template. This example will be gone over during lab.

Resources:

How to draw a Quad <-- Located in 'Files' tab under 'StarterCode'

Assignment 2 Starter Code  <-- Located in 'Files' tab under 'StarterCode'

ColoredCube Example Links to an external site. <-- Located in 'Files' tab under 'MatsudaLea/Ch07'

See Matsuda/Lea textbook Ch03 and Ch07.

Demo:

Play media comment.