81 lines
No EOL
1.7 KiB
JavaScript
81 lines
No EOL
1.7 KiB
JavaScript
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);
|
|
}
|
|
} |