Computer Graphics Algorithms Simulator

A modern React web application for visualizing and understanding classic computer graphics algorithms with interactive step-through animation and algorithm decision parameters.

🚀 Live Demo

View the live application here

Features

• DDA Line Drawing: Digital Differential Analyzer algorithm with decision parameter visualization
• Bresenham Line Drawing: Efficient integer-only line rasterization with error term tracking
• Midpoint Circle Drawing: Efficient circle rasterization algorithm with decision parameter tracking

Interactive Visualization

• Coordinate System: Mathematical coordinate system with proper X/Y axes and labels
• Zoom & Pan:
  • Mouse wheel to zoom (0.5x - 3x range, default 1.5x)
  • Click and drag to pan the canvas
  • Reset view button to return to default centered view
• Animation Controls:
  • Play/Pause animation
  • Previous/Next buttons for step-through execution
  • Real-time step counter and position display
• Decision Parameter Display: For each step, view the calculated decision parameter and the algorithm's decision

Educational Features

• Overlay of ideal mathematical shape (50% opacity) vs. rasterized approximation
• Coordinate labels on each plotted point
• Negative coordinate support (-20 to +20 range)
• Detailed info box showing:
  • Total points generated
  • Current step number
  • Current pixel position (x, y)
  • Decision parameter value
  • Decision made at this step

Technology Stack

• Frontend: React 18, CSS3
• Styling: Custom CSS with Green, Black, and White theme

Project Structure

graphics-simulator/
├── client/                 # React frontend
│   ├── public/
│   ├── src/
│   │   ├── components/     # React components
│   │   ├── services/       # Algorithm implementations
│   │   ├── styles/         # CSS stylesheets
│   │   ├── App.js
│   │   └── index.js
│   └── package.json
└── package.json

Installation

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Setup

1. Install dependencies:

npm install
cd client && npm install

Running the Application

Development Mode

Start the frontend:

npm start

Opens at http://localhost:3000

Production Build

npm run build

How to Use

1. Open the application at http://localhost:3000
2. Select an algorithm from the available cards (DDA, Bresenham, or Midpoint Circle)
3. Adjust input parameters:
   • Line algorithms: Start point (x0, y0) and end point (x1, y1)
   • Circle algorithm: Center point (centerX, centerY) and radius
   • Range: -20 to +20 for coordinates, 1 to 150 for radius
4. Click "Execute Algorithm" to run the algorithm and generate rasterized points
5. Use the visualization controls:
   • Mouse wheel: Zoom in/out
   • Click and drag: Pan the canvas
   • Reset View button: Return to centered default view
6. Use animation controls to step through:
   • Play: Auto-animate through all points
   • Pause: Stop the animation
   • Previous: Go to previous point
   • Next: Go to next point
7. Monitor the info box to see:
   • Current step and total points
   • Pixel coordinates
   • Decision parameter and decision logic for each step

Understanding Decision Parameters

Each algorithm displays its decision-making process:

• DDA: Shows the fractional part of coordinates and rounding decision
• Bresenham: Displays the error term and movement decision (Move X, Move Y, or Move X and Y)
• Midpoint Circle: Shows the decision parameter and whether to decrease X or increase Y

Color Scheme

• Primary Green: #10b981
• Dark Green: #059669
• Black: #1f2937
• White: #ffffff
• Light Gray: #f3f4f6

License

MIT License