CSCI 343 Computer Graphics

    College of the Holy Cross, Fall 2023

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

    Assignment 3

    Due: Thursday, September 28

    NOTE: The first midterm exam will be given on Tuesday, October 3. The exam will include problems on geometric transformations, so it is important that you complete this assignment on time to gain practice working with such transformations.

    Problem 1:

    In this problem, you will use WebGL and matrix functions provided by the textbook (in MV.js) for implementing geometric transformations to construct a given design. Specifically, you will make use of the MV.js functions, translate(dx, dy, dz), rotate(angle, vx, vy, vz), and scalem(sx, sy, sz) to create the pattern shown below. Note: Do not use the shear transformation. This makes the task much harder!

    Note: There is a bug in the MV.js code provided by the authors of the book. If you downloaded your Common folder from the author's site, it may still have this bug. If you downloaded your Common folder from the course website, the bug has been fixed and you don't need to do anything further. If you downloaded from the author's website, you can re-download the zip files for the CommonWindows.zip or CommonLinux.zip (that also works on Macs) from the course documentation page.

    Recall that the translate(dx, dy, dz) function creates a translation matrix that, when multiplied with the model matrix, will translate all vertices in a direction and distance given by the vector (dx, dy, dz). rotate(angle, vx, vy, vz) creates a matrix that rotates the vertices by the specified angle (in degrees!) about an axis of rotation specified by the vector components vx, vy and vz. Finally, scalem(x, y, z) generates a matrix that scales the vertices by the factors sx, sy and sz (in the x, y and z directions, respectively).

    Your task is to apply these transformations a square to create (approximately) the following pattern:

    Choose the dimensions of each petal of the flower so that it looks as similar as possible to the flower shown above. There are two strict requirements. First, the center vertex of each petal must be positioned at the point (0, 0) in the clipping rectangle. Second, the diamonds that are inside the squares located around the outside must fit exactly in the square. In other words, you must calculate the side length of the diamond relative to the side length of the square so that each vertex of the diamond falls on the border of the square at the center of the square side.

    You must begin with the following matrix definitions:

      For the canvas size, use: <canvas id="gl-canvas" width="500" height="500">

      The viewport should also be 500 x 500 pixels.

    You must define only four vertices in your code, given as follows: 

    	var vertices = [ ];	//This should be a global variable
	...

	var x=-0.1;	//Lower left corner
	var y=-0.1;
	var side = 0.2;
	
	vertices.push(vec2(x, y));
	vertices.push(vec2(x+side, y));
	vertices.push(vec2(x+side, y+side));
	vertices.push(vec2(x, y+side));

    These vertices produce a version of the following square:

    Without redefining any of these vertices or adding any more vertices, use the transformation matrices (translation, rotation and scale, but not shear) to transform the square and create the pattern. To get started, try to figure out how to create each of the petals from transforming the square. Decide what transformations you would use to create the following:

    Once you have the individual pieces, you need to transform and draw them in the proper orientations and positions. Try to make your code as compact as possible-- in particular, use loops to create parts of the design at different orientations. Hand in a printout of your code, and upload the files containing the JavaScript code and your html code (named flower.js, and flower.html) to Canvas.

    Problem 2: Creating a New Transformation

    In the description of scaling on page 159 of the textbook, it notes that a reflection is just a scaling by a negative factor, alpha. Thus, if we want to reflect a 2-D image across the x axis, we would scale the y coordinate by a factor of -1. Thus, we could produce a scaling matrix, S(1, -1, 1).

    On pages 201-203 of the Hearn and Baker text "Computer Graphics, C version" (Prentice Hall, 1997), there is a description of reflections of coordinates around different axes. On the top of page 203, the authors state:

    "Reflections about any line y = mx+b in the xy plane can be accomplished with a combination of translate-rotate-reflect transformations. In general, we first translate the line so that it passes through the origin. Then we can rotate the line onto one of the coordinate axes and reflect about that axis. Finally, we restore the line to its original position with the inverse rotation and translation transformations."

    Your task in this problem is to compute a matrix, T, to reflect about an arbitrary line given by y = mx + b. The elements in the reflection matrix should be based on the quantities m and b (from the equation of the line). Before you start, you will need to answer the following questions:

    1. What translation can be used to shift the line so that it passes through the origin?
    2. What angle of rotation can be used to rotate the line so that it is aligned with one of the coordinate axes? (hint: you can use the slope of the line to derive this angle)
    3. How does a reflection about one of the coordinate axes alter the coordinates of the points?

    On paper, derive a set of equations that specify the new coordinates x', y', z' in terms of the old coordinates x, y and z that would result from applying the following five transformation steps: (1) translation that shifts the axis (line) of reflection to the origin, (2) rotation that aligns this axis of refection with one of the coordinate axes (either x or y), (3) reflection of the points around this coordinate axis, (4) reverse rotation used in step (2), and (5) reverse translation used in step (1). Derive these equations using the following method:

    • Determine the transformation matrices for each of the transformations described above. (You may use the symbol, theta, to represent the angle of rotation, as long as you specify the value of theta in terms of m and b in your answer to question 2. This will make writing out the matrices a little easier).
    • Write out the full matrices in the correct left-to-right order of multiplication to perform the full transformation (i.e. all 5 transformations listed above).
    • Multiply the matrices for the first two transformations (the vertical shift and the rotation) together (make sure you put them in the correct order) to determine a single 4 x 4 matrix that performs those two transformations. Turn in your answer for this 4 X 4 matrix.
    • Given a final matrix for this transformation of:

      Write out the equations x' and y' in terms that depend on x, y, m, and b. (Note that z' = z, since we are dealing with just the 2D reflection).

    Hand in:

    • Your written answers to questions 1-3 above and
    • The full matrix multiplication equation with each of the transformation matrices in the correct order of multiplication (you do not need to multiply them all out)
    • The result of multiplying the matrices for the first two transformations.
    • Your equations for generating the new coordinates based on the final matrix given above.

    Make sure to show all your work.

    Turning in this assignment

    • Turn in a hardcopy of the JavaScript code for problem 1.
    • Turn in a hardcopy of the HTML code for problem 1.
    • Turn in your written answers for problem 2.
    • Turn in your discussion log.
    • Bring these to class on the due date.
    • Upload to Canvas your code files for problem 1: flower.html and flower.js.

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

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