WebGL Visualizations

Background

In June 2023, I attended a Web Development Meetup that offered workshops about various web technologies to local industry professionals in Sunnyvale California, hosted by the Modern Web Organization.

One of those workshops, led by Shruti Kapoor, taught how to create bubbles using the HTML Canvas API and WebGL. I enjoyed the presentation and followed along excitedly. By the end of the 30 minute presentation, I rendered little bubbles, shooting out with the click of a mouse.

Floating Bubbles Demo

I wanted to take these renderings one step further. So, I added some shading to give the appearance of light. To imbue more life into their movements, I programmed the bubbles to eventually waft their way upwards after shooting out!

Spiralizing Colors Demo

I decided to use the skills learned from the workshop to create more complex visualizations. Inspired by fireworks, I conceptualized and programmed colorful particle effects. I utilized object oriented programming to manage the creation, updates, and cleanup of each WebGL resource used to create the particles in the animations.