Interactive Computer Graphics

Overview

This repository contains a clean collection of Interactive Computer Graphics projects focused on graphics programming fundamentals, WebGL-based rendering, shader development, animation control, user interaction, 3D transformations, lighting models, clipping, and interactive scene construction.

The project collection progresses from a small algorithmic warm-up in Python to raw WebGL applications written with JavaScript and GLSL. The WebGL projects emphasize direct control of the graphics pipeline, including canvas setup, shader compilation, buffer management, animation loops, keyboard input, transformation matrices, lighting, and multi-object rendering.

The repository is organized as a public technical project collection. It keeps source code, concise documentation, and relevant project assets while excluding private packaging artifacts, generated binaries, raw logs, and report files.

Technical Focus

Interactive Computer Graphics combines programming, linear algebra, rendering algorithms, GPU-oriented thinking, and real-time interaction. The projects in this repository demonstrate practical understanding of how visual applications are built from low-level rendering components rather than high-level graphics frameworks.

Core themes include:

• Algorithmic problem solving and clean Python scripting
• Raw WebGL programming with JavaScript
• Vertex and fragment shader development with GLSL
• 3D object construction using vertex buffers and index buffers
• Model, view, and projection transformation workflows
• Time-based animation using browser rendering loops
• Keyboard interaction and application state control
• Lighting and shading models for 3D scenes
• Geometric transformations including translation, rotation, scaling, and shearing
• Clipping and multi-object scene rendering
• Browser-based execution using a local HTTP server

Skills & Technologies

Core skills: Python, JavaScript, WebGL, GLSL, Shader Programming, 3D Rendering, Graphics Pipeline, Vertex Buffer, Fragment Shader, Animation Loop, Keyboard Input, Transformation Matrix, Lighting, Shading, Clipping, Interactive Scene Rendering

Project Directory

No.	Project	Topic	Purpose	Main Concepts	Skills / Tags
01	01-prime-sequence-generator	Prime Sequence Generation	Practice clear algorithmic implementation and Python scripting through a simple number-generation task.	Prime checking, loop structure, list generation, output formatting, readable code style	Python, Algorithm Design, Problem Solving, Code Readability
02	02-basic-webgl-cube-rendering	Basic WebGL Cube Rendering	Render a basic 3D cube using raw WebGL, custom shaders, and browser-based graphics setup.	WebGL context, shader compilation, vertex buffers, cube geometry, rendering pipeline, camera/projection setup	JavaScript, WebGL, GLSL, 3D Rendering, Graphics Pipeline
03	03-webgl-animation-toggle	WebGL Animation and Keyboard Toggle	Extend a WebGL scene with time-based animation and keyboard-controlled state changes.	requestAnimationFrame, elapsed-time updates, frame-rate independent animation, event handling, pause/resume logic	JavaScript, WebGL, Animation, Keyboard Input, Interactive Graphics
04	04-interactive-webgl-renderer	Interactive WebGL Renderer	Build a more complete interactive renderer with shading, lighting, transformations, clipping, and multi-object scene features.	Flat shading, Gouraud shading, Phong shading, multiple lights, translation, rotation, scaling, shearing, clipping, scene rendering	WebGL, GLSL, Lighting, Shading, Transformations, Clipping, Scene Rendering

Skill Coverage Map

Skill / Topic	01 Prime Sequence	02 WebGL Cube	03 Animation Toggle	04 Interactive Renderer
Python programming	✅
Algorithm design	✅
JavaScript graphics programming		✅	✅	✅
WebGL context setup		✅	✅	✅
Shader compilation workflow		✅	✅	✅
Vertex and fragment shaders		✅	✅	✅
Vertex buffer / geometry setup		✅	✅	✅
3D cube or object rendering		✅	✅	✅
Camera and projection setup		✅	✅	✅
Time-based animation			✅	✅
Keyboard interaction			✅	✅
Application state control			✅	✅
Transformation matrices		✅	✅	✅
Lighting and shading models				✅
Flat / Gouraud / Phong shading				✅
Multiple light sources				✅
Clipping operations				✅
Multi-object scene rendering				✅
Browser-based reproducibility		✅	✅	✅

Repository Structure

interactive-computer-graphics/
├── README.md
├── .gitignore
├── 01-prime-sequence-generator/
│   ├── README.md
│   └── src/
├── 02-basic-webgl-cube-rendering/
│   ├── README.md
│   └── src/
├── 03-webgl-animation-toggle/
│   ├── README.md
│   └── src/
└── 04-interactive-webgl-renderer/
    ├── README.md
    ├── src/
    └── assets/

Some project folders may contain only the directories required by that specific implementation.

Reproducibility Notes

Running the Python Project

Project 01 can be executed directly with Python:

cd 01-prime-sequence-generator
python src/primes.py

If the system uses Python 3 explicitly:

python3 src/primes.py

Running the WebGL Projects

Projects 02–04 should be served through a local HTTP server instead of opening the HTML file directly. This avoids browser restrictions related to local file loading and provides a more consistent WebGL execution environment.

Example for Project 02:

cd 02-basic-webgl-cube-rendering
python3 -m http.server 8000

Then open the following address in a browser:

http://localhost:8000/src/index.html

Use the same workflow for Project 03 and Project 04 by running the HTTP server from the corresponding project folder.

Notes

• This repository focuses on source code, project structure, and concise technical documentation.
• Generated binaries, private packaging files, large raw logs, and report documents are intentionally excluded.
• WebGL behavior may vary slightly across browsers, GPU drivers, and operating systems.
• For best compatibility, use an updated Chromium-based browser or Firefox with WebGL enabled.
• Project assets are kept only when they are necessary for reproducing the graphics scene.