Overview

This graphics project renders multiple spheres bouncing around a 3-D box to simulate a particle system with collision detection. The purpose of this project was to experiment with fundamental building blocks in collision detection. I created this prototype in December 2016 by using WebGL and JavaScript.

Description

This program renders a set of spheres bouncing around in a 3-D box. To create an individual particle, I generated a sphere mesh with a random initial position and velocity. I built my own custom shader using the Blinn-Phong reflection model. The user interface allows you to create new spheres either by using a mouse click or a key press. A reset button removes all existing spheres from the scene. The user can turn sphere-sphere collision detection on or off.

After rendering each frame showing the current position of the spheres, I updated the position by using Euler Integration to compute new particle positions. Both a gravitational force and a frictional force act on the particles. The program implements both sphere-wall and sphere-sphere collision detection. When a collision is detected the particle position and velocity are adjusted accordingly.

The purpose of this project was to experiment with fundamental building blocks in collision detection. Rather than use off-the-shelf tools, this project allowed me to gain an in-depth understanding of how the underlying technology fits together. This helps me to be unconstrained in applying new technologies into existing and unique environments.

CS 418: Interactive Computer Graphics taught basic mathematical tools and computational techniques for modeling, rendering, and animating 3-D scenes. In this course I created real-time 3D graphics and computationally intensive animations such as physics simulations. These types of applications demand high performance vector and matrix math. Even though many of these applications can be created easily and quickly in a high-performance animation software, creating computer animations from scratch at a low level gave me a considerable understanding of the graphics pipeline and rendering process.