31:[] 2f:{"title":"Phyllotaxis Studies","cells":[{"id":0,"value":"md`# Phyllotaxis Studies\n\nThis notebook considers how to plot phyllotactic distributions in both two and three dimensions. The approaches explored here are loosely based on Christopher Carlson's article [\"How I Made Wine Glasses from Sunflowers\"](https://blog.wolfram.com/2011/07/28/how-i-made-wine-glasses-from-sunflowers/) that appeared on the [Wolfram Blog](https://blog.wolfram.com/) back in July 2011.\n\nMy long term goal with these studies is to work through the math of how to plot phyllotaxis on an arbitrary surface of revolution in three dimensions. In Carlson's words *\"the secret to achieving an even distribution of points on an arbitrary surface of revolution is to make the number of points in an area proportional to the area\"*... Until I can wrap my head around numerical integration the following attempts will have to do. I will update this notebook as I make progress.\n\nEnjoy! 🌻🍷`","pinned":false,"hidden":false,"mode":"ojs"},{"id":725,"value":"md`## Golden Constants 🥇`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"golden_ratio = (1.0 + Math.sqrt(5)) / 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":302,"value":"golden_angle = 2.0 * Math.PI * (1.0 - 1.0 / golden_ratio)","pinned":true,"hidden":false,"mode":"ojs"},{"id":728,"value":"md`## Plotting in Two Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"viewof num_nodes = slider({\n min: 10, \n max: 800, \n step: 1, \n value: 400, \n title: \"Node Count\" \n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"function* plot_phyllotaxis(count, radius) {\n for (let i = 1; i <= count; ++i) {\n const theta = i * golden_angle;\n const r = Math.sqrt(i / count);\n const x = Math.cos(theta) * r * radius;\n const y = Math.sin(theta) * r * radius;\n yield node2d(x, y, 4);\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":131,"value":"svg``","pinned":false,"hidden":false,"mode":"ojs"},{"id":734,"value":"md`## Plotting in Three Dimensions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"function cylindrical_phyllotaxis(count, radius, h) {\n let positions = [];\n for (let i = 1; i <= count; ++i) {\n const theta = i * golden_angle;\n const x = Math.cos(theta) * radius;\n const y = Math.sin(theta) * radius;\n const z = i * (h / count);\n positions.push(...[x, z, y]);\n }\n return node3d(positions);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"{\n const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);\n camera.position.set(0.0, 36.0, 0.0);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n scene.add(cylindrical_phyllotaxis(num_nodes, 10, 10));\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.enableZoom = false;\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.setSize(width, height);\n\n while (true) {\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":654,"value":"md`Drag on the cell above to orbit!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":540,"value":"function hemispherical_phyllotaxis(count, radius) {\n let positions = [];\n for (let i = 1; i <= count; ++i) {\n const phi = Math.acos(1.0 - i / count);\n const theta = i * golden_angle;\n const x = Math.sin(phi) * Math.cos(theta) * radius;\n const y = Math.sin(phi) * Math.sin(theta) * radius;\n const z = Math.cos(phi) * radius;\n positions.push(...[x, z, y]);\n }\n return node3d(positions);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":545,"value":"{\n const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);\n camera.position.set(0.0, -28.0, 0.0);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n scene.add(hemispherical_phyllotaxis(num_nodes, 10));\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.enableZoom = false;\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.setSize(width, height);\n\n while (true) {\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":658,"value":"md`Drag on the cell above to orbit!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"function spherical_phyllotaxis(count, radius) {\n let positions = [];\n for (let i = 1; i <= count; ++i) {\n const phi = Math.acos(1.0 - 2.0 * i / count);\n const theta = i * golden_angle;\n const x = Math.sin(phi) * Math.cos(theta) * radius;\n const y = Math.sin(phi) * Math.sin(theta) * radius;\n const z = Math.cos(phi) * radius;\n positions.push(...[x, z, y]);\n }\n return node3d(positions);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":778,"value":"{\n const camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);\n camera.position.set(0.0, -28.0, 0.0);\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n scene.add(spherical_phyllotaxis(num_nodes, 10));\n\n const renderer = new THREE.WebGLRenderer({ antialias: true });\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n controls.enableZoom = false;\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setPixelRatio(window.devicePixelRatio);\n renderer.setSize(width, height);\n\n while (true) {\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":783,"value":"md`Drag on the cell above to orbit!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"md`### Draw Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"function node2d(x, y, r) {\n return svg.fragment``;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":174,"value":"function node3d(p) {\n const geometry = new THREE.BufferGeometry();\n geometry.setAttribute('position', new THREE.Float32BufferAttribute(p, 3));\n const texture = new THREE.Texture(node_tex);\n texture.needsUpdate = true;\n const material = new THREE.PointsMaterial({\n size: 2.0,\n map: texture,\n transparent: true,\n depthWrite: false,\n sizeAttenuation: true\n });\n const nodes = new THREE.Points(geometry, material);\n return nodes;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"node_tex = {\n const context = DOM.context2d(20, 20);\n context.beginPath();\n context.arc(10, 10, 10, 0, 2 * Math.PI);\n context.fill();\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"function* plot_circle(count, radius) {\n for (let i = 1; i <= count; ++i) {\n const theta = ((2.0 * Math.PI) / count) * i;\n const x = Math.cos(theta) * radius;\n const y = Math.sin(theta) * radius;\n yield node2d(x, y, 4);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":596,"value":"md`### Notebook Constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"height = 240","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":627,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"import { html, svg } from \"@observablehq/htl\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"THREE = {\n const THREE = window.THREE = await require('three');\n await require('three/examples/js/controls/OrbitControls.js').catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}