Garage

Computer graphics, from fractals to ray tracing

A semester of graphics projects in p5.js: a recursive fractal, a hierarchical 3D model, curved polygon meshes, and a ray tracer with shadows and soft lighting. They still run here, in the browser.

Georgia Tech · Computer Graphics

Recursive triangle fractal in blue and green on pink, which changes as the mouse moves
Status
Course projects
Role
Developer
Methods
p5.js, WebGL, ray tracing
Timeline
Spring semester · 2022
Team
Solo

Building the pipeline by hand.

The course supplied starter code and test scenes. Each project asked for the part that libraries usually hide: transformations, meshes and their normals, and how light reaches a pixel.

The warm-up was a recursive triangle fractal, seven levels deep. Moving the mouse up and down changes how large each level is relative to its parent.

A cow from boxes.

A blocky brown and white cow built from 3D boxes on a green background

The modeling project asked for an object assembled from 3D primitives under a light. I built a Minecraft-style cow from dozens of boxes: body, head, nostrils, ears, legs, hooves, and each patch of its coat, positioned with nested transformations so the whole animal moves as one.

Smooth tubes from flat quads.

The mesh project built shapes from quadrilaterals with a normal at every vertex, so lighting reads as a smooth surface. I wrote cylinders between two points, then tubes that follow a cubic Bézier curve, computing each ring of vertices from the curve’s position and derivative. Joining tube segments end to end produced the knot.

A gray tube following an S-shaped Bézier curve
A gray trefoil knot made of joined Bézier tubes

One ray per pixel, then many.

The ray tracer cast a ray from the eye through each pixel and shaded the nearest sphere it hit. The second part added disks, shadows from point lights, area lights that soften those shadows, and colored lights.

Area lights need many samples per pixel. Supersampling on a grid, then jittering each sample within its cell, trades render time for smoother edges and penumbras.

Two ray-traced spheres, red and green, on a blue background
A ray-traced worm of overlapping spheres with eyes