CS112 Final Project

CS112 Final Project
 Please submit the zip file to EEE.
1. Introduction
In this assignment, you will be combining concepts which you have learnt in your previous programming
assignments. Specifically, hierarchical modeling of objects and their motion and manipulating lights and 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 attached video 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.
Software and hardware requirement: WebGL runs within the browser, so is independent of the operating and
window systems. You may finish the assignment using any operating system you like, e.g. Windows, OSX 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 experience in a dynamic
language 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 a more formal introduction
to Javascript, checkout the nice tutorial from https://javascript.info/.
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 unless with professor’s permission.
2. Things to keep in mind.
1) The sun has directional light which revolves around the scene. It is switched off when it’s below the
horizon.
2) 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 the discussion slide (Week 5).
3) The car has two headlights (spotlight) which light up in the night. Check the link below for a simple
spotlight model.
http://graphics.cs.cmu.edu/nsp/course/15-462/Spring04/slides/07-lighting.pdf)
4) The wheels of the car move when the car moves on the street.
5) Add an animate check box which when pressed animates the scene.
6) All the basic building blocks are given (in the models.js) to draw a car, tree, street lamp, sun, street. Read
the model.js to understand the parameters to draw individual objects.
Hint: 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.
7) 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.
3. Submission
1) Make sure you write your name and ID on the top of the canvas.
2) Submit your entire code including the models.js file.
4. Grading
Your code should be able to animate the scene as per the above instructions.
5. Useful references
1) WebGL tutorial:
http://learningwebgl.com/blog/?page_id=1217
2) JavaScript
https://developer.mozilla.org/en-US/docs/Web/JavaScript
3) JS style guide:
https://google.github.io/styleguide/javascriptguide.xml?showone=Comments#Comments
4) WebGL Shaders and GLSL (GL Shading Language)
https://webglfundamentals.org/webgl/lessons/webgl-shaders-and-glsl.html