CSCI 343 Computer Graphics

    College of the Holy Cross, Fall 2023

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

    Assignment 7

    Due: Thursday, November 9, in class

    Problem 1: Texture Mapping
    If you have a Mac, download the ColorCube.zip folder. If you have a PC, download the ColorCubeWindows.zip folder (this has Windows line breaks, rather than Linux linebreaks). The folder contains the html and javaScript files for the rotating color cube developed in class and found on the textbook website. It also contains six JPG files:

    stars.jpg

    flowers.jpg

    earth.jpg

    lightning.jpg

    jupiter.jpg

    frogs.jpg

    Texture map each of the images to one of the cube sides, so that each side shows one image. Make sure to do the following:

    • Add a variable to define the texture coordinates for your image.
    • Push the texture coordinates onto a texture array along with each vertex pushed onto the vertex array.
    • Add code to create a buffer to pass to the vertex shader and associate it with your texture array.
    • Initialize the texture for each image. Define the source filename, and configure the texture as described in class. Use functions to make your code more compact.
    • Use a loop in the render function to draw each side with a different texture.
    • Modify the vertex shader and fragment shader in the html file to take a texture attribute and use it to color each fragment, as described in class.

    Save your completed code in files named textureCube.html and textureCube.js

    Note: If your texture-mapped cube appears black: This may be because of a security feature in your browser known as CORS (Cross-Origin Resource Sharing) that protects against files downloaded from different servers infecting your PC. If so, you will see an error message in the Firefox javascript console that looks something like this:

      Error: WebGL warning: texImage2D: Cross-origin elements require CORS.

    If you get that message, go to this website and follow the instructions to disable this feature on Firefox while you're doing your texture mapping. I would advise you to re-enable (or use a different browser) when you are browsing the internet.

    Problem 2: Cohen-Sutherland Clipping
    Given the following clipping rectangle:

      (xmin, ymin) = (50, 50); (xmax, ymax) = (150, 100)

    For each line segment below:
    • Determine the outcodes for each of the endpoints in the following line segments.
    • Use the Cohen-Sutherland clipping method to determine whether or not the segment should clipped.
    • Explain your answer based on the Cohen-Sutherland method.
    • If the segment should be clipped (or if it is uncertain), compute the points of intersection with the clipping window boundaries, and state whether the line should be clipped at each of these points

      a) P0 = (25, 75), P1 = (30, 125)

      b) P0 = (100, 70), P1 = (125, 120)

      c) P0 = (100, 25), P1 = (175, 75)

    Problem 3: Liang-Barsky Clipping Given the same clipping rectangle as used in Problem 1:

      (xmin, ymin) = (50, 50); (xmax, ymax) = (150, 100)

    Use the Liang-Barsky algorithm, as described in lecture (not the book), to determine whether the following line segment should be clipped, and if so, where it should be clipped.

      P1 = (30, 80), P2 = (90, 110)

    In your answer, you should compute the following:

    • Compute the parametric representation for x and y components of the line segment. (i.e. x = x1 + alpha(x2 - x1), similar for y )
    • Compute the values of pk for each of the 4 clipping boundaries:
      p1: Left border, p2: right border, p3: bottom border, p4: top border.
    • Compute the values of qk for each of the for clipping boundaries.
    • Compute the value of alpha (= qk/pk) for each of the clipping boundaries.
    • Find the potential clipping values of alpha, u1 and u2, where u1 is the maximum alpha for all boundaries where pk < 0 and u2 is the minimum alpha for all boundaries where pk>0.
    • Based on u1 and u2, determine whether the line needs to be clipped (u1 < u2)
    • If the line needs to be clipped, determine the (x, y) values of the intersection points for clipping by substituting u1 and u2 (for alpha) in the parametric equations derived above.

    Problem 4: Scan conversion
    a) Use the DDA algorithm to plot the individual pixels of a line segment between the following two endpoints:

      P1 = (2, 3); P2 = (9, 8)

    Show your work for each pixel plotted. Sketch the result on a grid.

    b) Use the Bresenham algorithm as described in class to plot the individual pixels of a line segment defined by the following two endpoints:

      P1 = (x1, y1) = (2, 3); Pf = (xf, yf) = (8, 7)

    In your answer, show the following:

    • Compute delta x, delta y, 2(delta y), 2(delta y) - 2(delta x),
      p1 = 2(delta y) - delta x
    • Plot x1, y1
    • Compute each successive pixel value based on the current pk.
    • Compute the next pk value based on the current pk.
    • Continue until the final pixel is plotted. Show your work for each pixel.
    • Sketch the result on a grid.

    Turning in this assignment

    • Turn in a hardcopy of the code files for problem 1, for textureCube.html and textureCube.js.
    • Turn in the written calculations and answers to problems 2 - 4.
    • Turn in a discussion log.
    • Bring these to class on the due date.
    • Upload your textureCube.html and textureCube.js files to Canvas .

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

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