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 Mititiuc 2024-03-17 19:24:27 -07:00
parent 3a1a981506
commit ffd47d49c7
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 {
fill: red;
opacity: 0.33;
}
image {
transform: scale(3.41);
transform: scale(3.41) rotate(-0.15deg);
opacity: 0.33;
}
</style>
@ -42,7 +43,7 @@
var columnCount = 33,
rowCount = 25,
pointDistanceInInches = 1.05;
pointDistanceInInches = 1.044;
var isOdd = n => n % 2 === 1;
@ -50,24 +51,22 @@
rows = [...Array(rowCount).keys()],
columnCoords = columns.map(x => x * 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]) => {
var circle = document.createElementNS(svgns, 'circle'),
calcY = Math.sqrt(3) * pointDistanceInInches / 2 * 0.93;
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`);
}
cx = x + xOffset + (isOdd(index) ? alternatingOffset : 0),
cy = calcY * y + yOffset;
circle.setAttributeNS(null, 'cx', `${cx}in`);
circle.setAttributeNS(null, 'cy', `${cy}in`);
circle.setAttributeNS(null, 'r', '0.1in');
svg.appendChild(circle);
}));