CSE 160 -- Prog 1

Due before midnight, Sunday, April 11, 2021.
Late submissions will not be accepted/graded.

Objectives:

Description:

Details:

• The cylinders will all have the same unit height along the z-axis from z=0 to z=1, and have a radius of one. In later assignments, we can change the size of the cylinders by simply applying a scale factor to them.
• These cylinders will have differently shaped cross sections. The simplest is a triangular cross section with 3 sides. In general, you should be able to create an n-sided cross sectional cylinder by specifying n.
• You should also create the end caps for the cylinders that you build although the user will be able to specify whether the end caps will be drawn or not.
• For this assignment, allow the user to specify: (a) n, and (b) boolean to specify whether to draw the end caps (true) or not (false). Note that while the object that you create is 3D, the rendering for this assignment will look appear 2D (see figures). You do need to output counts for (1) the number of points, and (2) the total number of polygons (triangles) including both end caps.
• Represent your cylinder using a simplified OBJ format (see Chap 10). Note that you will be using this format for the remaining assignments. The geometry of each object is stored in two files. The first file: objname.coor stores the x,y,z coordinates of each point, while the second file: objname.poly stores the faces or polygons making up the object. We will assume that all polygons are triangular i.e. you need to triangulate all the polygons. For example, a rectangle is represented by 2 triangles sharing a side. Here is an example of a rectangular polygon using this format.

  #rectangle.coor
  4
  1,-30.0,-60.0,-100.0
  2,30.0,-60.0,-100.0
  3,30.0,10.0,-100.0
  4,-30.0,10.0,-100.0
  
  #rectangle.poly
  2
  tri1 1 2 4
  tri2 2 3 4
  

  As you can see, the coor file has the number of points specified on the 1st line. This is followed by the index and the x,y,z coordinate of each point. Likewise, the poly file has the number of triangles on the first line, followed by a string identifier (does not have to be unique), and the index to the vertices of each triangle in the coor file.

  Whether you specify the vertices of each triangle in a clockwise or counter clockwise (CCW) order is not important for program 1. However, it is important for subsequent programs so might as well get it correct now. Imagine that you have a closed object e.g. a sphere (as opposed to an uncapped cylinder), the convention of specifying the vertices of each triangular surface patch on the sphere is in CCW order when looking at the sphere from the outside. This allows us to distinguish between front-facing vs back-facing triangles and thereby speed up rendering of objects via a technique called backface elimination. Be sure to follow this convention consistently when specifying the triangles of your cylinders. Otherwise, your cylinder may appear dark, or have dark patches (due to backface elimination)!

• Displaying a cylinder:

  Here are two examples illustrating a 3-sided and a 4-sided cylinder, and how they are to be drawn. You don't need to draw the XY axis.
  

  The html5 canvas defines our ground and coincide with the XY-plane. The x-axis is positive going right, and y-axis is positive going up. However, we want the origin to be at the center of the canvas rather than the top left corner. So, we'll need to add some offset to position our shapes properly. The offsets are simply half the width (for x-offset) and half the height (for y-offset) of the canvas size.

  Now if we assume/pretend that the z-axis is coming out of the ground towards us, the viewer, then we have a right-handed coordinate system for our virtual world. And if we look at our cylinder from the position (0,0,∞), we are effectively looking "down" on the canvas/ground. By the way, this is also the default view for webGL.

  In the examples below, to draw a cylinder we just need to draw the top cap (if end caps are to be drawn), or just the perimeter wall of the cylinder if end caps are not to be drawn.

Resources:

• How to get numbers in html
• and pass that number to javascript
• Different drawing modes (optional / needed in later programs)
• Chapter 3 of Matsuda and Leah

Grading:

• Rubric:

  You start off with 100 points.
  You lose credit for missing functionality, incorrect results,
  poorly documented or formatted code, or not following instructions.
  
  Below is a partial list:
  
  - up to 10 points off for poor features.html file
  - up to 10 points off for inadequate comments or hard-to-read code
  - up to 10 points off for not following instructions
  - up to 10 points off for special handling to grade your homework (usually
    because you did not check that it runs on the computers in the lab first).
  - functionality points depending on importance
  
  Make sure you:
  a.  submit the right files you want us to grade,
  b.  have tested your code on the browsers in the lab.
  c.  follow the general instructions described in overview.html
  
  

• Who graded your assignment:

  Thomas Cannon: thwcanno@ucsc.edu
  

Submission:

Put materials in a folder named prog1 and zip it up.
Read the for instructions on how to submit your work.