2a:null 2b:["$","title",null,{"children":"Fibonacci Lattices | Amit Sch | Observable"}] 30:Td6b,{ const size = Math.min(500, Math.max(300, width/3)), pad = 20, ε = .5, container = d3.create('div'), camera = new THREE.PerspectiveCamera(55, 1, 1, 10) .rotateY(30 * Math.PI / 180) .rotateX(18 * Math.PI / 180) .translateZ(-2.5+.35) camera.lookAt(0) const title = container.append('h3') .style('text-align', 'center') .style('max-width', '100%') const chart = container.selectAll('div') .data([ { type: 'Square', scale: { x: d3.scaleLinear([0,1], [pad, size-pad]), y: d3.scaleLinear([0,1], [size-pad, pad]), }, x: (i ) => fiblat.x(i), y: (i, n) => fiblat.y(i, n, ε), r: () => 3 }, { type: 'Disk', scale: { x: d3.scaleLinear([-1,1], [pad, size-pad]), y: d3.scaleLinear([-1,1], [size-pad, pad]), }, x: (i, n) => fiblat.convert.polarToX(fiblat.θ(i), fiblat.r(i, n, ε)), y: (i, n) => fiblat.convert.polarToY(fiblat.θ(i), fiblat.r(i, n, ε)), r: () => 3 }, { type: 'Sphere', scale: { x: d3.scaleLinear([-1,1], [pad, size-pad]), y: d3.scaleLinear([-1,1], [size-pad, pad]), }, x: function (i, n) { let [x,y, z] = projectCamera( fiblat.convert.lngLatToXYZ(fiblat.θ(i), fiblat.φ(i, n, ε)), camera ) this.__y = -y; this.__z = z return x }, y: function () { return this.__y }, r: function () { return size/1000 * Math.pow(this.__z, 2) }, }, ]) .join('div') .style('display', 'inline-block') .call(chart => { chart.append('div') .style('text-align', 'center') .style('margin-top', '0.5em') .text(d => d.type) chart.append('canvas') .attr('width', size).attr('height', size) .each(function(d) { d.context = this.getContext('2d') }) }) // .style('border', '1px solid #eee') // .style('margin', '-1px') const stages = [50, 500, 1000, 2000], canvas = chart.select('canvas') async function animate(stage) { const start = stages.at(stage-1), end = stages.at(stage) title.text(`n = ${start}`) canvas.each(renderDots(start)) await container.transition() .delay(start <= 500 ? 0 : 2000) .ease(start < 500 ? d3.easeLinear : d3.easeCubicInOut) .duration(start < 500 ? Math.abs(end-start) * 30 : 400 * Math.sqrt(500/start)) .tween('n', function() { const interpolate = d3.interpolate(start, end) return function (t) { const n = Math.round(interpolate(t)) canvas.each(renderDots(n)) title.text(`n = ${n}`) } }) .end() animate && animate((stage + 1) % stages.length) } function renderDots(n) { return function(d) { const context = d.context, PI2 = Math.PI * 2 context.clearRect(0,0,size,size) for(let i = n-1; i >= 0; i--) { context.beginPath() context.fillStyle = d3.interpolateTurbo(i / n) context.arc( d.scale.x(d.x(i, n)), d.scale.y(d.y(i, n)), d.r(i, n), 0, PI2, false ) context.fill() } } } invalidation.then(() => animate = null) animate(1) return container.node() }31:T4a5,md`## Generating a square lattice For a square lattice of ***n*** points, the coordinates of each point ***i*** are ${tex`\displaystyle (x_i,y_i) = \left( \frac{i }{\phi} \% 1 , \frac{i}{n-1} \right) \quad \textrm{for }\; 0 \leq i \lt n`}
where ***ϕ*** (phi) is the unending decimal ≈1.618… aka the [**golden ratio**](https://en.wikipedia.org/wiki/Golden_ratio) aka: ${tex`\displaystyle \phi = \cfrac{1 + \sqrt{5}}{2}`}
and the %1 (modulo 1) operator denotes keeping just the fractional part of ${tex`\frac{i }{\phi}`}. It's helpful to think of the term ${tex`\frac{i}{\phi}`} as equivalent to multiplying ***i*** by the constant ${tex`\frac{1}{\phi}`}, or 0.618…. Therefore, the generation of ${tex`(x_i,y_i)`} values can be visualized as starting at the origin (although other starting points are possible, as well see) and iterating from the first to ***n***th nodes, each time taking step of 0.618… to the right (*x* direction) and, due to the modulo operation, "wrapping" the result on the [0,1] interval. At each iteration we *also* take a constant step of ${tex`\frac{1}{n-1}`} in the *y* direction. The process is shown below for ***n*** = 24 points.`32:T155b,{ const w = Math.min(width, 1000), pad = [10, 10, 20, 30],//30, h = (w - pad[1] - pad[3]) / 2 + pad[0] + pad[2], N = 24, cr = h/100,// circle radius arrowW = 2.5 * w/1000, arrowL = 8 * w/1000, arrowD = 1.8 * w/1000, arrowhead = `l${-arrowD} ${-arrowW} l${arrowL} ${arrowW} l${-arrowL} ${arrowW} l${arrowD} ${-arrowW}`, x = d3.scaleLinear([0,2], [pad[3], w - pad[1]]), y = d3.scaleLinear([0,1], [h - pad[2], pad[0]]) const svg = d3.select(DOM.svg(w, h)) svg.selectAll('line.grid') .data([ ...x.ticks(10).map(v => ({ type: 'vert', v })), ...y.ticks( 5).map(v => ({ type: 'horz', v })), ]) .join('line').attr('class', 'grid') .attr('stroke', d => d.v % 1 === 0 ? '#888' : '#ddd') .attr('stroke-dasharray', d => d.v % 1 === 0 ? '5 3' : null) .attr('x1', d => d.type === 'horz' ? x(-0) : x(d.v)) .attr('x2', d => d.type === 'horz' ? x( 2) : x(d.v)) .attr('y1', d => d.type === 'horz' ? y(d.v) : y(0)) .attr('y2', d => d.type === 'horz' ? y(d.v) : y(1)) svg.selectAll('g.axis') .data(['x', 'y']) .join('g').attr('class', 'axis') .each(function(t) { d3.select(this) .call(t === 'x' ? d3.axisBottom(x).ticks(10) : d3.axisLeft(y).ticks(5)) .attr('transform', t === 'x' ? `translate(0 ${y(0)})` : `translate(${x(0)})`) }) let mod = svg.selectAll('g.modulo').data([null]) mod = mod.enter().append('g') .attr('class', 'modulo') .call(mod => { const dy = y(0) - y(0.5/(N-1)) mod.append('rect') .attr('width', x(1) - x(0)) .attr('height', dy * 2) .attr('x', 0) .attr('y', -dy) .attr('fill', '#f555') .attr('opacity', '.5') mod.append('circle') .attr('fill', '#e00') mod.selectAll('line') .data([0,1]) .join('line') .attr('y1', -dy) .attr('y2', dy) .attr('stroke', '#ddd') .attr('x1', i => x(i) - x(0)) .attr('x2', i => x(i) - x(0)) }) .merge(mod) .attr('opacity', 0) const circle = svg.selectAll('circle.dot') .data(d3.range(0, N)) .join('circle').attr('class', 'dot') .attr('cx', i => x(fiblat.x(i))) .attr('cy', i => y(fiblat.y(i, N))) .attr('r', cr) const paths = svg.selectAll('path.shift') .data(['x', 'y']) .join('path').attr('class', t => `${t} shift`) .attr('stroke', '#000') .attr('stroke-width', 2 * w/1000) let animate = async function (index) { if(index === 0) { // If starting at 0, show all the dots prior to transitioning out await circle.transition().duration(400) .ease(d3.easeBackIn).delay(i => 1000 + 60 * (N - i) * 24/N) .attr('r', i => i === 0 ? cr : 0) .end() } else { circle.attr('r', i => i < index ? cr : 0) } const speed = .75 + 2 * Math.pow(1 + Math.cos(index / N * 2 * Math.PI - Math.PI), 1.5), from = index - 1, dx = x(fiblat.x(1)) - x(fiblat.x(0)), dy = y(fiblat.y(0, N)) - y(fiblat.y(1, N)), // the circle that's appearing in this stage entering = circle.filter(i => i === index) // animate the shift's arrow paths index > 0 && await paths .attr('transform', t => t === 'x' ? `translate(${x(fiblat.x(from))}, ${y(fiblat.y(from, N))})` : `translate(${x(fiblat.x(from)) + dx}, ${y(fiblat.y(from, N))}) rotate(-90)` ) .attr('d', `M 0 0 L 0 0`) .attr('opacity', 0) .transition().duration(500/speed).delay(t => t === 'x' ? 0 : 550/speed) .attr('d', t => `M 0 0 l ${(t === 'x' ? dx : dy) - arrowL - 1} 0 ${arrowhead}`) .attr('opacity', 5) .end() if (fiblat.x(from) > fiblat.x(index)) { // fade in the modulo operation's dot and rectangle mod .attr('transform', `translate(${x(1)}, ${y(fiblat.y(index, N))})`) .select('circle') .attr('cx', x(fiblat.x(index)) - x(fiblat.x(0))) .attr('r', 0) .transition().duration(500/speed).ease(d3.easeBackOut) .attr('r', cr) // fade out the modulo operation await mod.transition().duration(300/speed).ease(d3.easeLinear) .attr('opacity', 1) .end() } else { // animate the entering circle's radius, since it's already in a valid position await entering .attr('cx', x(fiblat.x(from)) + dx) .transition().duration(500/speed).ease(d3.easeBackOut) .attr('r', cr) .end() } // fade out the shift arrow paths index > 0 && await paths.transition().duration(200/speed).ease(d3.easeLinear) .attr('opacity', 0) .end() if (fiblat.x(from) > fiblat.x(index)) { // animate module operation dot and rect from the interval [1,2] to [0,1] await mod.transition().duration(700/speed) .attr('transform', `translate(${x(0)}, ${y(fiblat.y(index, N))})`) .end() // animate the entering circle's radius, now that it's in a valid position entering.transition().duration(500/speed).ease(d3.easeBackOut) .attr('r', cr) await mod.transition().duration(500/speed).ease(d3.easeLinear) .attr('opacity', 0) .end() } animate && animate((index + 1) % N) } visibility().then(() => animate(0)).catch(() => {/*it's ok*/}) invalidation.then(() => animate = null) return svg.node() }33:T8e6,{ const squareToSphereAnimation = projectionAnimation({ stages: [ function (i, n) {// Doubled, Flipped Cartesian const x = fiblat.x(i) * -2 + 1,// flip and stretch 2x y = fiblat.y(i, n) * 2 - 1,// stretch 2x z = 1, r = Math.sqrt(x * x + y * y + z * z) return [(Math.atan2(z, x) || 0), Math.acos(-y / r), r] }, function (i, n) {// Cylinder const y = fiblat.y(i, n) * 2 - 1, r = Math.sqrt(y * y + 1)// Note: x^2 + z^2 = 1 return [fiblat.θ(i) - Math.PI/2, Math.acos(-y / r), r] }, function (i, n) {// Sphere return [fiblat.θ(i) - Math.PI/2, fiblat.φ(i, n), 1] }, ] .map(fn => (i, n) => { // convert θ,φ,r to θ,y,r_ (r projected on xz plane), // so that we can animate in the desirable coordinate space const pt = fn(i, n), [θ,φ,r] = pt pt[1] = fiblat.convert.polarToX(φ, r) pt[2] = fiblat.convert.polarToY(φ, r) return pt }), tx: pt => { // map θ,y,r (on xz plane) -> x,y,z const [θ,y,r_] = pt pt[0] = fiblat.convert.polarToX(θ, r_) pt[1] = y pt[2] = fiblat.convert.polarToY(θ, r_) return pt }, invalidation, visibility, }) const diskToSphereAnimation = projectionAnimation({ stages: [ function(i, n) {// Phyllotaxis return [ Math.cos(fiblat.θ(i)) * fiblat.r(i, n), 0, Math.sin(fiblat.θ(i)) * fiblat.r(i, n) ] }, function(i, n) {// Paraboloid return [ Math.cos(fiblat.θ(i)) * fiblat.r(i, n), Math.cos(fiblat.φ(i, n)), Math.sin(fiblat.θ(i)) * fiblat.r(i, n) ] }, function(i, n) {// Normal Sphere return [ Math.cos(fiblat.θ(i)) * Math.sin(fiblat.φ(i, n)), Math.cos(fiblat.φ(i, n)), Math.sin(fiblat.θ(i)) * Math.sin(fiblat.φ(i, n)) ] } ], invalidation, visibility, }) return html`

${ [squareToSphereAnimation, diskToSphereAnimation ] .map(el => html`

${el}

`) }

` }34:T4d7,md`## Improving minimum nearest neighbor distance Although the Fibonacci lattice, as presented so far, provides a nice and consistent average distance between neighboring points, the spherical lattice has a singularity at the north and south poles (and the disk lattice has this issue in its center), where the first points in the series are much closer than the rest. This is demonstrated in the plots below using equal-sized circles instead of dots. Notice the overlaps occurring at the north pole of the globe. The problem can be mitigated by moving the starting point of the pattern away from the origin along the *y* direction. The offset amount is represented by ***ε*** (epsilon) and, in general, a value of 0.5 ${htl.html` { viewof E.value = 0.5 viewof E.dispatchEvent(new CustomEvent('input')) }}>Show Me…`} works well. The adjusted square lattice's equation presented earlier, for any value of ***ε***, becomes ${tex`\displaystyle (x_i,y_i) = \left( \frac{i}{\phi}, \frac{i{+ \varepsilon}}{n{-1}{+2\varepsilon}} \right) \quad`}
You can try out different values of ***ε*** (and ***n***) using the sliders below these charts. `35:Tc67,plots = { const chartSize = width > 640 ? .45 * width : Math.min(500, width) const innerSize = chartSize - 40 const opacity = i => i % nth === 0 ? 1 : .3 const points = d3.range(0, N) const markProps = { x: i => fiblat.x(i), y: i => fiblat.y(i, N, E), fill: i => d3.interpolateTurbo(i / N), r: .45 * innerSize / Math.sqrt(N), // mixBlendMode: 'multiply', opacity, } function circleMark(options={}) { return Plot.circle(points, { ...markProps, ...options }) } function textMark(options={}) { return Plot.text(points /*.filter(({i}) => i < 10 || i % 5 === 0)*/, { x: i => fiblat.x(i), y: i => fiblat.y(i, N, E), text: i => i, fill: i => { const hcl = d3.hcl(d3.interpolateTurbo(i / N)) hcl.l = hcl.l / opacity(i) > 61.8 ? 0 : 100 return hcl.toString() }, opacity, fontWeight: '800', fontFamily: 'Arial Narrow, Arial, Helvetica, Sans Serif', ...options, }) } const layout = { marginLeft: 30, marginRight: 10, marginTop: 20, marginBottom: 20, width: chartSize, height: chartSize, } const cartesian = Plot.plot({ ...layout, caption: html`Cartesian Plot (x,y)`, x: { domain: [0, 1], ticks: 10, grid: true, label: '', }, y: { domain: [0, 1], ticks: 10, grid: true, label: '', }, marks: [ circleMark(), Plot.ruleY([points[0], points[points.length-1]], { y: i => fiblat.y(i, N, E), strokeDasharray: '5 3', opacity: .5 }), textMark(), ] }) const xy2polar = { x: i => Math.cos(fiblat.θ(i)) * fiblat.r(i, N, E), y: i => Math.sin(fiblat.θ(i)) * fiblat.r(i, N, E), } const polar = Plot.plot({ ...layout, caption: html`Polar Plot (θ,r)`, x: { domain: [-1, 1], ticks: 10, grid: false, }, y: { domain: [-1, 1], ticks: 10, grid: false, }, r: { domain: [0, 1], range: [0, innerSize/2], type: 'linear' }, marks: [ Plot.circle(d3.range(.2, 1.01, .2), { x: 0, y: 0, r: Plot.identity, stroke: '#ddd', strokeWidth: .65, }), Plot.ruleX([0], { stroke: '#ddd', }), Plot.ruleY([0], { stroke: '#ddd', }), circleMark(xy2polar), textMark(xy2polar) ] }) const toDegs = 180 / Math.PI const geo = Plot.plot({ ...layout, width, height: Math.min(640, width), projection: {type: "orthographic", rotate: [0, -35, 20]}, marks: [ Plot.graticule({strokeOpacity: 0.1}), Plot.sphere(), Plot.geo(points, { geometry: d3.geoCircle() .center(i => [fiblat.θ(i) * toDegs, fiblat.φ(i, N, E) * toDegs + 90]) .radius(100 / Math.sqrt(N)), stroke: '#555', ...markProps, mixBlendMode: 'multiply', }), textMark({ x: i => fiblat.θ(i) * toDegs, y: i => fiblat.φ(i, N, E) * toDegs + 90, }), ] }) return html`

${cartesian}

${polar}

${geo}

` } 36:T913,function projectionAnimation({ size=Math.min(500, Math.max(300, width/2)), pad=0, stages, tx=coords => coords, camera=camera => camera .rotateY(camLng) .rotateX(camLat) .translateZ(-2.5-.5-.5), invalidation, visibility, }={}) { camera = camera(new THREE.PerspectiveCamera(55, 1, 1, 10)) camera.lookAt(0) const x = d3.scaleLinear([-1,1], [size - pad, pad]), y = d3.scaleLinear([-1,1], [pad, size - pad]) const svg = d3.select(this || DOM.svg(size, size))//.style('background', '#def') const axes = svg.selectAll('path') .data( [0,1,2].flatMap(plane => [0, 1].flatMap(dir => [-1,0,1].map(x => [-1,1].map(y => dir === 0 ? [x,y] : [y,x]).map(p => { p.splice(plane, 0, 0) return p }) ) ) ) .map(pts => pts.map(pt => projectCamera(pt, camera)).map(([cx,cy]) => [x(cx), y(cy)]))) .join('path') .attr('stroke', (_,i) => i % 3 === 1 ? '#888' : '#ddd').attr('fill', 'none') .attr('d', d3.line()) const circle = svg.selectAll('circle') .data(d3.range(0, N).reverse()) .join('circle') .attr('fill', i => d3.interpolateTurbo(fiblat.y(i, N))) .each(updateCircle(stages.at(0))) function updateCircle(getCoords) { return function (arg) { const v = projectCamera(tx(getCoords(arg, N)), camera) this.setAttribute('transform', `translate(${x(v[0])}, ${y(v[1])})`) this.setAttribute('r', size/500 * Math.pow(v[2], 2)) // this.setAttribute('opacity', Math.pow(v[2]-1, 2))// neat volumetric depth effect } } function animate(selection, fn=stages[1]) { const stageIdx = stages.indexOf(fn), nStages = stages.length, prev = stages[((stageIdx - 1) + nStages) % nStages], next = stages[(stageIdx + 1) % nStages] selection.transition() .duration(1000).delay(500) .tween('animate', i => updateCircle(d3.interpolateArray(prev(i, N), fn(i, N)))) .end() .then(animate.bind(null, selection, next)) .catch(() => {/* it's ok */}) } invalidation.then(() => { circle.interrupt() }) if (visibility) { visibility() .then(() => animate(circle)) .catch(() => {/* it's ok */}) } else { animate(circle) } return svg.node() }37:[] 2e:{"id":"33a463330430c535","slug":"fibonacci-lattices","title":"Fibonacci Lattices","thumbnail":"66d3223e8c7c610d566b78e0e88beaa6135932f61cb8b6d67414caf254a096b6","access_level":"public","create_time":"$D2023-02-10T00:48:54.453Z","update_time":"$D2023-03-07T00:33:40.782Z","view_time":null,"first_public_time":"$D2023-03-06T14:47:27.123Z","fork":false,"stars":73,"starred":false,"owner":{"type":"team","id":"39266e42aee80d30","login":"meetamit","name":"Amit Sch","avatar_url":"https://avatars-next.observableusercontent.com/9670de3870bda4c2dfd4121b77200f8c0756c9f5bdebbf1a9e80887ba5c5c5a4","tier":"starter_2024"},"version":728,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dfa15ada0d605a00","login":"meetamit","name":"Amit Sch","avatar_url":"https://avatars-next.observableusercontent.com/9670de3870bda4c2dfd4121b77200f8c0756c9f5bdebbf1a9e80887ba5c5c5a4","tier":null}],"members":[{"type":"individual","id":"dfa15ada0d605a00","login":"meetamit","name":"Amit Sch","avatar_url":"https://avatars-next.observableusercontent.com/9670de3870bda4c2dfd4121b77200f8c0756c9f5bdebbf1a9e80887ba5c5c5a4","tier":null,"role":"editor"}],"comments":[{"id":"0c661fb0e4cecb42","reply_to_id":null,"content":"d3-force uses ε = 0.5 too \nhttps://github.com/d3/d3-force/pull/129","create_time":"$D2023-03-06T14:59:59.642Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"02f2df792d3a996f","reply_to_id":null,"content":"Would love to see something for this system of dividing a sphere https://www.mdpi.com/2076-3417/10/2/655","create_time":"$D2023-03-30T16:16:29.422Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"b95bfd787bcfcc53","login":"hugomosh","name":"Hugo Mosh Cardoza","avatar_url":"https://avatars-next.observableusercontent.com/55505fa48212c4fbb702e7ffce5ee21f10ccd6ebf5ae98194907fa7006739f78","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":25,"collection":null,"type":"notebook","body":{"title":"Fibonacci Lattices","cells":[{"id":0,"value":"# Fibonacci Lattices\n\nReference [extremelearning.com.au](http://extremelearning.com.au/how-to-evenly-distribute-points-on-a-sphere-more-effectively-than-the-canonical-fibonacci-lattice/).\n\nThe Fibonacci lattice is a visually and mathematically elegant method of distributing points on a unit square, disk or sphere. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":128,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`Because ***ϕ***, the golden ratio, is an irrational number, no two ${tex`x_i`} values are ever equal. And while any irrational number would produce this result, the golden ratio is a particularly good choice, as it maximizes the minimum nearest neighbor distance. At the bottom of this notebook is a selector for trying out other values of ***ϕ***.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"md`## Generating a disk (aka spiral) lattice\n\nThis pattern is sometimes referred to as a [phyllotaxis](https://en.wikipedia.org/wiki/Phyllotaxis), an arrangement found in nature in some plants. It can be generated via a simple transformation of the square lattice from cartesian to polar coordinates:\n\n${tex`(x,y) \\rightarrow (\\theta, r) : \\quad (2\\pi x, \\sqrt{y})`}\n\n
\nNotice that ***θ*** is simply a linear scaling of ***x*** from [0,1] to [0,2π], as if rolling the x dimension around the origin. But the mapping to ***r*** is done with a non-linear transformation ${tex`\\sqrt{y}`}, which has an area-preserving effect that maintains the even distribution. The difference is demonstrated below in an animation visualizing the transformation in two steps, with the intermediate step showing the distribution pattern when ***r*** = ***y***.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"projectionAnimation({\n stages: [\n function cartesian (i, n) { return [\n Math.atan2(fiblat.y(i, n), fiblat.x(i)) || 0, \n Math.sqrt(Math.pow(fiblat.x(i), 2) + Math.pow(fiblat.y(i, n), 2))\n ] },\n function polarLinear(i, n) { return [-fiblat.θ(i) + Math.PI/2, fiblat.y(i, n)] },\n function polar (i, n) { return [-fiblat.θ(i) + Math.PI/2, fiblat.r(i, n)] },\n ],\n camera: camera => camera.translateZ(-2.5),\n tx: (pt) => {\n // θ,r -> x,y,z\n const [θ, r] = pt\n pt[0] = fiblat.convert.polarToX(θ, r)\n pt[1] = fiblat.convert.polarToY(θ, r)\n pt[2] = 0\n return pt\n },\n invalidation, visibility,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"md`## Generating a spherical lattice\n\nThe positions of the points on a spherical lattice, expressed as either longitude + latitude pairs or as 3D coordinates are given as\n\n${tex`(x,y) \\rightarrow (\\theta, \\phi) : \\quad \\left(2 \\pi x, \\arccos(1-2y)\\right)`}\n\n
\nand\n\n${tex`(\\theta,\\phi) \\rightarrow (x,y,z) : \\quad \\left (\\cos\\theta \\sin\\phi, \\sin \\theta \\sin \\phi, \\cos \\phi \\right)`}\n\n
\nIt is a cylindrical equal-area projection of the square. The relationships between square, disk and sphere are demonstrated below as 2-step transformations.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"viewof camLng = Inputs.range([0, Math.PI*2], {\n value: Math.PI/6, \n label: 'Camera Longitude', \n step: .01 * Math.PI / 180,\n format: rads => Math.round(rads * 180 / Math.PI * 10) / 10,\n resetCamera,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":48,"value":"viewof camLat = Inputs.range([-Math.PI/2, Math.PI/2], {\n value: Math.PI/10/* 20 */, \n label: 'Camera Latitude', \n step: .01 * Math.PI / 180,\n format: rads => Math.round(rads * 180 / Math.PI * 10) / 10,\n resetCamera,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":54,"value":"viewof resetCamera = Inputs.button('Reset 3D')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"viewof N = Inputs.range([1, 500], { value: 200, step: 1, label: 'Number of points'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"viewof E = Inputs.range([0, 5], { value: 0, step: .01, label: 'Epsilon'})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"viewof nth = Inputs.range([1, 20], { value: 1, step: 1, label: 'Highlight every Nth' })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":586,"value":"viewof phi = Inputs.radio([\n {\n value: (1 + Math.sqrt(5)) / 2,\n label: tex`\\displaystyle \\cfrac{1 + \\sqrt{5}}{2}`,\n },\n {\n value: Math.sqrt(2),\n label: tex`\\displaystyle \\sqrt{2}`,\n },\n {\n value: (9 + Math.sqrt(221)) / 10,\n label: tex`\\displaystyle \\cfrac{9 + \\sqrt{221}}{10}`,\n },\n {\n value: Math.sqrt(3),\n label: tex`\\displaystyle \\sqrt{3}`,\n },\n {\n value: Math.LN2,\n label: tex`\\displaystyle \\ln{2}`,\n },\n {\n value: .724592938,\n label: tex`\\displaystyle 0.724592938`,\n },\n\n ], {\n value: (1 + Math.sqrt(5)) / 2,\n valueof: d => d.value,\n format: d => d.label,\n label: 'Phi (ϕ)',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":659,"value":"md`The \"Highlight every Nth\" slider above demonstrates the high degree of order inherent in this pattern; any value you choose will still result in a discernible sub-pattern within the overall pattern. \n\nFinally, the \"Phi (ϕ)\" selector lets you see the effects of other choices for the irrational constant ***ϕ***. The choice set here affects all the visualizations in this notebook, so it's worth scrolling up to see the result. While the golden ratio ${tex`\\tiny \\cfrac{1 + \\sqrt{5}}{2}`} produces the best packing, other choices produce interesting patterns too.\n\n## Reusable Code\n\nThe lattice equations covered here are available for import as a collection of functions in the **\\`fiblat\\`** cell below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":190,"value":"fiblat = {\n const x = (i) => i * phi % 1,\n y = (i, n, ε=0) => (i + ε) / (n - 1 + 2 * ε),\n θ = (i) => x(i) * 2 * Math.PI,\n r = (i, n, ε) => Math.sqrt(y(i, n, ε)),\n φ = (i, n, ε) => Math.acos(1 - 2 * y(i, n, ε)),\n\n polarToX = (θ, r) => r * Math.cos(θ),\n polarToY = (θ, r) => r * Math.sin(θ),\n lngLatToXYZ = (θ, φ, r=1) => [Math.cos(θ) * Math.sin(φ) * r, Math.cos(φ) * r, Math.sin(θ) * Math.sin(φ) * r]\n\n return {\n x, y, θ, r, φ, \n convert: { polarToX, polarToY, lngLatToXYZ }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":716,"value":"# Credit\n\nEverything shown here — and more — is explained in an article by Martin Roberts on [Extreme Learning (extremelearning.com.au)](http://extremelearning.com.au/how-to-evenly-distribute-points-on-a-sphere-more-effectively-than-the-canonical-fibonacci-lattice/).\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":27,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":61,"value":"projectCamera = {\n const vect = new THREE.Vector3()\n return function(coords, camera) {\n vect.set(...coords).project(camera)\n coords[0] = vect.x\n coords[1] = vect.y\n coords[2] = vect.z\n return coords\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.130.0/build/three.min.js\");\n // await require(\"three@0.130.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 2f:"$2e:body"