Illinois Computer Science
CS 418 Interactive Computer Graphics
MP4: Simple Particle System

Due: 11:59pm CDT, December 12, 2018


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.

Submission:

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

Grading:

The assignment will be graded based on the following scale: