clp/hex-grid-wobble
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
Christian Lawson-Perfect 2025-02-09 20:07:40 +00:00
commit 66e30d2616
4 changed files with 148 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitignore vendored Normal file
View file

@ -0,0 +1 @@
.make.*

15
index.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>A thing made by CLP</title>
<script type="module" src="script.js"></script>
<link rel="stylesheet" href="style.css"></link>
</head>
<body>
<main>
<svg id="svg" viewBox="-10 -10 20 20"></svg>
</main>
</body>
</html>

81
script.js Normal file
View file

@ -0,0 +1,81 @@
function element(name, attr, content) {
const el = document.createElementNS('http://www.w3.org/2000/svg', name);
if(attr) {
Object.entries(attr).forEach(([key,value]) => el.setAttribute(key,value));
}
if(content !== undefined) {
el.innerHTML = content;
}
return el;
}
const {cos, sin, sqrt, PI} = Math;
const [x1,y1] = [2,0];
const [x2,y2] = [2*cos(PI/3), 2*sin(PI/3)];
function hex_to_screen([i,j]) {
return [x1*i + x2*j, y1*i + y2*j];
}
const svg = document.querySelector('svg');
const bg = element('g');
svg.append(bg);
for(let i=-8;i<8;i++) {
for(let j=-8;j<8;j++) {
const [cx,cy] = hex_to_screen([i,j]);
const bg_tri = element(
'path',
{
fill: 'lightblue',
d: `M ${cx} ${cy} L ${cx+x1} ${cy+y1} ${cx+x2} ${cy+y2}`
}
);
bg.append(bg_tri);
}
}
function make_cell(i,j) {
const [cx,cy] = hex_to_screen([i,j]);
const f = i + j;
const g = element('g', {
style: `
transform: translate(${cx}px, ${cy}px) rotate(var(--turn));
--f: ${f};
`
});
svg.append(g);
const circle = element('circle',{
r: 1,
});
g.append(circle);
const points = [];
for(let n=0;n<6;n++) {
const an = n*PI/3;
points.push([cos(an),sin(an)]);
}
const path = element('path', {
fill: 'green',
d: `M 0 0 ` + [0,1,2].map(n => `L ${points[2*n][0]} ${points[2*n][1]} A 1 1 0 0 1 ${points[2*n+1][0]} ${points[2*n+1][1]} L 0 0`).join(' ')
});
g.append(path);
}
make_cell(0,0);
for(let s=1;s<4;s++) {
make_cell(s,0);
for(let r=1;r<=s;r++) {
const [i,j] = [s,-r];
make_cell(s,-r);
make_cell(s-r,-s);
make_cell(-r,r-s);
make_cell(-s,r);
make_cell(r-s,s);
make_cell(r,s-r);
}
}

51
style.css Normal file
View file

@ -0,0 +1,51 @@
@property --turn {
initial-value: 0deg;
inherits: false;
syntax: '<angle>';
}
@property --offset {
initial-value: 0ms;
inherits: false;
syntax: '<time>';
}
svg {
max-height: 100svh;
}
g {
animation: turn var(--duration) var(--offset) infinite ease-in-out;
--offset: calc(var(--f) * 150ms);
--duration: 4000ms;
}
@keyframes turn {
15% {
--turn: 0deg;
}
25% {
--turn: 70deg;
}
30% {
--turn: 50deg;
}
35% {
--turn: 60deg;
}
65% {
--turn: 60deg;
}
75% {
--turn: -10deg;
}
80% {
--turn: 10deg;
}
85% {
--turn: 0deg;
}
100% {
--turn: 0deg;
}
}