As I've mentioned, I'm using a 641x641 pixel canvas with 23 columns of 21 hexagons each, surrounded by a blank border. That's a total of 483 hexagons.
What if we could ABSOLUTELY GUARANTEE that whenever we clicked on a given hex, we would click directly on it's center pixel, i.e. the pixel whose x-y coordinates place that pixel directly in the center of the hexagon in question.
Then our solution would be trivial. The hexagon location numbers are in the format "XXYY" where XX runs from 00 to 22 and YY runs from 00 to 20. In an ideal mathematical world, where all of the hexagons would be identical, our pseudocode solution would be something like:
XX = floor(x / c1) + c3; // For odd-numbered columns
XX = floor(x / c1) + c4; // For even-numbered columns
YY = floor(y / c2) + c5; // For odd-numbered rows
YY = floor(y / c2) + c6; // For even-numbered rows
where: x, y = mouse-click coordinates (directly on the center pixel)
c1 to c6 = constants
And, even in my real world of raster graphics, where half the hexagons are each one pixel wider than the other half (line thicknesses again), a simple and quick switch statement (i.e. table-lookup) would do the job.
So, all we have to do is ABSOLUTELY GUARANTEE that we always click on the hexagon's center pixel, and we're home free...
Unfortunately, it's impossible to make such a guarantee...
Or is it ???
What do we know about the x,y coordinates of that center pixel?
Well, one thing we know is that they're integers which are no smaller than 0 and no larger than 641. That's between 0 and 281 (inclusive) in hexadecimal notation.
For example, in our upper-leftmost hexagon 0000 on my 641x641 pixel canvas, the center pixel's coordinates are x,y = 39,36 in decimal, or x,y = 27,24 in hexadecimal.
Now, suppose we introduce leading zeroes where needed to ensure that all hexadecimal coordinates are exactly three hexadecimal digits long, e.g. x,y = 027,024 for hex number 0000.
[On the other hand, for a hex like hex number 1814, with center pixel coordinates x,y = 498,442 decimal; x,y = 1F2,1BA hexadecimal; no leading zeroes are required.]
Now, suppose we were to convert these hexadecimal coordinates to strings, concatenate them, and add a leading "#" sign. The results would be "#027024" for hex number 0000, and "#1F21BA" for hex number 1814.
These look just like hexadecimal RGB color codes.
For example, for hex number 0000, "#027024" would be equivalent to RGB = (0x02, 0x70, 0x24) = (2, 112, 36); and for hex number 1814, the code "#1F21BA" would be equivalent to RGB = (0x1F, 0x21, 0xBA) = (31, 33, 186).
So, if we now go to our hexmap and color each and every pixel within each respective hex (including it's member Upper-Left Corner Pixels and Edge Lines) with that hex's center pixel's Equivalent RGB color, we have our solution:
Clicking anywhere in a given hex (including directly on an Upper-Left Corner Pixel or Edge Line) will return a pixel color which can easily be converted to the x,y coordinates of that pixel's center pixel.
For example, for hex number 0000, clicking anywhere in that hex returns color code "#027024". We split out "027" and "024", convert them to integers, and we have our center-pixel coordinates; x,y = (39,36) in decimal.
And, for hex number 1814, clicking anywhere in that hex returns color code "#1F21BA". We split out "1F2" and "1BA", convert them to integers, and we have our center-pixel coordinates; x,y = (498,442) in decimal.
And, again, from these center-pixel coordinates, computing the hex number is trivial.
Q.E.D.
Continue on to the Next page to see how this looks in practice.
M.D.J. 2022/08/27