🎨 Graphics Visualizer

An interactive computer graphics algorithm visualization platform for students and educators.

Visualize DDA, Bresenham, circle drawing, polygon filling, and line/polygon clipping — pixel by pixel on a 60×60 interactive grid.

Features • Algorithms • Tech Stack • Structure • Setup • Usage

---

✨ Features

🖼️ Interactive 60×60 Pixel Grid Canvas

• Precise pixel-level rendering with coordinate tooltips
• Zoom, pan, and color-coded visual legends
• Real-time canvas updates as algorithms execute

⏯️ Step-by-Step Playback

• Play / Pause / Step controls for algorithm animation
• Adjustable speed slider for playback rate
• Decision-point highlighting at each algorithmic step

🧑‍💻 Monaco Code Editor

• Full-featured code editor powered by Monaco (same engine as VS Code)
• Write custom rendering code using the fillPixel(x, y, color) API
• Syntax highlighting, auto-completion, and dark theme

👥 Role-Based Access

Role	Capabilities
Student	Access shared lessons, step through visualizations, run code in Monaco Editor
Educator	Create algorithm presets or code lessons, preview output, share via link, track views

🔗 Lesson Sharing System

• Educators create lessons (algorithm presets or custom code)
• Each lesson generates a unique shareable link (/lesson/:uuid)
• Students open the link and see the algorithm or code visualized instantly
• View count tracking for each lesson

🔐 Authentication & Security

• JWT-based authentication with secure password hashing (bcrypt)
• Protected routes with role-based access control
• Persistent login via localStorage

---

📐 Supported Algorithms

Category	Algorithm	Description
🟣 Line Drawing	DDA Line Algorithm	Digital Differential Analyzer for line rasterization
	Bresenham's Line Algorithm	Integer-only efficient line drawing
🔵 Circle	Midpoint Circle Algorithm	Efficient circle rasterization using midpoint decisions
🟡 Polygon Fill	Scanline Fill	Edge-table-based polygon fill using horizontal scanlines
	Flood Fill (BFS)	Breadth-first region fill from a seed point
	Boundary Fill	Recursive boundary-constrained fill algorithm
🟢 Clipping	Cohen-Sutherland	Region-code-based line clipping
	Liang-Barsky	Parametric line clipping algorithm
	Sutherland-Hodgman	Polygon clipping against a rectangular window

---

🛠️ Tech Stack

Frontend

Technology	Purpose
React 19	UI component framework
Vite 7	Fast dev server & build tool
React Router 7	Client-side routing
Axios	HTTP client for API calls
Monaco Editor	In-browser code editor
Zustand	Lightweight state management
Tailwind CSS 4	Utility-first CSS framework

Backend

Technology	Purpose
Express 5	HTTP server framework
MySQL 2	Relational database driver
JSON Web Tokens	Stateless authentication
bcryptjs	Password hashing
UUID	Unique lesson identifiers
dotenv	Environment configuration
Nodemon	Dev auto-restart

---

📁 Project Structure

Graphics Visualizer/
├── Client/                          # React frontend (Vite)
│   ├── src/
│   │   ├── algorithms/              # 9 CG algorithm implementations
│   │   │   ├── dda.js               #   DDA Line
│   │   │   ├── bresenham.js          #   Bresenham Line
│   │   │   ├── midpointCircle.js     #   Midpoint Circle
│   │   │   ├── scanlineFill.js       #   Scanline Polygon Fill
│   │   │   ├── floodFill.js          #   Flood Fill (BFS)
│   │   │   ├── boundaryFill.js       #   Boundary Fill
│   │   │   ├── cohenSutherland.js    #   Cohen-Sutherland Clipping
│   │   │   ├── liangBarsky.js        #   Liang-Barsky Clipping
│   │   │   └── sutherlandHodgman.js  #   Sutherland-Hodgman Clipping
│   │   ├── api/                      # API client layer
│   │   │   ├── axiosClient.js        #   Configured Axios instance
│   │   │   ├── authApi.js            #   Auth endpoints (signup/login)
│   │   │   └── lessonApi.js          #   Lesson CRUD endpoints
│   │   ├── components/               # Reusable UI components
│   │   │   ├── CanvasGrid.jsx        #   60×60 pixel grid canvas
│   │   │   ├── CodeEditor.jsx        #   Monaco code editor wrapper
│   │   │   ├── ControlPanel.jsx      #   Algorithm controls & playback
│   │   │   ├── ProtectedRoute.jsx    #   Role-based route guard
│   │   │   └── nav/                  #   Navigation bars
│   │   ├── pages/                    # Page-level components
│   │   │   ├── LandingPage.jsx       #   Public landing page
│   │   │   ├── LoginPage.jsx         #   Login form
│   │   │   ├── SignupPage.jsx        #   Signup form with role select
│   │   │   ├── Home.jsx              #   Student visualizer page
│   │   │   └── Dashboard.jsx         #   Educator lesson dashboard
│   │   ├── App.jsx                   # Router configuration
│   │   ├── main.jsx                  # App entry point
│   │   └── index.css                 # Global styles & design tokens
│   └── package.json
│
├── Server/                          # Express backend
│   ├── src/
│   │   ├── config/
│   │   │   └── db.js                 # MySQL connection pool
│   │   ├── controllers/
│   │   │   ├── auth.controller.js    # Signup & login logic
│   │   │   └── lesson.controller.js  # Lesson CRUD logic
│   │   └── routes/
│   │       ├── auth.routes.js        # /api/auth/* routes
│   │       └── lesson.routes.js      # /api/lessons/* routes
│   ├── server.js                     # Express app entry point
│   ├── .env                          # Environment variables
│   └── package.json
│
└── .gitignore

---

🚀 Getting Started

Prerequisites

• Node.js ≥ 18
• MySQL ≥ 8.0
• npm or yarn

1. Clone the Repository

git clone https://github.com/AshisChetia/Graphics_visualizer.git
cd Graphics_visualizer

2. Set Up the Database

Open MySQL and create the database and tables:

CREATE DATABASE IF NOT EXISTS graphics_visualizer;
USE graphics_visualizer;

-- Users table
CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(255) NOT NULL,
    email VARCHAR(255) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL,
    role ENUM('student', 'educator') DEFAULT 'student',
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

-- Lessons table
CREATE TABLE lessons (
    id VARCHAR(36) PRIMARY KEY,
    type VARCHAR(50) NOT NULL DEFAULT 'algorithm',
    algorithm VARCHAR(100),
    params JSON,
    code TEXT,
    title VARCHAR(255),
    created_by VARCHAR(255),
    view_count INT DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

3. Configure Environment Variables

Create a .env file inside the Server/ directory:

PORT=5000
JWT_SECRET=your_jwt_secret_key_here

# Database
DB_HOST=localhost
DB_USER=root
DB_PASSWORD=your_mysql_password
DB_NAME=graphics_visualizer

4. Install Dependencies

# Install server dependencies
cd Server
npm install

# Install client dependencies
cd ../Client
npm install

5. Run the Application

Open two terminals:

# Terminal 1 — Start the backend
cd Server
npm run dev

# Terminal 2 — Start the frontend
cd Client
npm run dev

The app will be running at:

• Frontend: http://localhost:5173
• Backend API: http://localhost:5000

---

💡 Usage

As a Student

1. Sign up with the "Student" role
2. Navigate to the Visualizer page
3. Select an algorithm, configure parameters, and click Generate
4. Use Play, Pause, Step, and Reset controls to animate
5. Switch to the Code Editor tab to write custom pixel code
6. Open shared lesson links from your educator to explore pre-made demos

As an Educator

1. Sign up with the "Educator" role
2. Navigate to the Dashboard
3. Create a new lesson:
   • Choose Algorithm Preset → select algorithm + parameters
   • Or choose Code Lesson → write custom fillPixel() code
4. Click Preview to see the output before sharing
5. Click Create & Get Shareable Link
6. Copy the generated link and share it with students

---

🔌 API Endpoints

Authentication

Method	Endpoint	Description
POST	/api/auth/signup	Register a new user
POST	/api/auth/login	Authenticate and get JWT token

Lessons

Method	Endpoint	Description
GET	/api/lessons	Get all lessons
POST	/api/lessons	Create a new lesson
GET	/api/lessons/:uuid	Get a specific lesson by UUID
DELETE	/api/lessons/:uuid	Delete a lesson

Health Check

Method	Endpoint	Description
GET	/api/health	Check database connectivity

---

📜 License

This project is licensed under the ISC License.

---

Made with ❤️ by Ashis Chetia