teaching machines

CS 488: Lab 2 – Matrices

January 29, 2021 by Chris Johnson. Filed under graphics-3d, labs, spring-2021.

Welcome to lab, which is a place where you and your peers complete exercises designed to help you learn the ideas discussed in the preceding lectures. It is intended to be a time where you encounter holes in your understanding and talk out loud with your peers and instructor.

Your instructor will bounce around between breakout rooms to check in with you. However, you are encouraged to request assistance if you find your progress blocked.

Designate one of your group to be the host. This individual will be responsible for setting up a Live Share session in Visual Studio Code and submitting your work. No team member should dominate or be expected to carry the group. All members should be writing code and contributing ideas.

Setup

Host, follow these steps:

1. Open Visual Studio Code.
2. Click File / Open Folder, create a new folder, and open it.
3. With the Live Share extension installed, select View / Command Palette, and choose Live Share: Start Collaborative Session.
4. Copy the invitation link to your chat.

Non-hosts, join the session.

Task

Your task in this lab is to implement transformations via matrices. Follow these steps to complete this lab:

• Create and open a new file src/Matrix4.js.
• Declare a class named Matrix4. Note the 4. Someday you may need a Matrix3 or a Matrix2.
• Add a constructor.
• In the constructor, initialize an instance variable named elements, which is a Float32Array large enough to hold the elements of a 4×4 matrix. This variable presents a logical view of a raw buffer of bytes as an array of 16 floating-point values. The Float32Array class is part of JavaScript’s standard library and handles any conversion required to go from JavaScript’s floating-point type (which is a double) to a 4-byte floating point value. See MDN’s documentation to learn how to work with Float32Array.
• Note that, memory-wise, elements is a flat 16-element array, but we want to think of it as a 4×4 two-dimensional array. By the conventions of WebGL, the first four elements are the first column of the matrix. The next four are the second column. This ordering is called column major. Add a comment to show a column major “map” of the matrix. Show the 4×4 grid with each index in the appropriate spot.
• Add a static method identity that returns a new matrix whose diagonal elements are all 1 and whose other elements are 0. Set elements appropriately. Multiplying a vector by the identity matrix yields the original vector, just as multiplying a number by 1 yields the original number.
• Add a static method scale that returns a new matrix representing a scale transformation. Accept an array of three scale factors as a parameter. Set elements appropriately.
• Add a static method translate that returns a new matrix representing a translation. Accept an array of three offsets as a parameter. Set elements appropriately.
• Add a static method rotateZ that returns a new matrix representing a rotation around the z-axis. Accept a number of degrees as a parameter. Set elements appropriately.
• Add an instance method toBuffer that returns the matrix’s Float32Array. This is what you’ll need to pass to WebGL.
• In index.js, test that each of your four matrix types does its job.
• Add a mouse listener that ties the transformation matrix to the mouse position in some way.
• Submit your Matrix4.js on Crowdsource. Enter the eIDs for your team members. If you need to make changes after you’ve already submitted, just reload the page and resubmit. If you haven’t finished by the end of the scheduled lab time, you are free to continue working. However, the submission must be made before the end of the day to receive credit.