Java代写 | CS112 Final Project



CS112 Final Project

Introduction · Detailed Instructions · Example Final Animation · Submission · References

Due date: Tuesday, Dec 10 by 11:59 pm

1 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 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 Page 2 of 4 unless with the instructor’s permission.

2 Detailed Instructions

1. Download a codebase that contains models.js and final.html files.
2. The sun has directional light which revolves around the scene. It is switched off when it’s below the horizon.
3. 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).
4. The car has two headlights (spotlight) which light up in the night. Check the link for a simple spotlight model.
5. The wheels of the car move when the car moves on the street.
6. Add an animate check box which when pressed animates the scene.
7. Two-person groups only: Add an extra particle effect above the streetlight in the night.
Study the references (as well as many other tutorials on the Internet) for more information.
8. 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.
9. 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.

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.

3 Example Final Animation

4 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.
2. Submit your entire code including the models.js file.
3. Please compress your code in a zip archive and submit it on EEE Canvas. DO NOT
submit individual files.
4. 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
5 References WebGL
JavaScript 1, JavaScript 2
WebGL Shaders and GLSL (GL Shading Language)
WebGL Particle Effect
formatted by Markdeep 1.07 ✒