**CS112 Final Project** ***Due date: Tuesday, Dec 10 by 11:59 pm*** Introduction ==================== In this assignment, you will be combining concepts which you have learned in the previous programming assignments. Specifically, the modeling of objects and lights as well as controlling their motion. You will be required to write the entire code to draw a scene with a car on a circular track, trees, a street lamp and a sun. You would be animating the scene such that the car moves on the circular track and its headlights turn on along with the street lamp when its night time (there is no sun). You will also be animating the sun such that it revolves around the scene switching the scene from day to night and back. Have a look at the [example](#finalanimation) to see how the final animation should look like. We will be providing you with all the basic building blocks for modeling the sun, the car, the trees, the street and the street lamp. However, you will be responsible for transforming the models and lighting all objects to achieve the desired animation. Feel free to use any code from previous assignments. Since you need to understand and write the entire code we **suggest you start early**. **Programming language**: The assignment will be implemented in JavaScript and WebGL. 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. **Software and hardware requirement**: JavaScript and WebGL run within the browser and are independent of the operating system. You may finish the assignment using any operating system you like (e.g. Windows, MacOS or Linux). **Cooperation and third-party code**: You can work on your own or in two-person groups. You may not share your solution to others outside your group. Third party codes are not allowed unless with the instructor’s permission. Detailed Instructions ==================== 1. Download a [codebase](./files/codebase.zip) that contains `models.js` and `final.html` files. 1. The sun has **directional light** which revolves around the scene. It is switched off when it's below the horizon. 1. There is a street lamp (**point light**) at the center which lights up in the night. This time you need to consider about the attenuation as light travels. You can find the formula in slides (6_shading & week 5 discussion). 1. The car has two headlights (**spotlight**) which light up in the night. Check the [link](http://graphics.cs.cmu.edu/nsp/course/15-462/Spring04/slides/07-lighting.pdf) for a simple spotlight model. 1. The wheels of the car move when the car moves on the street. 1. Add an animate check box which when pressed animates the scene. 1. *Two-person groups only:* Add an extra particle effect above the streetlight in the night. Study the [references](#references) (as well as many other tutorials on the Internet) for more information. 1. All the basic building blocks are provide in `models.js` to draw a car, tree, street lamp, sun, street. Go over this file to understand the parameters needed to draw individual objects. 1. The lighting in your result may not be exactly the same as the animation we provide as there are many lighting parameters you can play with. **Hints**: - Create a torus, sphere, cone, cylinder, disk (from cylinder), ring and a cube. - Use them as your basic building blocks to draw all the objects in the scene. - e.g. for car think from looking at the video, what building blocks you need, what transformations are needed for each building block etc. Example Final Animation ==================== ![](./files/final_project.mov) Submission ==================== 1. Make sure that your names and student IDs are filled above the canvas in `final.html`. Two-person groups only need to submit once. 1. Submit your entire code including the `models.js` file. 1. Please compress your code in **a zip archive** and submit it on EEE Canvas. DO NOT submit individual files. 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. References ==================== - [WebGL](https://webglfundamentals.org) - [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) - [WebGL Shaders and GLSL (GL Shading Language)](https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html) - [WebGL Particle Effect](http://chinedufn.com/webgl-particle-effect-billboard-tutorial/)