Skip to content

Instantly share code, notes, and snippets.

@paulg78

paulg78/index.html

Created April 21, 2017 08:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save paulg78/913cadcc74206afa83f94fa75f2c3cfd to your computer and use it in GitHub Desktop.
Save paulg78/913cadcc74206afa83f94fa75f2c3cfd to your computer and use it in GitHub Desktop.
Download ZIP
Triangle Coordinates
Raw
index.html
<html lang="en">
<head>
<!-- Meta -->
<meta charset="UTF-8" />
<title>My New Pen!</title>
<!-- Styles -->
</head>
<body>
<h2>Triangle Coordinates</h2>
<textarea id="triangleCoordinates" rows=72 cols=50></textarea>
<h2>Calculate Row/Col</h2>
<div id=div1></div>
</body>
</html>
Raw
script.js
function A(row, col) {
if (col % 2 == 0) {
return A(row, col - 1);
} else {
var x = 10 * Math.floor(col / 2);
var y = 10 * (row - 1);
return {
x: x,
y: y
};
}
}
function B(row, col) {
if (col % 2 == 0) {
return B(row, col - 1);
} else {
var x = 10 * (Math.floor(col / 2) + 1);
var y = 10 * row;
return {
x: x,
y: y
};
}
}
function C(row, col) {
var x = 10 * Math.floor(col / 2);
if (col % 2 != 0) {
{
var y = 10 * row;
}
} else {
var y = 10 * (row - 1);
}
return {
x: x,
y: y
};
}
function vStr(v) {
return "(" + v.x + ", " + v.y + ")";
}
var rowLetter = ["", "A", "B", "C", "D", "E", "F"];
function coordinateStr(nbrRows, nbrCols) {
var row,
col;
var str = "";
for (row = 1; row <= nbrRows; row++) {
for (col = 1; col <= nbrCols; col++) {
str += rowLetter[row] + col + ": " +
"A: " + vStr(A(row, col)) + ", " +
"B: " + vStr(B(row, col)) + ", " +
"C: " + vStr(C(row, col)) + "\n";
}
}
return str;
}
function triangleRowCol(A, B, C) {
var maxY = Math.max(A.y, B.y, C.y);
var row = rowLetter[maxY / 10];
var matchingXvalue,
otherXvalue;
if (A.x == B.x) {
matchingXvalue = A.x;
otherXvalue = C.x;
} else if (A.x == C.x) {
matchingXvalue = A.x;
otherXvalue = B.x;
} else {
matchingXvalue = B.x;
otherXvalue = A.x;
}
var col = matchingXvalue * 2 / 10;
if (otherXvalue > matchingXvalue) {
col += 1;
}
return vStr(A) + ", " + vStr(B) + ", " + vStr(C) + "==>" + row + col;
}
function addTestResults(result) {
var para = document.createElement("p");
var node = document.createTextNode(result);
para.appendChild(node);
var element = document.getElementById("div1");
element.appendChild(para);
}
// update triangle coordinates
document.getElementById("triangleCoordinates").innerHTML = coordinateStr(6, 12);
// add Row/col test cases
addTestResults(triangleRowCol({x:0,y:10}, {x:10,y:20},{x:10,y:10}));
addTestResults(triangleRowCol({x:10,y:10}, {x:0,y:10}, {x:10,y:20}));
addTestResults(triangleRowCol({x:10,y:10}, {x:20,y:20}, {x:10,y:20}));
addTestResults(triangleRowCol({x:50,y:40}, {x:40,y:40}, {x:40,y:30}));
addTestResults(triangleRowCol({x:50,y:50}, {x:60,y:50}, {x:60,y:60}));
addTestResults(triangleRowCol({x:10,y:10}, {x:0,y:10}, {x:0,y:0}));
@paulg78
Copy link
Author

paulg78 commented Apr 21, 2017

Task 1: calculate triangle coordinates

  1. Define an x/y coordinate system where the top left corner is 0,0 with increasing values going right and down.

  2. Map row letters to numbers (rows A-F map to 1-6).

  3. Notice each pair of triangles in a 10 pixel square shares 2 vertices (call them A and B). The coordinates for the odd column of each square are a function of row and column:

    A: 10(col div 2), 10(row-1)

    B: 10(col div 2 + 1), 10(row)

  4. The A and B coordinates for the even column are the same as those of the odd column in the same square, e.g. A(1,2) = A(1,1).

  5. The vertices at the right angles (call them C) differ for the odd and even triangles in a square:

    C (odd): 10(col div 2) ,10(row)

    C (even): 10(col div 2), 10(row-1)

Task 2: given vertex coordinates, calculate row and column

  1. Row can be determined from the highest y value in a set of vertices:

     Row = *highest y value* / 10

  2. Notice each triangle has 2 vertices with equal x values. The other vertex has a lower or higher x value. These values can be used to determine the column:

     Col = *matching x value* * 2 / 10 + 1 (*if the other x value is higher*)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment