80 lines
2.3 KiB
JavaScript
Executable File
80 lines
2.3 KiB
JavaScript
Executable File
// script.js
|
|
var canvas = document.getElementById('hexmap');
|
|
var ctx = canvas.getContext('2d');
|
|
|
|
function resizeCanvas() {
|
|
var headerHeight = document.querySelector('header').clientHeight;
|
|
var headerWidth = document.querySelector('header').clientWidth;
|
|
canvas.width = headerWidth;
|
|
canvas.height = headerHeight;
|
|
}
|
|
|
|
window.addEventListener('resize', resizeCanvas);
|
|
resizeCanvas();
|
|
|
|
const hexagonAngle = Math.PI / 6; // 30 degrees in radians
|
|
const sideLength = 15;
|
|
const hexHeight = Math.sin(hexagonAngle) * sideLength;
|
|
const hexRadius = Math.cos(hexagonAngle) * sideLength;
|
|
const hexRectangleHeight = sideLength + 2 * hexHeight;
|
|
const hexRectangleWidth = 2 * hexRadius;
|
|
|
|
ctx.strokeStyle = "#CCCCCC";
|
|
ctx.lineWidth = 1;
|
|
|
|
let opacityValues = [];
|
|
|
|
function initializeOpacityValues() {
|
|
for (let i = 0; i < Math.ceil(canvas.height / (hexHeight * 1.5)); i++) {
|
|
let row = [];
|
|
for (let j = 0; j < Math.ceil((canvas.width - (i % 2) * hexRadius) / hexRectangleWidth); j++) {
|
|
row.push(Math.random());
|
|
}
|
|
opacityValues.push(row);
|
|
}
|
|
}
|
|
|
|
function drawHexagon(x, y, opacity) {
|
|
ctx.beginPath();
|
|
for (let i = 0; i < 6; i++) {
|
|
let angle = Math.PI / 3 * i;
|
|
ctx.lineTo(
|
|
x + hexRadius * Math.cos(angle),
|
|
y + hexRadius * Math.sin(angle)
|
|
);
|
|
}
|
|
ctx.closePath();
|
|
ctx.globalAlpha = opacity;
|
|
ctx.stroke();
|
|
ctx.globalAlpha = 1; // Reset global alpha after drawing
|
|
}
|
|
|
|
function drawBoard() {
|
|
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
|
for (let i = 0; i < opacityValues.length; i++) {
|
|
let offset = (i % 2) * hexRadius;
|
|
for (let j = 0; j < opacityValues[i].length; j++) {
|
|
drawHexagon(
|
|
j * hexRectangleWidth + offset,
|
|
i * (hexHeight * 1.5),
|
|
opacityValues[i][j]
|
|
);
|
|
}
|
|
}
|
|
}
|
|
|
|
function animate() {
|
|
for (let i = 0; i < opacityValues.length; i++) {
|
|
for (let j = 0; j < opacityValues[i].length; j++) {
|
|
opacityValues[i][j] += Math.random() * 0.1 - 0.05;
|
|
if (opacityValues[i][j] > 1) opacityValues[i][j] = 1;
|
|
if (opacityValues[i][j] < 0) opacityValues[i][j] = 0;
|
|
}
|
|
}
|
|
drawBoard();
|
|
requestAnimationFrame(animate);
|
|
}
|
|
|
|
initializeOpacityValues();
|
|
animate();
|