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...
- Your program will render a set of spheres bouncing around an invisible (or visible if you wish...) 3D box. You could use a box with corners (-1,-1,-1) to (1,1,1) for example.
When a sphere hits one of the walls in the box, it should reflect in physically realistic manner. - You should keep an array or list of particles. Each particle will have a postion P and velocity V. Both of these quantities will be three-dimensional quantities.
- It is acceptable to render all the spheres with a uniform radius and color, however...
- ...you can include other attributes if you like. For example, you could have each sphere have an individual color or radius or alpha value....
- You only need to generate one sphere mesh...you simply draw that mesh in multiple different spots each frame.
- You can use some of the code from the HelloSolarSystem3.html demo that is one the course website....grab the code to generate and draw a sphere.
- 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.
- The spheres should be genereated with a random position and velocity. You will need to bound those values to be reasonable (e.g. position inside the box).
- You will also need a reset button that will remove all existing spheres from the scene.
- After rendering a frame showing the current position of the spheres, you will need to update the position and velocity of each sphere.
- Update the position using the current velocity and Euler Integration
- Update the velocity using the set of forces you are implementing (e.g. gravity and friction)
- 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 the required sphere collisons |
Documentation | 1pt |
Have your webpage explain the program interface |
Comment your code | 1pt | Comment your code |