greg/Spazer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Hex grid

Browse Source
This commit is contained in:
Greg Shuflin 2023-12-02 23:52:10 -08:00
parent caf53e4239
commit 0687acde19
3 changed files with 71 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
src/hexgrid/app.ts Normal file
View File

@ -0,0 +1,49 @@
const canvas = document.querySelector("#mainCanvas");
const ctx = canvas.getContext("2d");
console.log("hexgrid");
const screenWidth = canvas.width = window.innerWidth;
const screenHeight = canvas.height = window.innerHeight;
const angle = 2 * Math.PI / 6;
ctx.lineWidth = 3;
ctx.strokeStyle = "black";
// x and y are center point
const drawHexagon = (x: number, y: number, radius: number) => {
ctx.beginPath();
for (let i = 0; i < 6; i++) {
ctx.lineTo(x + radius * Math.cos(angle * i), y + radius*Math.sin(angle * i));
}
ctx.closePath();
ctx.fill();
ctx.stroke();
};
const drawGrid = (width: number, height: number, radius: number) => {
const cos = Math.cos(angle);
const sin = Math.sin(angle);
let total = 0;
for (let gridY = 0; gridY < height; gridY++) {
for (let gridX = 0; gridX < width; gridX++) {
const x = radius + gridX * radius * (1 + cos);
const y = radius + ((gridX % 2 === 0) ? 0 : radius*sin) + 2*radius*sin*gridY;
if (x >= screenWidth) {
break;
}
if (y >= screenHeight) {
break;
}
ctx.fillStyle = "#1c133f";
drawHexagon(x, y, radius);
total += 1;
}
}
console.log(total);
}
drawGrid(200, 20, 20);

21
src/hexgrid/index.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hexgrid</title>
<script type="module" src="app.ts"></script>
<style>
canvas {
display: block;
}
body {
background: black;
margin: 0px;
}
</style>
</head>
<body>
<canvas id="mainCanvas"></canvas>
</body>
</html>

1
src/index.html
View File

@ -15,6 +15,7 @@
<li> <a href="./orbital-trails/index.html">Orbital Trails (mine)</a> <li> <a href="./orbital-trails/index.html">Orbital Trails (mine)</a>
<li> <a href="./gravity-points/index.html">Gravity Points (mine)</a> <li> <a href="./gravity-points/index.html">Gravity Points (mine)</a>
<li> <a href="./starfield/index.html">Starfield</a> <li> <a href="./starfield/index.html">Starfield</a>
<li> <a href="./hexgrid/index.html">Hexgrid</a>
</ul> </ul>
<h2>Reference Animations</h2> <h2>Reference Animations</h2>