Computer Graphics & Rendering Systems

A hands-on journey through how visuals are built and brought to life. These five projects dive into 2D and 3D rendering techniques — from geometric transformations and projection to ray tracing, GPU shaders, and mesh manipulation. Every piece was coded from the ground up using JavaScript, p5.js, and GLSL, giving me a strong foundation in both the logic and artistry of graphics.

Tools
JavaScript, p5.js, GLSL

Overview

What started as an exploration of simple shapes quickly became a deep understanding of how pixels, light, and math interact. Through these projects, I developed a strong visual intuition, practiced debugging complex systems, and learned to write code that feels like animation — clean, structured, and expressive.

Topics covered:

  • 2D & 3D transformations

  • Projection and perspective

  • Ray tracing (shadows, reflections, lighting models)

  • Object modeling and animation

  • Shaders & GPU programming (GLSL)

  • Surface meshes and duals

  • Flat vs. smooth shading

  • Coordinate systems & matrix math

Project 1: Projection & Line Drawing 🖊️

Mapped user-defined lines onto a 2D screen using transformations, projection, and coordinate math.

Project 2: Object Modeling & Animation 🧱

Part A: Built composite objects using a matrix stack to manage hierarchical transforms.
Part B: Animated a full scene with object motion and camera transitions.

Project 3: Ray Tracing, Shadows & Reflections 🔦

Part A: Wrote a ray tracing renderer to simulate light-object interactions with cylinders and diffuse shading.
Part B: Introduced spheres, recursive reflections, shadows, and a richer lighting model with ambient + specular components.

Project 4: P4: GPU Programming (Shaders) 🎮

Wrote custom vertex and fragment shaders in GLSL to create animated textures and procedural effects. This was my intro to GPU-based thinking — fast, flexible, and wildly creative.

Project 5: Dual Meshes & Surface Shading 🔺

Built a tool to modify polyhedral models, generating their dual meshes and allowing toggles between flat and smooth shading — all triangle-based and interactive.

What I Took Away ✍️

These projects taught me to go deeper than surface-level visuals — to build the systems that make those visuals possible.

  • Debugging scenes with no output trained me to problem-solve without a UI safety net.

  • Ray tracing pushed me to reason about light, geometry, and recursive logic.

  • Shaders introduced a new level of performance-aware, creative code.

  • And overall? I learned to build things that are both technical and visual — and to trust my instinct when something looks wrong.

This work sharpened my dev skills, but more than that, it taught me how to create beautiful things by understanding their structure.