A Pen by Paul Gilbert on CodePen.
Created
April 21, 2017 08:11
-
-
Save paulg78/913cadcc74206afa83f94fa75f2c3cfd to your computer and use it in GitHub Desktop.
Triangle Coordinates
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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})); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Task 1: calculate triangle coordinates
Define an x/y coordinate system where the top left corner is 0,0 with increasing values going right and down.
Map row letters to numbers (rows A-F map to 1-6).
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)
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).
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
Row can be determined from the highest y value in a set of vertices:
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: