COS 426:
Computer Graphics
Spring 2018


COS 426 General | Assignment 5


Overview

In this assignment you will create various particle-systems in animated scenes.


Getting Started

As in the previous assignments, the program has two modes: (1) an GUI mode where you can choose a scene or adjust display parameters and (2) a "batch" mode where there is no GUI and the scene is specified in the URL. This section of the instructions are analogous those of the previous assignments, so by now this should be very familiar.

To get started, download this zip file and unzip it on your computer. Change to the subdirectory cos426-assign5 and run the command python -m SimpleHTTPServer (or python -m http.server for Python V3.0 and up) which will launch a web server on your computer, rooted at this directory. (See first assignment description about why we do this instead of opening the files directly.)

Once you have started the local web server, direct your browser to http://localhost:8000. You should see the web page that links to the two different renderers.

Using your favorite text/code editor, edit the file ls js/student.js in that directory and fill in your name and NetID. Reload the web page in your browser, and now your information should appear above the image.



New GUI features in this Assignment



Implementing the Particle Systems

The assignment is worth 12 points. The following is a list of features that you may implement. The number in front of the feature corresponds to how many points the feature is worth for the full implementation. Partial or partially-correct solutions will receive partial credit. The features in bold face are required. The other ones are optional. Refer to the examples web page for example output images as well as some implementation hints.

The translation filter is already implemented for you as an example. By implementing all the required features (in bold), you get 8 points. Full credit for this assignment is 12 points, so to complement the required features you may choose from the optional features listed above and participate in the art contest (which yields one point for participation and two for winning). It is possible to get more than 12 points for this assignment. The value of non-required features incurs diminishing returns after the first 4 points. For sums of non-required features (n>4), each point over 4 will accrue a value of 3/4 the previous point.

Your final score is based on the following factors:

Final score will be rounded to the nearest 0.5. The formula in javascript is:
Math.round((Math.min(R, r) + Math.min(N, n) + d * (1 - Math.pow(d, Math.max(n - N, 0))) / (1 - d) + a) * 2.0) / 2.0

Score Calculator:
my score on the required features
my score on the non-required features
my score on the art contest
total score


How to Program the Particle Systems

To implement the features listed above, you only need to edit the js files initializers.js and updaters.js (and a little bit in systemSettings.js if you make your own system). Before starting on that, we recommend you take a quick look at the other js files (especially systemSettings.js and utils.js) to get a sense of what does what. You are welcome to look at any of the other files, but it should not be necessary.


Submitting

You should submit your solution via CS dropbox here. The submitted zip file should preserve the directory structure of the skeleton code we provided in the zip file above.

The writeup.html file should be an HTML document demonstrating the effects of the features you have implemented and would like scored.

You should start from the the example writeup.html provided. At the top of that file are a list of features that you might implement, linking to the section where you talk about them. Please remove any features that you do not implement, but otherwise leave this header section in tact. When you include an image, also include a link to the batch.html command that creates that image, as in the last assignment. To save space, please submit images in png format.

Note that you are expected to use good programming style at all times, including meaningful variable names, a comment or three describing what the code is doing, etc. Partial credit may not be assigned for code without comments. We have mostly tried to conform to the idiomatic JS style conventions.



Hints

As in the last assignment:


FAQ

Here are some answers to frequently asked questions. Check back here occasionally, as we may add FAQs to this list: