ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Best points align

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2025-06-16 22:41:27 -07:00
parent 05f54cc44f
commit 046db60034
1 changed files with 14 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
index.html
View File

@ -11,10 +11,11 @@
circle { circle {
fill: red; fill: red;
opacity: 0.33;
} }
image { image {
transform: scale(3.41); transform: scale(3.41) rotate(-0.15deg);
opacity: 0.33; opacity: 0.33;
} }
</style> </style>
@ -42,7 +43,7 @@
var columnCount = 33, var columnCount = 33,
rowCount = 25, rowCount = 25,
pointDistanceInInches = 1.05; pointDistanceInInches = 1.044;
var isOdd = n => n % 2 === 1; var isOdd = n => n % 2 === 1;
@ -50,24 +51,22 @@
rows = [...Array(rowCount).keys()], rows = [...Array(rowCount).keys()],
columnCoords = columns.map(x => x * pointDistanceInInches), columnCoords = columns.map(x => x * pointDistanceInInches),
rowCoords = rows.map(y => y * pointDistanceInInches), rowCoords = rows.map(y => y * pointDistanceInInches),
pointCoords = rowCoords.map((y, index) => isOdd(index) ? columnCoords.slice(0, -1).map(x => [x, y]) : columnCoords.map(x => [x, y])); pointCoords = rowCoords.map((y, index) =>
(isOdd(index) ? columnCoords.slice(0, -1) : columnCoords).map(x => [x, y])
);
var xOffset = yOffset = 0.25; var xOffset = 0.4,
yOffset = 0.2;
calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.945,
alternatingOffset = pointDistanceInInches / 2;
pointCoords.forEach((row, index) => row.forEach(([x, y]) => { pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
var circle = document.createElementNS(svgns, 'circle'), var circle = document.createElementNS(svgns, 'circle'),
calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.93; cx = x + xOffset + (isOdd(index) ? alternatingOffset : 0),
cy = calcY * y + yOffset;
if (isOdd(index)) {
var alternatingOffset = pointDistanceInInches / 2;
circle.setAttributeNS(null, 'cx', `${x + xOffset + alternatingOffset}in`);
circle.setAttributeNS(null, 'cy', `${calcY * y + yOffset}in`);
} else {
circle.setAttributeNS(null, 'cx', `${x + xOffset}in`);
circle.setAttributeNS(null, 'cy', `${calcY * y + yOffset}in`);
}
circle.setAttributeNS(null, 'cx', `${cx}in`);
circle.setAttributeNS(null, 'cy', `${cy}in`);
circle.setAttributeNS(null, 'r', '0.1in'); circle.setAttributeNS(null, 'r', '0.1in');
svg.appendChild(circle); svg.appendChild(circle);
})); }));