Spring 2017

Assignment 4: Animation

Overview

In this assignment you will create animated scenes containing particle systems.

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-assign4 and run the command python -m SimpleHTTPServer 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

• The GUI should be pretty familiar; it looks a lot like that of Assignment 2.
• The batch version specifies the scene on the command line, for example: batch.html?system=fountainBounce. The scenes are specified in the file js/systemSettings.js and the fountain scene (for example) is created by the method SystemSettings.fountainBounce. Other parameters can also be set on the command line like width and height and texture etc.
• Pressing the 'I' key. As before this captures an image of the current rendering. (In different browsers you may get slightly different behavior. In Chrome it should force a download while in some other browsers it may open in a different window or tab.) It should be a PNG file; you may need to rename it adding the file extension '.png'.
• Pressing the spacebar pauses the animation.

Implementing the Particle Systems

The assignment is worth 10 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.

• Basic
  • (1.0) Euler. Basic Euler integration. The provided code already updates positions based on velocities (to get you started). You need to update velocities based on gravity and other forces.
  • (1.0) Sphere source. Emit particles from the surface of a sphere, with uniform probability over the entire surface. (The naive approach using a random latitude and longitude would emit more particles at the poles.)
  • (1.0) Animated mesh source. Emit particles from an animated mesh by choosing a face at random and a random position within that face.
  • (1.0) Uniform distribution on animated mesh. Change your code for the animated mesh to provide uniform probability distributed across the surface (as with the sphere above). You need to consider face areas.
• Collisions
  • (1.0) Ground plane. This is needed in the fountain, for example. Implement two versions: one where the particles bounce, and the other where the ground plane is a sink (and the particles disappear).
  • (1.0) Axis box. This is a box defined as minima/maxima in the x,y,z directions. Implement both the bounce and sink versions. You might want this for your own scene, for example to make a set of stairs.
• Cloth
  • (1.0) Sphere collision. The cloth will drape over a sphere. Set the damping term to 0 so the cloth does not bounce off the sphere, but rather slide over its surface.
  • (2.0) Spring system. You are given a 2D grid of particles. Add a spring force between every neighboring pair (neighbors are up, down, left, right).
• Other
  • (1.0-3.0) Your system. Make your own cool particle system(s). It could include flocking, planets, spatial variation, strange attractors or any thing else you like. You could do several if you want. You can play around with making any kind of scene you want by modifying the function createScene for your system.
  • (1.0) Rendering. Play with rendering in any way you like. Perhaps make your particle's rendering style (color or size or anything) depend on its lifetime or location, etc.

By implementing all the required features (in bold), you get 7 points. Full credit for this assignment is 10 points, so to complement the required features you may choose from the optional features listed above and participate in the art gallery. It is possible to get more than 10 points for this assignment. Your final score will be calculated by adding:

• your score on the required features (up to 7 points)
• submitting to the art gallery (1 point)
• your score on the non-required features, calculated as follows.

The value of non-required features incurs diminishing returns after the first 3 points. For sums of non-required features (n>3), each point over 3 will accrue a value of 2/3 the previous point.

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

The Dropbox link to submit your assignment is 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:

• Do the simplest operations first! Note, however, there are some dependencies, for example you need to handle mesh traversal before the other analysis and filtering operations.
• Look at the example page.
• Post a message to Piazza if you have questions.
• Take note of the late policy and collaboration policy posted on the main assignments page.

FAQ

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

• Currently there are no FAQs