MP4: Simple Particle System
Due: May 2 at 11:55pm


Write a simple particle system using WebGL to handle the display. Particle systems are typically used to model fine-grained physical effects like fire, smoke, and water.
​We will do something simpler and just render a system of bouncing spheres in 3D. The specifics of how you implement the following features are up to you...write an app that you think is fun...

  1. Your program will render a set of spheres bouncing around an invisible (or visible if you wish...) 3D box.
    1. You could use a box with corners (-1,-1,-1) to (1,1,1) for example.
    2. When a sphere hits one of the walls in the box, it should reflect in physically realistic manner.  
       
  2. You should keep an array or list of particles.
    1. Each particle will be have a postion P and velocity V...both of these quantities will be three-dimensional quantities.
    2. Each particle will be represented by a sphere
    3. It is acceptable to render all the spheres with a uniform radius and color, however...
    4. ...you can include other attributes if you like. For example, you could have each sphere have an individual color or radius or alpha value....
       
  3. You only need to generate one sphere mesh...you simply draw that mesh in multiple different spots each frame...once for each particle.
    1. You can use some of the code on the course website that can generate and render a sphere.
       
  4. Your user interface should allow you to create spheres using a mouse click or key press. Each creation event should create X spheres, where X is some number of your choosing.
    1. The spheres should be genereated with a random position and velocity.
    2. You will need to bound those values to be reasonable (e.g. position inside the box).
    3. You will also need a reset button that will remove all existing spheres from the scene.
       
  5. After rendering a frame showing the current position of the spheres, you will need to update the position and velocity of each sphere.
    1. Update the position using the current velocity and Euler Integration
    2. Update the velocity using the set of forces you are implementing (e.g. gravity and friction) 
       
  6. Implement 2 forces that affect the spheres: gravity and friction. If you want to violate physics for fun and have the spheres gain velocity after hitting walls, you can do that as well.

You will upload your files to compass in a zipped folder with name ${NetID}_MP4.zip. Include all of the files necessary for your application to run locally. Name your webpage Spheres.html

Rubric:

Feature Points Description
Interactive UI 1pt Implement the UI functionality described above
Phong or
Blinn-Phong Shading 
1pt Make sure the scene is well-lit. You can use the same Phong or Blinn-Phong shaders you used in previous MPs
Forces 2pt Implement the required forces
Euler Integration 2pts Use Euler Integration to compute new particle positions
Sphere
Collision Detection
2pts Correctly test for sphere-wall collisons. You are not required to check for sphere-sphere collisions.
Documentation  1pt

Have your webpage explain the program interface

Comment your code 1pt Comment your code