commit 66e30d26161667b11a89771044567e49697afba0 Author: Christian Lawson-Perfect Date: Sun Feb 9 20:07:40 2025 +0000 first commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..8bc0f76 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.make.* \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..c9fe5b3 --- /dev/null +++ b/index.html @@ -0,0 +1,15 @@ + + + + + + A thing made by CLP + + + + +
+ +
+ + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..2727989 --- /dev/null +++ b/script.js @@ -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); + } +} \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..f43ce12 --- /dev/null +++ b/style.css @@ -0,0 +1,51 @@ +@property --turn { + initial-value: 0deg; + inherits: false; + syntax: ''; +} + +@property --offset { + initial-value: 0ms; + inherits: false; + syntax: '