2d:null 2e:["$","title",null,{"children":"Fillotaxis | Yury Ershov | Observable"}] 33:[] 31:{"id":"acdb0cab7752dae2","slug":"fillotaxis","title":"Fillotaxis","thumbnail":"4e434ecfe777d58a89b38dc50497a28a11c935559d56102abaaa154d66156c61","access_level":"public","create_time":"$D2022-09-26T23:39:13.558Z","update_time":"$D2022-09-29T01:24:55.381Z","view_time":null,"first_public_time":"$D2022-09-27T00:48:51.470Z","has_unpublished_edits":null,"fork":{"id":"7dcef0ebff4028d9","slug":"input-chart","title":"Input + Chart","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":7,"starred":false,"owner":{"type":"team","id":"c028450100ed2bd4","login":"ershov","name":"Yury Ershov","avatar_url":"https://avatars-next.observableusercontent.com/50be16114d5f16fd20c691225ab67f7cd113e5e275231c642d16effe70a0a2d0","tier":"starter_2024"},"version":1072,"publish_version":1072,"role":null,"authored":false,"authors":[{"type":"individual","id":"34f017cf3f269f4d","login":"ershov","name":"Yury Ershov","avatar_url":"https://avatars-next.observableusercontent.com/50be16114d5f16fd20c691225ab67f7cd113e5e275231c642d16effe70a0a2d0","tier":null}],"members":[{"type":"individual","id":"34f017cf3f269f4d","login":"ershov","name":"Yury Ershov","avatar_url":"https://avatars-next.observableusercontent.com/50be16114d5f16fd20c691225ab67f7cd113e5e275231c642d16effe70a0a2d0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"Fillotaxis","cells":[{"id":4,"value":"# Fillotaxis\n\n\n\n

\n\n* https://www.youtube.com/watch?v=auUNVPMypf0\n* https://www.youtube.com/watch?v=pnFLl37wOJU\n\n\n* https://www.youtube.com/watch?v=ahXIMUkSXX0\n* https://www.youtube.com/watch?v=lOIP_Z_-0Hs\n* https://www.youtube.com/watch?v=14-NdQwKz9w\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":554,"value":"viewof unwrap = Inputs.checkbox([\"Unwrap\"], {value: []})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"Nice angle steps:\n${Inputs.button([\n \"137.507 golden\", 99.5, 77.957, 77.706, 76.2, 76.11, 81.564, 9.892, 11.851, 21.667, 26.27, 31.668, 37.429, 56.077, 96.67, \n].map(n => [`${n}`, () => setInput(viewof step, parseFloat(n))]))}\n${Inputs.button([\n \"105.441 sqrt(2)\", 73.943, 111.228, 165.198, 161.231, 158.933, 170.131, 172.575, 105.472, 123.98, 132.175, 147.584, 142.4,\n].map(n => [`${n}`, () => setInput(viewof step, parseFloat(n))]))}\n\n\n\n\n

${viewof stepNum}

${viewof stepDen}

${Inputs.button([\n [\"Set\", () => stepDen && setInput(viewof step, 360*stepNum/stepDen)],\n])}

${Inputs.button([\n [\"Random\", () => setInput(viewof step, Math.random()*180)],\n])}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"viewof step = Inputs.range([0, 360], {step: 0.001, label: \"Angle Step\", width: \"100%\", value:137.50776405005232})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof number = Inputs.range([1, 3000], {step: 1, label: \"Number\", width: \"100%\", value:500})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"Red Spiral | Pink Spiral | Manual spiral\n:-: | :-: | :-:\n${d1} | ${d2} | ${viewof spiralStep} ${\n(()=>{\n if (!d1 || !d2) return '';\n let n1 = Math.min(d1, d2);\n let n2 = Math.max(d1, d2);\n while (n2 > n1 && n1 > 0 && n2 > 1) {\n [n1, n2] = [n2 - n1, n1];\n }\n return FibButtons(n1, n2)\n})()\n}\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":516,"value":"$${plot}${unwrap.length ? plotr : ''}","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":886,"value":"\n\n

${viewof calcAvgDist}

${minMinDist ? `closest dist: ${N(minMinDist)}` : ''}
${avgMinDist ? `avg.closest 1: ${N(avgMinDist)}` : ''}
${avgMinDist6 ? `avg.closest 6: ${N(avgMinDist6)}` : ''}

${distStats ? `Fill factor max/avg: ${\"\"+distStats.slice(1).reverse().map(v => N(v)).join(\"/\")+\" = \"+(N(distStats[2]/distStats[1]))}` : ''}

${distStats ? `Fill quality = ${N(distStats[2]/distStats[1]/(1.25/0.68)*(distStats[2]/1.25)*(minMinDist ? 1.4142/minMinDist : 1)*(avgMinDist ? 1.7/avgMinDist : 1)*(avgMinDist6 ? 2/avgMinDist6 : 1))+\" (smaller better)\"}` : ''}

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":444,"value":"viewof nSpirals = Inputs.range([0, 100], {step: 1, label: \"Num. spirals\", width: \"100%\", value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"\n\n\n\n\n\n\n\n\n\n

		Fibonnaci spiral steps:
${viewof fib1}	${viewof fib2}	${FibButtons(fib1, fib2)}
For 137ish (golden):		${FibButtons(1,1)}
For 100ish:		${FibButtons(1,3)}
For 77ish:		${FibButtons(1,4)}
For 76ish:		${FibButtons(9,5)}
For 37ish:		${FibButtons(1,9)}
For 96ish:		${FibButtons(7,4)}
For 132ish:		${FibButtons(3,8)}

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"---\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n---\n\n## Internals","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":619,"value":"viewof fib1 = Inputs.number([1], {value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"viewof fib2 = Inputs.number([1], {value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"data = [...new Array(number)].map((_,i) => {\n let a = step*i / 180 * Math.PI;\n let r = Math.sqrt(i);\n return ({\n i: i,\n r: r,\n a: a,\n x: r * Math.cos(a),\n y: r * Math.sin(a)\n });\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"max_r = Math.sqrt(number)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"topIdx = data.reduce((r, v, i, a) => a[r].y > v.y ? r : i, 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"distance = data.map((v, i) => ({\n r: Math.sqrt((v.x-data[topIdx].x)**2 + (v.y-data[topIdx].y)**2),\n i: i,\n d: Math.abs(i - topIdx)\n})).sort((a, b) => a.r - b.r)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"kd = calcAvgDist.length ? new kdLib.kdTree([...data], (a,b)=>Math.sqrt((a.x-b.x)**2 + (a.y-b.y)**2), [\"x\", \"y\"]) : null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1042,"value":"minMinDist = kd && data.length>3 ? math.min(...data.slice(2).map(v => kd.nearest({x: v.x, y: v.y}, 2, max_r).slice(0,-1).map(v => v[1])).flat(1).filter(x => !!x)) : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"avgMinDist = kd && data.length>9 ? math.mean(...data.slice(2, number*0.8).map(v => kd.nearest({x: v.x, y: v.y}, 2, max_r).slice(0,-1).map(v => v[1])).flat(1).filter(x => !!x)) : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":894,"value":"avgMinDist6 = kd && data.length>9 ? math.mean(...data.slice(2, number*0.8).map(v => kd.nearest({x: v.x, y: v.y}, 7, max_r).slice(0,-1).map(v => v[1])).flat(1).filter(x => !!x)) : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":924,"value":"distStats = kd && number > 8 ? (()=>{\n let a = [...new Array(10000)].map(()=>kd?.nearest(rand_in_circle(), 1, max_r)?.[0]?.[1]).filter(x => !!x);\n return [math.min(a), math.mean(a), math.max(a)];\n})() : null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"function rand_in_circle() {\n do {\n let x = (Math.random()-0.5)*max_r*2*0.75, y = (Math.random()-0.5)*max_r*2*0.75;\n let r2 = x*x + y*y;\n if (r2 > 1 && r2 <= number*0.9*0.9) return {x,y};\n } while (true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"viewof calcAvgDist = Inputs.checkbox([\"Average distance\"], {value: []})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"d1 = distance.find(v => v.d>1)?.d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"d2 = distance.find(v => v.d > 1 && (v.d % d1))?.d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"d3 = distance.find(v => v.d > 0 && (v.d % d1) && (v.d % d2))?.d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"viewof spiralStep = Inputs.range([0, number], {step: 1, label: \"Step\", width: \"100%\", value: d3 || 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"viewof stepNum = Inputs.number([], {value: 1})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"viewof stepDen = Inputs.number([], {value: 3})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":785,"value":"function bsearch(a, cmpFn) {\n let start = 0, end = a.length - 1;\n while (start<=end) {\n let mid = Math.floor((start + end)/2);\n let cmp = cmpFn(a[mid], mid, a);\n if (!cmp) return mid;\n (cmp > 0) ? (start = mid + 1) : (end = mid - 1);\n }\n return end;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"function N(n) {\n return (0+n).toFixed(3);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":640,"value":"function Fib(n1, n2) {\n let ret = [n1, n2], next;\n while ((next = ret[ret.length-1] + ret[ret.length-2]) < number) {\n ret.push(next);\n }\n return ret;\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":733,"value":"function FibButtons(n1, n2) {\n return Inputs.button(Fib(n1,n2).map(n => [`${n}`, () => setInput(viewof spiralStep, n)]))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"function filter(d, color) {\n if (!d || !nSpirals) return [];\n let ex;\n let ret = [];\n try {\n for (let i = 0, idx = Math.min(topIdx+Math.floor(nSpirals/2), number-1); i < nSpirals && idx > 0; i++, idx--) {\n ret.push(Plot.line(data.filter((v, i) => !(Math.abs(idx - i)%d)), {\n x: v => v.x,\n y: v => v.y,\n stroke: v => color,\n }));\n }\n } catch (ex) { console.log(ex); }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":502,"value":"function filterr(d, color) {\n if (!d || !nSpirals) return [];\n let ex;\n let ret = [];\n try {\n for (let i = 0, idx = Math.min(topIdx+Math.floor(nSpirals/2), number-1); i < nSpirals && idx > 0; i++, idx--) {\n ret.push(Plot.line(data.filter((v, i) => !(Math.abs(idx - i)%d)), {\n x: v => v.a % (2*Math.PI),\n y: v => v.i,\n stroke: v => color,\n }));\n }\n } catch (ex) { console.log(ex); }\n return ret;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"plot = Plot.plot({\n height: 600,\n width: 600,\n marks: [\n Plot.dot([0], {x: 0, y: 0, r: 300-25+2, stroke: v=>\"frame\"}),\n ...filter(d1, \"c1\"),\n ...filter(d2, \"c2\"),\n ...filter(spiralStep, \"c3\"),\n Plot.dot(data, {\n x: v => v.x,\n y: v => v.y,\n stroke: v => nSpirals && v.i == topIdx ? \"top\" : \"base\",\n fill: v => nSpirals && v.i == topIdx ? \"top\" : \"opaque\",\n title: v => `${v.i}\\n${v.i - topIdx}`,\n }),\n ],\n x: {\n domain: [-max_r, max_r], // \n ticks: 0,\n line: false,\n },\n y: {\n domain : [-max_r, max_r],\n ticks: 0,\n line: false,\n },\n color: {\n // scheme: \"turbo\",\n // domain: [0,10],\n domain: [\"base\", \"opaque\", \"top\", \"c1\", \"c2\", \"c3\", \"frame\"],\n range: [\"black\", \"#FFF0\", \"magenta\", \"red\", \"magenta\", \"navy\", \"#8884\"],\n },\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"plotr = unwrap.length ? Plot.plot({\n height: 600,\n width: 400,\n marks: [\n Plot.frame({stroke: \"#8884\"}),\n ...filterr(d1, \"c1\"),\n ...filterr(d2, \"c2\"),\n ...filterr(spiralStep, \"c3\"),\n Plot.dot(data, {\n x: v => v.a % (2*Math.PI),\n y: v => v.i,\n stroke: v => nSpirals && v.i == topIdx ? \"top\" : \"base\",\n fill: v => nSpirals && v.i == topIdx ? \"top\" : \"opaque\",\n title: v => `${v.i}\\n${v.i - topIdx}`,\n }),\n ],\n x: {\n domain: [0, 2*Math.PI], // \n ticks: 0,\n line: false,\n },\n y: {\n domain : [0, number-1],\n ticks: 0,\n line: false,\n },\n color: {\n // scheme: \"turbo\",\n // domain: [0,10],\n domain: [\"base\", \"opaque\", \"top\", \"c1\", \"c2\", \"c3\"],\n range: [\"black\", \"#FFF0\", \"magenta\", \"red\", \"magenta\", \"navy\"],\n },\n}) : null;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"// https://observablehq.com/@observablehq/synchronized-inputs\nfunction setInput(input, value) {\n input.value = value;\n input.dispatchEvent(new Event(\"input\", {bubbles: true}));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"{\n plot.querySelectorAll(\"circle[__title]\").forEach(e => {\n if (e.hasAttribute(\"__has_click\")) return;\n e.addEventListener(\"click\", function (ev) {\n setInput(viewof spiralStep, Number(this.getAttribute(\"__title\").match(/\\b(\\d+)$/)[1]));\n })\n e.setAttribute(\"__has_click\", 1);\n });\n plot.style.display = \"inline-block\";\n if (plotr) {\n plotr.querySelectorAll(\"circle[__title]\").forEach(e => {\n if (e.hasAttribute(\"__has_click\")) return;\n e.addEventListener(\"click\", function (ev) {\n setInput(viewof spiralStep, Number(this.getAttribute(\"__title\").match(/\\b(\\d+)$/)[1]));\n })\n e.setAttribute(\"__has_click\", 1);\n });\n plotr.style.display = \"inline-block\";\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":122,"value":"//import {addTooltips} from \"@mkfreeman/plot-tooltip\"\nimport {Plot} from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"kdLib = require(\"kd-tree-javascript@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":872,"value":"math = require(\"mathjs\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"