**CS112 PA1: Basic Transformations** ***Due date: Wednesday, Oct 23 by 11:59 pm*** Introduction ==================== The objective of this assignment is to get familiar with the basic geometric transformations that are fundamental to creating any scene. Specifically, you would need to write some code (maybe dozens of lines), and it will take some time to understand every part, so **please start early**. **Software and hardware requirement**: WebGL runs within the browser and is independent of the operating and window systems. You may finish the assignment using any operating system you like (e.g. Windows, MacOS or Linux). **Programming language**: The assignment will be implemented in JavaScript. As we will minimize the use of obscure JavaScript language features, it should not be too difficult for anyone with prior experiences in dynamic languages like Python or familiar with the principles of Object Oriented Programming (like C++ or Java) to get a handle on JavaScript syntax by reading through some of the code in code skeleton. For more formal introductions to JavaScript, checkout the [references](#usefulreferences). **Cooperation and third-party code**: This is an individual programming assignment, and you should implement the code by your own. You may not share final solutions, and you must write up your own work, expressing it in your own words/notation. Third party codes are not allowed. Getting started with the code skeleton ======================================== Download pa1.zip -------------------- Download [pa1.zip](pa1.zip) and extract it any folder you like. You should have six files in the folder: |file name|description| |---|---| |pa1.html |HTML file which shows the WebGL canvas, you don't need to change this file.| |pa1.js |the actual functions for this assignment.| |gl-matrix-min.js |utility functions for operating matrices.| |webgl-utils.js |utility functions for WebGL animation.| |models.js |file describing the models in IFS format.| |trackball-rotator.js|utility functions for rotating the scene using the cursor.| Open pa1.html -------------------- Open *pa1.html* in the extracted folder with Chrome. In the given code skeleton, a scene is drawn with 4 chairs (which are overlapping with each other as of now) and a table as shown below. ![](./pa1/table_chair.png width=512) Note -------------------- For this project, you will be modifying only two files: *models.js* and *pa1.js*. But try to read and understand what other functions are doing as well as it would help you better implement things. There are lots of comments throughout the codebase and the functions have similar structure as programming assignment 0 for better/easy understanding. The following are two tasks that need to be completed in this programming assignment. Model a scene of a dining room ============================== TASK 1 ---------- Use the **built-in matrix transformations** such as **`mat4.scale()`**, **`mat4.translate()`**, and **`mat4.rotate()`** provided by *gl-matrix-min.js* to properly configure the **modelview matrix** and model a scene of a typical dining room. ### Task 1-1 First build the center-piece (i.e. a cube) by determining the coordinates, normals for each of the 8 vertices and also its faces. Use a scratch paper if you need to, similar to what you did in the PA0. Note that you would need to compute *per-vertex* positions and normals (both of which should involve 24 floating point numbers). Once you have computed all values, complete the function **`cube()`** in *models.js*. (Refer to *models.js* to see how other models are represented.) ### Task 1-2 Complete the function **`draw()`** in *pa1.js* by computing the transformation for each of the six objects (1 table,4 chairs, 1 box) where you have a table in the center surrounded by four chairs and a center piece on the table. Complete your functions: - **`perspective(...)`** - **`translation(...)`** - **`scaling(...)`** - **`rotation(...)`** and use them to complete the function **`draw()`**. Think what input and output parameters you would need for each of these function. The description of these have been provided in the file. Note, the **`rotate()`** function rotates the model about an arbitrary axis, hence one of the input would be the axis vector. Note you will still be calling all the 4 transformation functions in **`draw()`**. ### Things to keep in mind * Appropriately scale all the objects such that the scene looks more realistic. * All the four chairs should be properly oriented. i.e. facing the table. * The box should be much smaller and placed approximately on the center of the table. * Try to avoid any intersections between the models. TASK 2 ---------- Using the task 1 as reference, now model the **same** scene which you built above but this time you **CANNOT** use any of the built-in matrix transformations. Complete the functions **`perspective()`**, **`translate()`**, **`rotate()`** and **`scale()`** in *pa1.js* such that when "Use_My_gl" is checked, the scene should be rendered using your hand-coded transformations; otherwise, the built-in transformations should be used. See below image for example. ![](./pa1/code.png width=512) Feel free to use your own variable names and write helper functions to perform elementary operations like matrix-matrix and matrix-vector multiplications. **Hint:** OpenGL matrices are stored as arrays in *column-major* orders. Submission ==================== 1. Make sure your name and ID is filled above the canvas in *pa1.html*. 1. You will need to submit the following files on EEE Canvas in **a zip archive**, please DO NOT submit individual files. - pa1.html - p1.js - models.js - gl-matrix-min.js - trackball-rotator.js - webgl-utils.js 1. We will grade your work using Google Chrome by default. If your code requires a different browser to work properly, please clarify by including a *readme* file in your zip archive. Grading ==================== 1. (50 pts) Your program should be able to place and render all the six objects (1 table, 4 chairs and 1 box) in their correct positions as described above. 2. (50 pts) When the user checks the checkbox "Use_My_gl", the scene should be rendered using your own transformations and when its unchecked it should be using the built-in transformations. Note that, if your implementation is correct, the scene should remain the same no matter if "Use_My_gl" is checked. Useful references ==================== - [WebGL 1](https://webglfundamentals.org), [WebGL 2](http://math.hws.edu/graphicsbook/c7) - [JavaScript 1](https://developer.mozilla.org/en-US/docs/Web/JavaScript), [JavaScript 2](https://google.github.io/styleguide/javascriptguide.xml?showone=Comments#Comments) - [glMatrix](http://glmatrix.net)