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://codeforces.me/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!