Hello Codeforces!
Like many of you, I struggle to visualize grid/coordinate geometry problems when I don't have a pen and paper handy. Debugging DFS/BFS paths or complex geometry on a blank screen is painful.
I couldn't find a simple, lightweight tool that did exactly what I wanted, so I built CP Grid Visualizer.
It's a single-file, browser-based tool to instantly plot points and lines on an infinite grid.
Link: https://himalaya-pahar.github.io/cp-grid-visualization/
github repo: https://github.com/himalaya-pahar/cp-grid-visualization
Features:
Infinite Grid: Handles negative coordinates and large ranges easily.
Fast I/O: Left-click to add points. Click any two points to draw a line.
Interactive: Click points to connect them with lines.
Precision Control: Switch between Snap-to-Grid (Integers) and Decimal Mode (Floats) instantly.
Safe Mode: Toggle "Allow Adding Points" OFF to lock the board and prevent accidental clicks.
Fast Edit: Right-Click any point to delete it instantly.
Live Distances: Hover over any line to see Manhattan & Euclidean lengths instantly.
Export: One-click "Download Image" to save your visualization (great for editorials or asking for help).
Dark Mode: Because we are programmers.
How to use:
Add Point: Left-click empty space (or type coordinates in the sidebar).
Connect: Click Point A, then Click Point B to draw a line.
Delete: Right-Click any point to remove it instantly.
Navigate: Drag to pan, Scroll to zoom.
Settings: Use the sidebar to Lock the board or switch to Decimal mode.
UI of CP Grid Visualizer
Visualizing the third sample case for 2193F — Pizza Delivery. Calculated the optimal path visually in seconds
Problem link: https://mirror.codeforces.com/contest/2193/problem/F
I kept it very simple (just HTML/JS) so it's fast and works offline if you save the file.
Let me know if you find any bugs or have feature requests!
