How to make a wireframe grid?

[AllergicGorilla]

I'm making a simulation in SFML and would like to make a wireframe grid(like this:https://i.stack.imgur.com/1TKlE.png). After looking at lots of posts and answers on the SFML forums and stack overflow, I became quite frustrated at how difficult this seemingly trivial problem actually is.

Currently, I've got this(https://i.stack.imgur.com/h3x6C.png) for a grid, but my implementation just draws gridlines from opposite sides(left-right for each row, top-bottom for each column), which doesn't allow me to highlight a square(on mouse hover, for example).

If possible, the wireframe grid should:

• Have the ability to highlight individual squares(highlight borders and/or fill)
  
• Have 1 pixel thickness at all times
  
• Avoid redundancies(such as overlapping borders)
  

Preferrably, I would like a purely SFML-based approach(as I'm inexperienced with glsl).

Oh and if anyone is curious about my implementation:

grid.cpp:https://github.com/AllergicGorilla/Electric-Charges/blob/master/grid.cpp

grid.hpp:https://github.com/AllergicGorilla/Electric-Charges/blob/master/grid.hpp

Also, this post is a copy(with minor changes) of my stack overflow one: https://stackoverflow.com/questions/47742302/how-to-make-a-wireframe-grid-in-sfml(currently on hold)

[eXpl0it3r]

You could ask Elias (e.g. on Twitter or the forum) how he did his implementation.

Other than that, the simplest approach probably is to reuse the vertex data, but instead of drawing quads with a texture, you just draw colored Lines or LineStrip. Using a vertex array with Lines or LineStrip has the advantage of automatically giving you 1px thick lines regardless of zoom (afaik).

As for highlighting, you'll first have to do some math, to figure out where your mouse cursor is located (don't forget to map it from screen space to world space) and then you could just draw a semi-transparent colored sprite over the square you're selecting.

As for redundancy, it might be simpler to just not care about it, as long as it doesn't have visual issues.

In the end, it's really just a bunch of math and using the right tool for the job. My advice with such a thing is to sit down with pen and paper and make sure you got the problem down conceptually. Only when you know what the real problem is, you can start to apply solutions.

[Laurent]

Your code is simple and does the job, so what's wrong exactly? As already said, the highlighted square can just be an additional drawing on top of the grid, no need to over-complicate things.

Two tips to improve your implementation:
- you store all the vertex data in one big array, yet you reconstruct and draw all the lines one by one every time you draw the grid; why don't you build the final vertex array that contains all your lines upon construction, and then just draw it in your draw function?
- if you ever have visual artifacts, use half-pixel coordinates (add 0.5 to all X and Y) so that lines span over exactly their row/column instead of being in the middle of two adjacent rows/columns.