COS 426 General | Assignment 4
In this assignment you will create various particle-systems in animated scenes.
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-assign4and run the command
python -m SimpleHTTPServerwhich 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.jsin 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.
batch.html?system=fountainBounce. The scenes are specified in the file
js/systemSettings.jsand 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.
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.
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 contest (which yields one point for participation and two for winning). It is possible to get more than 10 points for this assignment. Your final score will be calculated by adding:
- (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 a 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.
- (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.
- (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).
- (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
createScenefor 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.
- your score on the required features (up to 7 points)
- your participation in the art contest (up to 2 points)
- 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.
To implement the features listed above, you only need to edit the js files
updaters.js(and a little bit in
systemSettings.jsif you make your own system). Before starting on that, we recommend you take a quick look at the other js files (especially
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.
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.
writeup.htmlfile 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.htmlprovided. 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.htmlcommand that creates that image, as in the last assignment. To save space, please submit images in
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.
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 the collaboration policy.
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