CSCI 343 Computer Graphics

    College of the Holy Cross, Fall 2023

    Home | | Syllabus | | Assignments | | Lecture Notes | | Documentation

    Assignment 1

    Due: Thursday, September 14, in class

    Problem 1:

    Long before there were computers, there was graphic design. Painters have been studying how to make realistic pictures for thousands of years. Sometime during the Renaissance artists discovered that for objects in the distance to look realistic, they need to be smaller in size in the painting than objects nearby. Based on your knowledge of the projection system in a pinhole camera (Perspective projection), explain why this is so. Sketch a diagram that illustrates your point.

    Problem 2:

    In creating realistic objects, the viewpoint of the observer is as important as the layout of the object. Consider a wire-frame object defined by the following four 3D points (X, Y, Z):

      p1: (0.5, 0.5, 1)
      p2: (1, 0, 1)
      p3: (0, 0, 1)
      p4: (1, 1, 2)

    These vertices are connected with single lines between p1 and p2, p2 and p3, p3 and p4, but not between p4 and p1.

    Part a: Remembering that, for perspective projection, the coordinates of projection onto an image plane are given by:

      y = Yd/Z
      x = Xd/Z

    The 3D coordinates of the object are given by uppercase letters (X,Y,Z) and the 2D coordinates of the projected image are given by lowercase letters (x,y). The distance of the image plane from the center of projection is given by d.

    • Compute the x and y coordinates for each point projected onto and x-y image plane located at a distance of 1 from the center of projection (d = 1).

    • Sketch the projected image of this object onto the x-y projection plane, and label each of the projected points with their (x,y) coordinates.

    Part b: Now suppose the observer takes a step backward (moving the projection plane and center of projection with her). The coordinates of the 4 vertices are now given by:

      p1: (0.5, 0.5, 2)
      p2: (1, 0, 2)
      p3: (0, 0, 2)
      p4: (1, 1, 3)

    • Compute the new x and y coordinates for each point projected onto and x-y image plane located at a distance of 1 from the center of projection (d = 1).

    • Sketch the new projected image of this object onto the x-y projection plane, and label each of the projected points with their (x,y) coordinates.

    Part c: Briefly describe the differences between the two images in parts a and b. If you had been shown the two images by themselves would you have thought they originated from the same object? How does this illustrate the importance of viewpoint?

    Problem 3:

    In this problem, you will generate the coordinates for vertices around a spiral- shaped curve and use these coordinates with openGL to display a spiral. First recall how the (x, y) coordinates of evenly spaced points around a circle can be generated using polar coordinates. The radius of the circle, r, remains fixed while the angle alpha shown below increases from 0 deg to 360 deg around the circle (or equivalently, from 0 to 2*PI radians). The coordinates of the center of the circle are (xc, yc).

    x = xc + r * cos (alpha)

    y = yc + r * sin (alpha)

    The coordinates for the vertices around a spiral figure can be created by varying the radius r as the angle alpha changes, as illustrated below:

    Getting Started
    Download the Common folder and the files for the Sierpinski gasket with the appropriate Carriage return type for your computer from the documentation page

    Change the name of the CommonWindows (or CommonLinux) folder to Common.

    Change the name of gasket1.html to spiral.html

    Edit spiral.html to change the reference to "gasket1.js" to "spiral.js" in the script tag. Also, add an HTML comment with your name and the date near the top of the spiral.html file.

    Change the name of the gasket1.js file to spiral.js. Use Javascript comments to add your name and date and assignment number to the top of the file.

    Modify the spiral.js program to create a WebGL program that displays a spiral:

    • Write a function named spiral( ) that generates the (x,y) coordinates for successive vertices around a spiral (Hint: use a for loop). You should push each (x, y) vertex onto the points array.
    • Call your spiral function from the init( ) function (in place of the code that generates the vertices for the Sierpinski gasket).
    The function should have variables (these can all be local to the function) corresponding to the following information:
    • number of vertices
    • an initial angle, alpha, to indicate where to draw the first point on the spiral
    • an amount to increment alpha for each new vertex along the spiral
    • an initial radius r for the first vertex on the spiral
    • an amount to increment r for each new vertex along the spiral
    • the coordinates xcenter, ycenter that indicate the location of the center of the spiral

    You will need to use the Math.sin( ) and Math.cos( ) functions from the JavaScript math library.

    Note that the sin and cos functions in JavaScript require the angle to be specified in radians. If you give alpha and its increment in degrees, you must convert to radians by multiplying by Math.PI/180.0. (Pi is specified in the Javascript math library by the constant, Math.PI)

    Once you have the code drawing spirals, you can play some neat games. For example, if you use gl.LINES as your drawing type instead of gl.LINE_STRIP, WebGL will not connect every other point. Below is a spiral that was created with 100 vertices, using gl.LINES for drawing, an initial angle alpha of 0 degrees and an angular increment of 35 degrees, an initial radius of 0.02 and increment of r of 0.004, and center coordinates of (0, 0) in the Viewing window. Note that the default center of the viewing window is (0, 0) and the x and y coordinates range between -1 and 1.

    Turning in this assignment:

    • Turn in your written answers to problems 1 and 2.
    • Turn in hardcopies of spiral.js and spiral.html.
    • Turn in your discussion log.
    • Bring these to class on the due date.
    • Upload soft copies of your spiral.js and spiral.html files to Canvas

    Home | | Syllabus | | Assignments | | Lecture Notes | | Documentation

    Constance Royden--croyden@holycross.edu
    Computer Science 343, Computer Graphics
    Last Modified: September 2, 2023
    Page Expires: August 17, 2024