Jichu · Art

A site about Jichu & Art

← All works

Procedural Fireball

A procedural fireball in WebGL: multi-octave noise pushes the vertices of a sphere along their normals over time, and the size of that offset sets the colour.

  • Rendering & GPU
  • WebGL
  • GLSL
  • TypeScript
  • Procedural Graphics
  • Shader Programming
  • Noise Functions
A fireball in three states: spiky, molten and smooth
Year
2024
Type
Individual project
Course
CIS 5660 Procedural Graphics at UPenn

Overview

  • Noise3D Perlin noise and FBM for low- and high-frequency offsets that change over time
  • Toolbox functionsFour of them time the animation of the surface
  • ColourA gradient interpolated from each vertex’s offset
  • ControlsInitial colour, amplitude, frequency and time factor for three parts of the fireball
  • BackgroundA gradient that shifts over time