I built a simple Grid Visualizer because I hate wasting paper

#	User	Rating
1	Benq	3857
2	jiangly	3810
3	maroonrk	3534
4	tourist	3528
5	Kevin114514	3510
6	turmax	3411
7	Um_nik	3387
8	Radewoosh	3367
9	heuristica	3322
10	strapple	3317

#	User	Contrib.
1	Qingyu	158
2	maspy	150
3	Um_nik	146
4	Errichto	139
5	adamant	136
6	maroonrk	134
7	DNR	133
8	Dominater069	131
9	Proof_by_QED	130
9	AmShZ	130

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

My Visualizer UI

Visualizing the third sample case for 2193F — Pizza Delivery. Calculated the optimal path visually in seconds

My Visualizer UI

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!

Comments (37)

Write comment?

deyna256

7 months ago, hide # |

Great job! Do u want to make a service from your MVP?

→ Reply

Himalaya_

7 months ago, hide # ^ |

Thanks! Honestly, I just built this to fix my own struggle with geometry problems. I haven't thought that far ahead. Just happy if it helps others!

vineetiwari

honestly good stuff!!!

Thanks!

rex333

Things nobody asked for but everybody needs

Very good job

Undetermined21

This is pretty useful!

one thing -- an ability/toggle to be able to click to add or drag points would be amazing

Thanks! Already working on it.

potatoArmy

← Rev. 2 →

cool! i have a suggestion: maybe clicking on two points could show their manhattan and euclidean distance.

Great! I will add these.

Auto comment: topic has been updated by Himalaya_ (previous revision, new revision, compare).

tourist1331

nice but can u make this more easy like instead of enterin one by one enterin an hole case like

1 1

2 2

3 3

You're right, that could save time. However, test case structures vary from problem to problem, which is why I stuck to adding points one by one.

khanhdang2109

Honestly amazing work! You could even add a graph mode, which shows all the nodes and the distances between them to visualize graphs. Like this one

Thanks for your feedback. I will think about it.

blobox

Finally someone did it

sEa1nn013uR1o

Thanks! Good tool

k1r1t0

orz

employed

very helpful good job, also could you add ctrl + z to remove recently added points ?

Thanks for the suggestion. You can do it now.

good work, i also suggest that instead of left clicking a line to delete it, its right click

because if you wanted to add a new point on top of a line as of right now you are forced to left click the line therefore removing it

Updated. Thanks for your suggestion.

Aritro_

this is exactly what I need to prepare for MO

Senku

Very helpful. Awesome job!

Also, can u add the feature to add a list of points (and lines also maybe)

Lever

Nice. When already clicking on a vertex, and you drag out a new line, if you click it removes it, could you add an option to automatically place a new point and connect the current line to the new point instead?