computer graphics

computer graphics

infinite suns

TypeScript, WebGL

TypeScript, WebGL

overview

For my graduate level class CIS 5660: Procedural Graphics, I created a procedural fireball generator, using TypeScript and WebGL. It's a pulsing, interactive, glowing ball of fire, with in-depth user customization. It was a useful exercise in procedural toolbox functions and getting comfortable with the process of proceduralism.

Check out the live demo here.

details

  • Toolbox functions:

    • smoothstep for colors based on deformation distance

    • sawtooth and impulse functions for pulsing effect (sawtooth to get a repeatedly increasing time value and impulse to control the Perlin noise factor)

    • triangle function to change core brightness (hard to notice but it repeatedly gets brighter and darker)

  • Uses FBM as low amplitude noise, added to Perlin noise for high amplitude "spikiness"

  • GUI allows user to modify polygon count, FBM amplification, FBM speed & frequency, Perlin factor (spikiness), pulse speed, and color

    • It also contains presets for specific stars

  • Background is a flat shader with stars that fade in and out