CG ECSE-4750-01 and 6964-01 Computer Graphics, Fall 2017, Rensselaer Polytechnic Institute (Posts about homework)

CG Homework 6, due Mon 2017-10-30 2359 Solution

W Randolph Franklin, RPI — Thu, 23 Nov 2017 05:00:00 GMT

(4 pts) Use the homogeneous matrix to project homogeneous points onto the plane x+3y+2z=4, with COP at the origin. What does the point (1,2,4,5) project to? Give the answer as a Cartesian point.

From https://wrf.ecse.rpi.edu/pmwiki/pmwiki.php/Main/HomogeneousCoords :

Normalize the plane equation to \(x/4 + 3/4 y + 1/2 z = 1\)

The matrix and point vector are \(\begin{pmatrix} 1& 0& 0& 0\\ 0& 1& 0& 0\\ 0& 0& 1& 0\\ 1/4 & 3/4 & 1/2 & 0 \end{pmatrix} \begin{pmatrix} 1 \\ 2 \\ 4 \\ 5 \end{pmatrix}\)

Multiply to get \(\begin{pmatrix} 1 \\ 2 \\ 4\\ 15/4 \end{pmatrix}\).

Converted to Cartesian gives \(\begin{pmatrix} 4/15 \\ 8/15 \\ 16/15 \end{pmatrix}\).

You can check that this is on the plane.
(4 pts) Repeat the previous question with the COP changed to (1,1,1,1).

The easiest way might be to translate (1,2,4,5) by -(1,1,1,1), project onto the translated plane, then translate the result back.
1. Homo (1,2,4,5) is Cart (1/5, 2/5, 4/5).
2. The Cart COP is (1,1,1). We will translate everything by (-1,-1,-1).
3. (1/5, 2/5, 4/5) translates to (-4/5, -3/5, -1/5).
4. The plane equation is changed by replacing x by x+1, y by y+1, z by z+1. (Think about it.)
5. x+3y+2z=4 becomes x+3y+2z = -2 becomes -x/2 - 3/2 y - z =1.
6. Now multiply \(\begin{pmatrix} 1& 0& 0& 0\\ 0& 1& 0& 0\\ 0& 0& 1& 0\\ -1/2 & -3/2 & -1 & 0 \end{pmatrix} \begin{pmatrix} -4 \\ -3 \\ -1 \\ 5 \end{pmatrix}\)
7. That gives Homo (-4, -3, -1, 15/2) or Cart (-8/15, -6/15, -2/15).
8. Translate it back by (1,1,1).
9. The answer is (7/15, 9/15, 13/15).
(6 pts) Do exercise 5.6 on page 272 of the text.

This is harder than I expected, and so everyone will get full points.
(6 pts) This question will take some thinking).

Imagine that you have an infinitely large room illuminated by one infinitely long row of point lights. This figure shows a side view of the room.

The lights are h above the floor and are 1 meter from each other. Assume that the ceiling above the lights is black and that no light reflects off of anything.

An object at distance d from a light gets illuminated with a brightness \(\frac{1}{d^2}\).

Each point on the floor is illuminated by all the lights, but more brightly by the closer lights.

A point p directly below a light will be a little brighter than a point q halfway between two such points. That is the problem --- we want the floor (at least the part directly below the line of lights) to be evenly lit, at least within 1%.

However, the higher the line of lights, the more evenly the floor will be lit.

Your question is to tell us what is the minimum value for h so that the line of the floor below the line of lights is evenly lit within 5%.

E.g., the brightness at p is

\(b_p = \sum_{i=-\infty}^{\infty} \;\; {1}/{\left(h^2+i^2\right)}\)

Answer:

There are several levels of possible solution, all acceptable. The highest is to find the closed form solutions for the integrals. The lowest is to find the numerical approximation for a specific h by summing 1000 terms, and the plotting the difference as a function of h. Part of the point of this problem is that you have to first decide how to solve it. I will use Mathematica, partly to demonstrate that it is useful in graphics.

The brightness at q is

\(b_q = {\sum_{i=-\infty}^{\infty}} \;\; {1}/{\left(h^2+(i+1/2)^2\right)}\)

From Mathematica, \(b_p = {\pi \coth (\pi h)}/{h}\)

\(b_q = \left({\pi \tanh (\pi h)}/{h}\right)\)

\(b_q/b_p = \tanh ^2(\pi h)\)

The plot is this. The X axis is the height of the lights. The Y axis is the ration between the dimmest place on the floor and the brightest place.

The lesson from this plot is that the light variation smooths out really quickly as the ceiling gets higher. Eyeballing, at h=.7, the variation is already only 5%. Mathematica can calculate 0.69336. Any number from .65 to .75 is acceptable for grading purposes.

(Total: 20 points.)

CG Homework 7, due Mon 2017-11-20 2359

W Randolph Franklin, RPI — Sun, 12 Nov 2017 05:00:00 GMT

(10 pts) Look at Figures 6.37 and 6.38 on pages 310 and 311 of the textbook. Write 50-100 words on why they look different.
(10 pts) Look at Figure 6.39 on page 314 of the textbook. What is it about the spheres that the global model looks different from the local?
(10 pts) Consider the sphere \(x^2+y^2+z^2=169\). What is the normal to the sphere at the point (3,12,-4)? Be sure your normal is normalized.
(10 pts) Consider a block of glass with index of refraction 1.5. Some light is shining straight down on it. This is called normal incidence. How much of the light reflects off the glass and how much transmits into the glass? Hint: Use Fresnel's law.
(10 pts) A small light source that is twice as far away is 1/4 as bright. That is, there is an inverse square fall off for brightness. However, when modeling light in graphics, we usually don't do that. Why?

(Total: 50 points.)

CG Homework 6, due Mon 2017-10-30 2359

W Randolph Franklin, RPI — Mon, 23 Oct 2017 04:00:00 GMT

(4 pts) Use the homogeneous matrix to project homogeneous points onto the plane x+3y+2z=4, with COP at the origin. What does the point (1,2,4,5) project to? Give the answer as a Cartesian point.
(4 pts) Repeat the previous question with the COP changed to (1,1,1,1).
(6 pts) Do exercise 5.6 on page 272 of the text,
(6 pts) This question will take some thinking).

Imagine that you have an infinitely large room illuminated by one infinitely long row of point lights. This figure shows a side view of the room.

The lights are h above the floor and are 1 meter from each other. Assume that the ceiling above the lights is black and that no light reflects off of anything.

An object at distance d from a light gets illuminated with a brightness \(\frac{1}{d^2}\).

Each point on the floor is illuminated by all the lights, but more brightly by the closer lights.

A point p directly below a light will be a little brighter than a point q halfway between two such points. That is the problem --- we want the floor (at least the part directly below the line of lights) to be evenly lit, at least within 1%.

However, the higher the line of lights, the more evenly the floor will be lit.

Your question is to tell us what is the minimum value for h so that the line of the floor below the line of lights is evenly lit within 5%.

E.g., the brightness at p is

\(\sum_{i=-\infty}^{\infty} \;\; \frac{1}{\left(h^2+i^2\right)}\)

(Total: 20 points.)

CG Homework 5, due Mon 2017-10-16 2359

W Randolph Franklin, RPI — Thu, 05 Oct 2017 04:00:00 GMT

(2 pts) What is the angle (in degrees) between these two vectors: (1,2,0), (1,2,3)?
(2 pts) (Reverse engineering rotations) In 2D, if the point (4,2) rotates about the origin to (2,-4), what's the angle?
(2 pts) Give the matrix M that has this property: for all vectors p, \(Mp = \begin{pmatrix}2\\4\\5\end{pmatrix} \times p\).
(2 pts) Give the matrix M that has this property: for all vectors p, \(Mp = \left( \begin{pmatrix}2\\4\\5\end{pmatrix} \cdot p \right) \begin{pmatrix}2\\4\\5\end{pmatrix}\).
(2 pts) Why can the following not possibly be a 3D Cartesian rotation matrix?

\(\begin{pmatrix} 3& 0 &0\\1 & 0 &0\\0& 0 &1\end{pmatrix}\)
(2 pts) Use any method (not involving soliciting answers on the internet) to rotate the point (4,4,6) by 120 degrees about the axis (2,2,3). Explain your method. (E.g., if you saw the answer in a vision, are your visions generally accurate?)
(2 pts) Can the volume of a small cube change when its vertices are rotated? (yes or no). Why (not)?
(2 pts) What is the ''event loop''?
(2 pts) Why does putting all your vertices into an array and telling OpenGL about it make a big graphics program faster?
(2 pts) Since the Z (aka depth) buffer looks so useful, why is it not enabled by default?
(2 pts) What's the quaternion representing a rotation of 180 degrees about the axis (0,1,0)?
(2 pts) Use the quaternion formulation to rotate the point (0,1,0) by 180 degrees about the axis (0,1,0).
(2 pts) Use the vector formulation to rotate the point (0,1,0) by 180 degrees about the axis (0,1,0).
(14) Extend your program from last week that displays the Starship Enterprise as follows:
1. Do the rotation in the vertex shader instead of in the javascript program.
2. Make the color of each pixel depend on its z-value.

(Total: 40 points.)

CG Homework 4, due Thu 2017-10-05 2359

W Randolph Franklin, RPI — Mon, 25 Sep 2017 04:00:00 GMT

(No programming this week).

(2 pts) Put the following in the correct order for the graphics pipeline.

fragment-shader primitive-assembly rasterizer vertex-shader
(2) If you wanted to read some user input and then change all the vertex positions by multiplying each x-coordinate by some amount, the most efficient (in machine time) place to do it (pick one):
1. with a javascript function
2. in the vertex shader
3. in the fragment shader
4. in the html file
5. it can't be done.
(2) Why does OpenGL have the triangle-strip object type, in addition to the triangle type?
1. It leads to smaller, faster, graphics objects.
2. It leads to bigger, faster, graphics objects.
3. It's not possible to split some complicated polygons into lots of simple triangles, but you can split them into triangle-strips.
4. The standards writers were being paid by the word.
(2) Standards (select all that are true)
1. allow programmers to move between projects
2. allow different types of hardward to be substituted in.
3. ..... operating systems ......
4. allow vendors to lock in customers.
5. can prevent the latest HW from being used to its fullest.
(2) What is the physical principle underlying LCD?
1. Fire an energetic electron at a rare earth atom and a photon of light is emitted.
2. A solution of corkscrew shaped molecules can rotate polarized light.
3. Putting your finger close to a capacitor can change its capacitance.
4. If two coils of wire are close, then an alternating current in one can induce a current in the other.
(2) What is the physical principle underlying the CRT?
1. Fire an energetic electron at a rare earth atom and a photon of light is emitted.
2. A solution of corkscrew shaped molecules can rotate polarized light.
3. Putting your finger close to a capacitor can change its capacitance.
4. If two coils of wire are close, then an alternating current in one can induce a current in the other.
(2) Which of Philo T Farnsworth's chores as a kid gave him an idea for electronic television?
(2) Color printing on a sheet of paper exemplifies
1. additive color
2. subtractive color
3. multiplicative color
4. divisive color
5. exponential color
(4) Major components of the OpenGl model as discussed in class are:
1. Objects, viewer, light sources, planets, material attributes.
2. Still cameras, video cameras, objects, light sources.
3. Objects, viewer, light sources, material attributes.
4. Colored objects, black and white objects, white lights, colored lights
5. Flat objects, curved objects, near lights, distant lights.
(2) How do you draw a pentagon in WebGL?
1. Split it into triangles.
2. Split it into triangles if it is concave, otherwise draw it directly.
3. Split it into triangles if it is convex, otherwise draw it directly.
4. Draw it directly.
5. Split it into hexagons.
(2) If you want your javascript program to send a color for each vertex to the vertex shader, what type of variable would the color be?
1. uniform
2. varying
3. attribute
4. dynamic
5. static
(2) The carpet is an example of
1. diffuse reflection
2. specular reflection
3. environment mapping
4. bump mapping
5. how RPI saves money
(2) In the OpenGL pipeline, the Primitive Assembler does what?
1. fits together pieces of ancient Sumerian pottery.
2. rotates vertices as their coordinate systems change.
3. creates lines and polygons from vertices.
4. finds the pixels for each polygon.
5. reports whether the keyboard and mouse are plugged in correctly.
(2) If you do not tell WebGL to do hidden surface removal, and two objects overlap the same pixel, then what color is that pixel?
1. WebGL throws an error.
2. the closer object
3. the farther object
4. the first object to be drawn there
5. the last object to be drawn there
(2) gasket2 has this code: var points=[ ]; ... points.push(a,b,c); What does push do here?
1. Appends new entries to the end of points.
2. Inserts new entries at the start of points.
3. Overwrites the first entries of points.
4. Overwrites the last entries of points.
5. Throws an error because we didn't specify a size for points.
(2) Look at this CIE chromaticity diagram. If you wanted to make white by mixing one spectrally pure color with the pure color with wavelength 600 nm, what wavelength would that other color be?
1. 400
2. 485
3. 535
4. 580
5. It's not possible, because purple is not a spectrally pure color.
(2) Sometimes you want to send a variable to a vertex shader that has the same value for every vertex. Pick the following item for which this would be useful.
1. the vertex's coordinates
2. the vertex's color
3. the object's global orientation
4. the location of the global light source
(2) You call gl.BufferSubData to do what?
1. to add or replace part of the buffer in the GPU.
2. to define a submarine object.
3. to subtract some data in the buffer.
4. to tell the GPU to look for a pattern and substitute any occurrences,
5. to tell the GPU to use a subroutine instead of the main program.

(Total: 38 points.)

CG Homework 3, due Thu 2017-09-28 2359

W Randolph Franklin, RPI — Mon, 18 Sep 2017 04:00:00 GMT

Due date postponed because of inconsistencies in due dates.

(10 pts) Part of changing from one coordinate system to another is scaling and making things fit. E.g., suppose that you had a square with lower left corner (llc) (0,0) and upper right corner (urc) (1,1). You want to scale and center it to just fit into a rectangle with llc (0,0) and urc (2,3). The square stays a square but is probably larger or smaller. Then, these equations would do it:

x' = 2x

y' = 2y + 1/2

This question is to figure out how to make a rectangle from (0,0) to (2,3) fit into a square that is from (0,0) to (12,12).
(10 pts) Consider a pinhole camera as discussed in slide 12 of ppt presentation 1_5. Let d=2. To where does the point (1,3,-3) project? Use the equation on that slide. x/z/d should be parenthesized as x/(z/d).
(5) If your image has only 64 different colors across the whole image, how many bits per pixel do you need for the color buffer?
(25) Extend your program from last week that displays the Starship Enterprise as follows:
1. Add 3 sliders that will rotate it around the X-axis, Y-axis, and Z-axis respectively.
2. Do the rotations the simplest (and least efficient) way. I.e., in your javascript program, have render rotate the matrix and resend it to the GPU.

(Total: 50 points.)

CG Homework 2, due Mon 2017-09-18

W Randolph Franklin, RPI — Mon, 11 Sep 2017 04:00:00 GMT

Rules

You may work in teams of 2. Each team should submit their solution under only 1 student's name, but mention both people at the top of the submission. The other student's submission should just name the lead student. (This makes it easier for us to track things and to avoid grading it twice.)
Hand in your solution on RPILMS. As for formats, we'll take (at least) a scanned image of a neatly handwritten page, raw text, PDF, and MS Word.
For the programming question, pick whichever you prefer to get us the code:
1. Submit a zipped file, containing your .js and .html files and the utility files needed to run it. It must be organized so that if we unzip into a random location and point the browser at the .html file, then it will work.
  
  It might be easier to move the utility .js files into the same directory as your code (and adjust the include lines).
2. Put the code on a web server such as RCS.

Questions

(5 pts) Which RPI grad was the technical person in the founding group of NVidia?
(5 pts) What hardware component had to get much cheaper in order to make frame buffers possible?
(5 pts) The progress of computer graphics has always been enabled by new hardware. One newish toy is Google Cardboard. Pretend that I've never heard of it, and write 100 words or so summarizing it and giving specific details.
(20) Modify last week's program to display the spaceship NCC1701.
1. The data is in the file ncc1701b.data . Each line gives the vertices of one triangle as follows:
  
  x1 y1 z1 x2 y2 z2 x3 y3 z3
2. Insert the data into your javascript file and try displaying it.
3. If this is too much data, then reduce the number of triangles until something displays. Report what went wrong, and how many triangles could be displayed.
4. You might have to scale the data to fit. I'll let you figure out the easiest way to do that. The problem is that last week's square had coordinates in the range from -1 to 1, while the NCC1701 does not.
5. Attach a PDF of any files you modified and a screendump. If the file has a multi-thousand line array, it's ok to delete the middle.
(5) In real life, light bounces from object to object, on its way from the light source to the viewer. However, the OpenGL pipeline processes objects independently, and does not allow that (except the an object can hide another object). Why?
(10) According to the tristimulus model, our eyes have three types of color receptors (cones). However several species and some rare human females have four types of cones. They are called tetrachromats.
1. Name some such animals.
2. For humans, why is it (probably; opinions differ) only females?

(Total: 50 points.)

CG Homework 1, due Mon 2017-09-11, 9am

W Randolph Franklin, RPI — Thu, 31 Aug 2017 04:00:00 GMT

Hand in your solution on RPILMS. You may work in teams of 2. Each team should submit their solution under only 1 student's name, but mention both people at the top of the submission. The other student's submission should just name the lead student. (This makes it easier for us to track things and to avoid grading it twice.) As for formats, we'll take (at least) a scanned image of a neatly handwritten page, raw text, PDF, and MS Word.

(4 pts) One graphics pioneer was Ivan Sutherland. Name an influential tool that he created and an influential algorithm that he helped create.
(4) Consider these 3-D vectors: A=(0,4,2), B=(5,2,3), C=(8,7,9). Compute:
1. A.(BxC)
2. (AxB).C
(4) (This is another a test of your linear algebra knowledge. Feel free to refer to books to find the correct formulae.)

Suppose that we have a plane in 3-D thru the points A(4,2,0), B(2,2,0), and C(0,1,1).
1. What is its equation, in the form ax+by+cz+d=0 ?
2. Consider the line L thru the points O(0,0,0) and P(1,1,1). Where does this line intersect the plane?
(4) Modify the program in http://www.cs.unm.edu/~angel/WebGL/7E/CLASS/square.html , which calls several other files, to display shapes that are the first initials of the last names of the team members.
1. Assume that your RCSID is STUDENT. In the following, replace STUDENT with your RCSID.
2. From an RPI windows machine, click the AFS RPI icon create a share with your RCS files.
3. Go into public_html.
4. Create a folder called homeworks.
5. Copy the folder https://wrf.ecse.rpi.edu/Teaching/graphics-f2016/SEVENTH_EDITION/CODE/Common/ into homeworks.
6. Create a subfolder homework1 under homeworks.
7. Copy files https://wrf.ecse.rpi.edu/Teaching/graphics-f2016/SEVENTH_EDITION/CODE/CLASS/square.html and https://wrf.ecse.rpi.edu/Teaching/graphics-f2016/SEVENTH_EDITION/CODE/CLASS/square.js into that folder.
8. Change them to answer the homework.
9. Look at your answer by browsing to https://www.rpi.edu/~STUDENT/homeworks/homework1/square.html
When you've solved that question:
1. Put your answers to all the homework questions in some file, even on your own PC.
  
  Include listing for the files you changed for square.
  
  Mention the URL to access your modified square, e.g., https://www.rpi.edu/~STUDENT/homeworks/homework1/square.html
2. Upload that file of answers to LMS.
The TAs will be glad to help with any problems.
(2) Do exercise 1.1 from the textbook, page 37.
(2) Do exercise 1.8 from the textbook, page 38.

(Total: 20 points.)