Assignment 0: Vector Library (Very Easy)

Videos: 

• Lab Section: Full Video || YouTube Video Playlist Links to an external site.
• Lab Section (Fall 20): YouTube Video Playlist Links to an external site.

Objectives: 

Extend the matrix library provided by the textbook to support vector operations such as addition, subtraction, multiplication, cross product, dot product, etc. With this assignment, you will learn:

• How to create objected oriented graphics projects in Javascript.

• How to draw to a <canvas> element using a 2D context.

• Review fundamental concepts of Linear Algebra.

Introduction:

The textbook provides a matrix library called cuon-matrix.js which contains functions to create 4x4 matrices and operate with them. We will use this matrix later in this course for transforming (translate, rotate, scale) geometries. However, for now, we want to use this library for reviewing basic concepts of Linear Algebra as well as  this library is limited, since it only supports matrix x vector operations, but does not support a full range of vector x vector operations, such as vector addition, multiplication, subtraction.  Your job in this assignment is to extend the provided library to support most basic vector operations.

Instructions:

1. (1 point) Setup the DrawRectangle example from the book with our matrix library.

• Download the DrawRectangle (Listing 2.1, page 11) example from the book. This example is composed of two files: DrawRectangle.html and DrawRectangle.js.
• Rename these two files to asg0.html and asg0.js. In your new asg0.html, make sure to update the line that loads DrawRectangle.js to load asg0.js.
• Create a directory called lib.
• Download our modified matrix library cuon-matrix-cse160.js inside the lib directory.
• In asg0.html, load this library . Hint: use the <script> html tag.

Expected result:

2. (1 point) Draw a red vector v1 on a black canvas instead of the blue rectangle. The origin of the vector should be the center of the canvas. 

• In asg0.js, instantiate a vector v1 using the Vector3 class from cuon-matrix.js library (set the z coordinate to zero).
• In asg0.js, create a function drawVector(v, color) that takes a Vector3 v and a string color (e.g. "red").  Inside this function, use the builtin javascript function lineTo() to draw the vector v1. The resolution of the canvas is 400x400, so scale your v1 coordinates by 20 when drawing it. This will make it easier to visualize vectors with length 1.
• Call drawVector(v1, "red") in the main() function.

Expected result with v1 = (2.25, 2.25):

3. (1 point)  Add to your webpage an interface for the user to specify and draw the v1 vector. 

• In asg0.html, use one <input> html element to specify the x coordinate and another one for the y coordinate. Use a third <input> html element for the draw button.
• In asg0.js, create a function named handleDrawEvent() that is called whenever a user clicks on the draw button. Inside handleDrawEvent(): 
  1. Clear the canvas.
  2. Read the values of the text boxes to create v1.
  3. Call drawVector(v1, "red") .  

Expected result:

4. (2 points) Add to your webpage an interface for the user to specify and draw a second vector v2. 

• In asg0.html,  use one <input> html element to specify the x coordinate and another one for the y coordinate. Use the same v1 draw button to draw v2.
• In asg0.js, modify your handleDrawEvent() function to draw the vector v2 in blue:
  1. Read the values of the text boxes to create v2.
  2. Call drawVector(v2, "blue").

Expected result:

5. (2 points) Add to your webpage an interface for the user to perform and visualize the results of add, sub, div and mul operations. 

• In lib/cuon-matrix.js, implement  the functions add, sub, div and mul of the Vector3 class.
• In asg0.html, use the html <select> element to add an operation selector. Use the html <input>  element to add a number input textbox and. User another the html <input> to add a draw button for the user to perform operations.  
• In asg0.js, create a function named handleDrawOperationEvent() that is called whenever a user clicks on this second draw button. Inside handleDrawOperationEvent(): 
  1. Clear the canvas.
  2. Read the values of the text boxes to create v1 and call drawVector(v1, "red") .  
  3. Read the values of the text boxes to create v2 and call drawVector(v2, "blue") .  
  4. Read the value of the selector and call the respective Vector3 function. For add and sub operations, draw a green vector v3 = v1 + v2  or v3 = v1 - v2. For mul and div operations, draw two green vectors v3 = v1 * s and v4 = v2 * s.

Expected result:

6. (1 points) Add to your webpage an interface for the user to perform and visualize the results of magnitude and normalize operations.

1. 1. In lib/cuon-matrix.js, implement  the magnitude function.
   2. In lib/cuon-matrix.js, implement  the normalize function using the  magnitude function you just implemented.
   3. In asg0.html, include these two options in your html selector.
   4.  Print the magnitude results of this operation to the console. Hint: use javascript builtin console.log() function and open your browser's console.
   5. Draw normalized v1 and v2 in green.

Expected result:

7. (1 points) Add to your webpage an interface for the user to calculate and visualize the angle between the vectors v1 and v2.

1. 1. In lib/cuon-matrix.js, implement the static dot function. 
   2. In asg0.html, include the option "Angle between" in your html selector.
   3. In asg0.js, write a function angleBetween(v1, v2) that uses the dot function to compute the angle between v1 and v2. Hint: Use the definition of dot product dot(v1, v2) = ||v1|| * ||v2|| * cos(alpha).
   4. Print the result of this operation to the browser console. 

Expected result:

8. (1 points) Add to your webpage an interface for the user to calculate and area of the triangle formed by vectors v1 and v2.

1. 1. In lib/cuon-matrix.js, implement  the static cross function.
   2. In asg0.html, include the option "Area" in your html selector. 
   3. In asg0.js, write a function areaTriangle(v1, v2) that uses the cross function to compute the area of the triangle created with v1 and v2. Hint: Remember  ||v1 x v2]]  equals to the area of the parallelogram that the vectors span.
   4. Print the result of this operation to the browser console. 

Expected result:

9. (recommended) Test your vector function implementations

1. Download vectorTests.html Download vectorTests.html and place it in the same folder as cuon-matrix-cse160.js.
2. Open vectorTests.html which lists 9 tests stating either "Passed" or "Failed."

Resources:

• WebGL Matsuda/Lea: Ch01, Ch02 (pages 9-16).
• Eloquent Javascript (use as a reference to Javascript): https://eloquentjavascript.net Links to an external site.
• HTML <input> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input Links to an external site.
• HTML <select> element :https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select Links to an external site.
• How to create HTML buttons: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/button Links to an external site.

What to turn in:

1. Canvas Submission

Zip your entire project and submit it to Canvas under the appropriate assignment. Name your zip file "[FirstName]_[LastName]_Assignment_0.zip" (e.g. "Lucas_Ferreira_Assignment_0.zip").

2. Live Hosted Submission

You will upload your submission to GitHub Pages (or any other service of your choosing). If you use GitHub Pages, click here to learn how to set it up.

WHEN SUBMITTING YOUR PROJECT ON CANVAS, PLACE YOUR SITE LINK AS A COMMENT OF THE SUBMISSION.

Read the Submission Guide for further explanation on how to submit your assignment.