Is there an easier way to sector an image?

Question

I have an HTML file with a script that is given a map that has sectors on it. Like A1, B2, but there are sub-sectors, 1-9 in each sector. For example, A1-5, B2-9, etc. As of right now, I have a bunch of IF statements for each sub-sector. Here's an example

 if (x > 2093-161/3 && x < 2093 && y < 1932-161*2/3 && y > 1771) { var isnumber = "9"; } if (x > 2093-161*2/3 && x < 2093-161/3 && y < 1932-161*2/3 && y > 1771) { var isnumber = "8"; } if (x > 1932 && x < 2093-161*2/3 && y < 1932-161*2/3 && y > 1771) { var isnumber = "7"; } if (x > 2093-161/3 && x < 2093 && y < 1932-161*1/3 && y > 1932-161*2/3) { var isnumber = "6"; } if (x > 2093-161*2/3 && x < 2093-161/3 && y < 1932-161*1/3 && y > 1932-161*2/3) { var isnumber = "5"; } if (x > 1932 && x < 2093-161*2/3 && y < 1932-161*1/3 && y > 1932-161*2/3) { var isnumber = "4"; } if (x > 2093-161/3 && x < 2093 && y < 161*12 && y > 1932-161*1/3) { var isnumber = "3"; } if (x > 2093-161*2/3 && x < 2093-161/3 && y < 161*12 && y > 1932-161*1/3) { var isnumber = "2"; } if (x > 1932 && x < 2093-161*2/3 && y < 161*12 && y > 1932-161*1/3) { var isnumber = "1"; }

Is there an easier way to do this?

Answer 1

Basic idea with Math using division and mod to get the remaining.

 var width = 2160; var sectorW = 161; function getSector (x) { var sectorX = Math.floor(x / sectorW); var sub = x - (sectorW * sectorX % x); var subSectorX = Math.floor(sub / (sectorW / 3)) return { sectorX: sectorX, subSectorX: subSectorX } } console.log( 100, getSector(100)) console.log( 180, getSector(180))

expanding on it. I am not sure what you real number system looks like... but just playing with it. Below is the basic idea

So a number with 10,10 like A1 a1

+-----------+-----------+-----------+
|A1         |B1         |C1         |
|  a1 b1 c1 |  a1 b1 c1 |  a1 b1 c1 |
|  a2 b2 c2 |  a2 b2 c2 |  a2 b2 c2 |
|  a3 b3 c3 |  a3 b3 c3 |  a3 b3 c3 |
+-----------+-----------+-----------+
|A2         |B2         |C2         |
|  a1 b1 c1 |  a1 b1 c1 |  a1 b1 c1 |
|  a2 b2 c2 |  a2 b2 c2 |  a2 b2 c2 |
|  a3 b3 c3 |  a3 b3 c3 |  a3 b3 c3 |
+-----------+-----------+-----------+
|A3         |B3         |C3         |
|  a1 b1 c1 |  a1 b1 c1 |  a1 b1 c1 |
|  a2 b2 c2 |  a2 b2 c2 |  a2 b2 c2 |
|  a3 b3 c3 |  a3 b3 c3 |  a3 b3 c3 |
+-----------+-----------+-----------+

---

 var width = 2160; var sectorW = 161; function calcalateZone (x) { var sectorX = Math.floor(x / sectorW); var sub = x - (sectorW * sectorX % x); var subSectorX = Math.floor(sub / (sectorW / 3)) return { sector: sectorX, subSector: subSectorX } } function getLetterCode (v, upper) { // use base 36 to get letter code var letterCase = upper ? "toUpperCase" : "toLowerCase"; return (v + 10).toString(36)[letterCase](); } function getSector(x, y){ const coorX = calcalateZone(x); const coorY = calcalateZone(y); return { sector: getLetterCode(coorX.sector, true) + (coorY.sector+1), subSector: getLetterCode(coorX.subSector, false) + (coorY.subSector+1) } } console.log( 100, 100, getSector(100, 100)) console.log( 180, 100, getSector(180, 100)) console.log( 100, 180, getSector(100, 180)) console.log( 180, 180, getSector(180, 180))

Answer 2

First we need to get the x and y coordinates relative to each sector, meaning that we need to convert the coordinates to relative ones that are between 0 and 161 . Like so:

var xRelativeToSector = x % 161;
var yRelativeToSector = y % 161;

Then we need to convert those relative coordinates into column and row indexes, we have 3 possible columns and 3 possible rows, so:

var column = Math.floor(3 * xRelativeToSector / 161);
var row = Math.floor(3 * yRelativeToSector / 161);

Finally, we use column and row to calculate the number using this formula row * numberOfColumns + column . Note that the rows in our case are ordered bottom-to-top, so we use (2 - row) instead of row . We also need to add 1 to the result because the formula gives us a 0-based index and we want a 1-based index. Like so:

var isnumber = 3 * (2 - row) + column + 1;

So you can simply group this code in a function and use it to get the subsector number:

function getSubSectorNumber(x, y) {
    var xRelativeToSector = x % 161;
    var yRelativeToSector = y % 161;

    var column = Math.floor(3 * xRelativeToSector / 161);
    var row = Math.floor(3 * yRelativeToSector / 161);

    return 3 * (2 - row) + column + 1;
}