A web-based tool to visualize step-by-step execution of computer graphics algorithms on an interactive grid canvas. Built for the 5th-semester Computer Graphics course at IOE, Pulchowk Campus using HTML, CSS, and JavaScript.
-
Interactive Grid Canvas: Click to set points for algorithm visualization.
-
Algorithm Selection: Choose DDA, Bresenham’s Line, Midpoint Circle, or Midpoint Ellipse.
-
Playback Controls: Play, pause, step forward/backward, or reset animation.
-
Speed Adjustment: Adjust animation speed (50ms increments, min 50ms).
-
Grid Customization: Adjust cell size (1px increments, min 1px).
-
Coordinate Tooltip: Hover to view cell coordinates.
-
Algorithm Info: Displays description and pseudocode for selected algorithm.
-
Supported Algorithms:
-
DDA Line
-
Bresenham’s Line
-
Midpoint Circle
-
Midpoint Ellipse
-
- Modern web browser (e.g., Chrome, Firefox, Edge)
git clone https://github.com/rohityadav-sas/Graphics.git
cd GraphicsOpen index.html in a browser or use a local server:
# Example with Python
python -m http.server 8000-
Select Algorithm: Choose from dropdown (DDA, Bresenham, Circle, Ellipse).
-
Set Points:
-
Lines: Click two points for start/end.
-
Circle: Click center, then radius point.
-
Ellipse: Click center, then point for rx/ry.
-
-
Visualize: Algorithm plots pixels step-by-step.
-
Control Animation: Play, pause, step, or reset; adjust speed/cell size.
-
View Info: Algorithm description and pseudocode displayed.
-
Tooltip: Hover over grid for coordinates.
- None (Pure HTML, CSS, JavaScript)
This project is licensed under the MIT License. See the LICENSE file for details.
Contributions are welcome! Please feel free to submit a Pull Request.