Midterm Exam, CSCI 330, Fall 2020

• The weight for each question is given.
• Please answer each question thoughtfully and carefully.
• Please use a word processor to answer the questions.
• Please label your answers with the question number and part.
• Please answer each question thoughtfully and carefully. I expect your answers to demonstration participation in this class.
• You may use books, notes and other non-human references. You may not interact with any other person when answering these questions.
• Proper use of terminology will be graded.
• The test is due at the end of class.
  • Submission instructions are at the end of the test.
  • Submissions should be done through the D2L assignment folder Test 1
  • If you have problems submitting the test, please contact your instructor.
• If you have questions, please communicate with your instructor via email.

1. Consider the following code

   /* line 1 */ canvas = document.getElementById("canvas");
   /* line 2 */ canvas.addEventListener("click", MyHandler); 

   1. [ 4 points] Describe what occurs when line 2 is executed.
   2. [ 6 points] Describe, in detail, what happens when a user clicks in the canvas. (Just stating the MyHandler function is called is insufficient).
2. Color Spaces
   1. [3 points] Describe the HSL color space (describe each of the dimensions in this color space)
   2. [1 points] Describe how the HSL color space and be useful in application.
   3. [1 point] give the code to set the fill color to to be hue 20° saturation 100% and lightness 50% in an javascript application that uses the html 5 canvas.
3. Math
   1. [ 2 points] What is linear interpolation? Give an equation.
   2. [ 2 points] Where is linear interpolation used?
   3. [ 2 points] What are polar coordinates?
   4. [ 2 points] How do you convert polar coordinates to cartesian coordinates?
   5. [ 2 points] Why are polar coordinates used?
   6. [ 5 points] Using polar coordinates and the SetPixel and LERP routines given in class, give an algorithm to produce the following spiral in a canvas. Please note, color is important.
   7. 
4. Rasterization
   1. [ 3 points] What is a framebuffer?
   2. [ 3 points] Name two considerations when attempting to rasterize a line. (IE Convert the line from coordinates to pixels in a frame buffer)
   3. [5 points] The following demo raterizes a circle given the center of the circle and the radius. Explain how the DrawCircle function works in this demo. (Do not give a line by line description of the code, but rather give a higher level discussion of what is happening.)
5. Misc
   1. [ 3 points] Why are objects frequently enclosed in circles (or spheres in 3d) when performing collision checks?
   2. [ 3 points] What does the following code do?

      • img = document.createElement("img");
        img.addEventListener("load",SetTimer); 

   3. [3 points] What does the following code do?

      • setInterval(DoMove, 100); 

Submission Instructions

• Submit your test and the source code for the program to the appropriate D2L assignment folder Test 1 by 1:55.
• If you miss this deadline, you can submit your test by email to dbennett@edinboro.edu. Depending on the circumstances, there may be a 5% penalty per minute applied for email submissions.