COS 426: Computer Graphics Spring 2019

Overview

In this assignment, you will implement a basic cloth simulator in JavaScript, leveraging the Three.js graphics library, as in previous assignments.

Deadline: This assignment is due at 11:55pm on Sunday, April 28th.

Getting Started

To get started, download this zip file and unzip it on your computer. Change to the subdirectory cos426-assign5 and run the command python3 -m http.server (or whichever variant is appropriate for your operating system and version of Python), 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. To start, you should see a simple square wireframe on top of 4 poles. In this assignment, you will transform this simple static scene into a dynamic, real-time cloth simulation!

Tour of the GUI

On the top right, you will find a familiar menu.

• The size slider adjusts the size of the cloth. Initially, adjusting this will only change the density of the wireframe.
• The wireframe button toggles between the wireframe and the cloth visualizations, and may be helpful in debugging.
• The Interaction folder lets you adjust the intersections within the scene. The camera can be set to auto-rotate for dramatic viewing, wind can be toggled on/off, an invisible object (sphere or table) can be added for more interesting cloth interactions, the sphere can be set to move around for further interaction. Lastly, you can choose from 6 different ways in which the cloth is pinned. Initially, changing these settings will not do anything interesting.
• The Behavior folder lets you adjust the structure of the cloth's underlying particle-spring system. In addition, the friction slider affects how the cloth interacts with other objects (such as the sphere or table). Lastly, you can toggle whether the cloth avoids self-intersections.
• The Appearance folder lets you adjust the diffuse and specular colors for both cloth and ground. In addition, you can play around with the background (fog) color.

However, please note that there is no built-in screen-capture command for this assignment. Please use your own screen-capture software to get screenshots to put into your write-up. On MacOS, you can use Cmd+Shift+4 to capture a screenshot to your Desktop. On all operating systems, you might find software such as Gyazo to be a useful tool for both capturing images and GIFs.

In addition, there is no batch mode in this assignment as there has been in previous assignments. As such, you will have to refresh and then change the settings from their default state in order to test any changes that you make. Hopefully, this shouldn't be too much of an inconvenience.

Assignment Structure

This assignment is worth 10 points, and is broken down into several parts.

• (3.0) Part 1: Particles and Springs
• (2.5) Part 2: Simulation via Numerical Integration
• (3.5) Part 3: Collisions
• (1.0+) Part 4: Extensions

Each part will involve writing code in one or more locations. Some parts require only a few lines of code, while others are more involved. The goal is for you to implement as much of the core pipeline of the cloth physics simulation loop as possible so that you can understand and see how it works.

This assignment differs from previous assignments slightly in that it consists almost entirely of required features, with only the final few points as extensions to the cloth simulation that are non-required and up to you to pick from. In addition, there is no art contest.

As always, partially-correct solutions will receive partial credit, provided that you explain what you attempted and what issues you ran into in your write-up.

Onto the Simulation...

Now, go to this page for a walkthrough of the codebase and the detailed instructions for the assignment.

Scoring

By implementing all the required features (Parts 1 through 3), you can earn up to 9 points. Full credit for this assignment is 10 points, so to complement the required features you may choose from the optional features for cloth simulation extensions listed above (or come up with your own idea and implement it!). It is possible to get more than 10 points for this assignment. The value of non-required features incurs diminishing returns after the first 1 point. For sums of non-required features (n>1), each point over 1 will accrue a value of 3/4 the previous point.

Your final score is based on the following factors:

• r: your score on the required features (up to R = 9 points)
• n: your score on the non-required features (value diminishes when n > N = 1) .
• d: diminishing return factor (d = 3/4 in this assignment)

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)) * 2.0) / 2.0

Score Calculator: Compute!

my score on the required features
my score on the non-required features
total score

How to complete your writeup & submit

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.

For each feature that completed or attempted to complete, briefly write about how you went about implementing it. If it is buggy/incomplete, explain what you tried to do and what issues you ran into. Partial credit is possible.

Not all features will require an image or video of your results. Please see the writeup for further instructions. When you do submit an image or video, please submit images in png format and videos in gif format. Again, a tool like Gyazo might be very helpful.

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.

Acknowledgements

Special thanks to Aatish Bhatia, who is an associate director on the Council on Science and Technology at Princeton University. This assignment was adapted from his Three.js cloth simulation and turned into the new animation assignment for COS 426 in Spring 2019, in an effort led by Austin Le in collaboration with Prof. Adam Finkelstein and Aatish Bhatia himself.