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

Add points

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-03-15 09:50:23 -07:00
parent 28833cf2bc
commit 50372d16a9
1 changed files with 42 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
index.html
View File

@ -4,6 +4,10 @@
svg { svg {
background-color: darkgray; background-color: darkgray;
} }
circle {
fill: red;
}
</style> </style>
</head> </head>
<body> <body>
@ -17,9 +21,46 @@
<pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" /> <pattern id="vert" href="#inch-mark" patternTransform="rotate(90)" />
</defs> </defs>
<rect x="0" y="0" width="34in" height="22in" fill="Gainsboro" />
<line x1="0" y1="0" x2="34in" y2="0" stroke="url(#inch-mark)" /> <line x1="0" y1="0" x2="34in" y2="0" stroke="url(#inch-mark)" />
<line x1="0" y1="0" x2="0" y2="22in" stroke="url(#vert)" /> <line x1="0" y1="0" x2="0" y2="22in" stroke="url(#vert)" />
<rect x="0" y="0" width="34in" height="22in" fill="Gainsboro" />
</svg> </svg>
<script>
var svgns = "http://www.w3.org/2000/svg",
svg = document.querySelector('svg');
var columnCount = 34,
rowCount = 25,
pointDistanceInInches = 1.015;
var isOdd = n => n % 2 === 1;
var columns = [...Array(columnCount).keys()],
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]));
var xOffset = yOffset = 0.25;
pointCoords.forEach((row, index) => row.forEach(([x, y]) => {
var circle = document.createElementNS(svgns, 'circle'),
calcY = Math.sqrt(3) * pointDistanceInInches / 2;
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, 'r', '0.1in');
svg.appendChild(circle);
}));
</script>
</body> </body>
</html> </html>