near/arnes.space
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Simplify arc fn in header

Browse source
This commit is contained in:
arne 2024-01-31 19:01:12 +01:00
commit e470b9d615
1 changed files with 3 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/_includes/filters/header.js
View file

@ -29,12 +29,12 @@ const polarToCartesian = (cx, cy, radius, alpha) =>
* @param alpha number * @param alpha number
* @return hiccup * @return hiccup
*/ */
const arc = (cx, cy, radius, start, end) => { const arc = (_, { shape: { cx, cy, radius, start, end }, ...props }) => {
const isLargeArc = end - start <= Math.PI const isLargeArc = end - start <= Math.PI
const [ x1, y1 ] = polarToCartesian(cx, cy, radius, end) const [ x1, y1 ] = polarToCartesian(cx, cy, radius, end)
const [ x2, y2 ] = polarToCartesian(cx, cy, radius, start) const [ x2, y2 ] = polarToCartesian(cx, cy, radius, start)
const f = n => n.toFixed(2) const f = n => n.toFixed(2)
return ["path", {"d": `M ${f(x1)} ${f(y1)} A ${radius} ${radius} 0 ${isLargeArc ? '0' : '1'} 0 ${f(x2)} ${f(y2)}`}] return ["path", {"d": `M ${f(x1)} ${f(y1)} A ${radius} ${radius} 0 ${isLargeArc ? '0' : '1'} 0 ${f(x2)} ${f(y2)}`, ...props}]
} }
const numTiles = 10 const numTiles = 10
@ -57,9 +57,6 @@ const tenPrint = content => {
const ys = range(numTiles + 1).map(y => width * (y / numTiles)) const ys = range(numTiles + 1).map(y => width * (y / numTiles))
const startAngle = random() < 0.5 ? quarterTau : 0 const startAngle = random() < 0.5 ? quarterTau : 0
const template = arc(0, 0, radius, startAngle, startAngle + 3 * quarterTau)
template[1] = {...template[1], id: 'arc-a' }
return ["svg.ten-print", return ["svg.ten-print",
{"viewBox": `${-radius} ${-radius} ${width + 2*radius} ${height + 2*radius}`, {"viewBox": `${-radius} ${-radius} ${width + 2*radius} ${height + 2*radius}`,
"xmlns": "http://www.w3.org/2000/svg", "xmlns": "http://www.w3.org/2000/svg",
@ -67,7 +64,7 @@ const tenPrint = content => {
["style", ".arc { fill: none; stroke: none; }"], // avoid flash of unstyled content ["style", ".arc { fill: none; stroke: none; }"], // avoid flash of unstyled content
// pre-define our args // pre-define our args
["defs", ["defs",
template, [arc, {"id": "arc-a", "shape": {"cx": 0, "cy": 0, "start": startAngle, "end": startAngle + 3 * quarterTau, radius}}],
["use", {"href": "#arc-a", "id": "arc-b", "transform": "rotate(90)"}]], ["use", {"href": "#arc-a", "id": "arc-b", "transform": "rotate(90)"}]],
// <use> the args with predefined rotations // <use> the args with predefined rotations
["g", {"transform": "translate(0.5 0.5)"}, ys.map(y => xs.map(x => ["g", {"transform": "translate(0.5 0.5)"}, ys.map(y => xs.map(x =>