2e:null 2f:["$","title",null,{"children":"Rotationally invariant vibrational modes of a disk | Mark McClure | Observable"}] 34:T7d9,membrane = { //let width = 600; let height = 0.6 * width; let container = d3 .create('div') .style('width', width.toString() + 'px') .style('height', height.toString() + 'px'); let scene = container .append('x3d') .attr('width', width.toString() + 'px') .attr('height', height.toString() + 'px') .append('scene'); scene .append('viewpoint') .attr('position', '0.04099 -1.92339 0.67164') .attr('orientation', '0.99999 0.00418 -0.00065 1.18692'); let quads = []; let dr = 0.02; let N = 32; let dt = (2 * Math.PI) / (2 * N); let z = j0_zero(n); for (let r = 0; r < 1 + dr / 2; r = r + dr) { for (let t = 0; t < 2 * Math.PI - dt / 2; t = t + dt) { quads.push([ [r * Math.cos(t), r * Math.sin(t), j0(z * r) / 4], [(r + dr) * Math.cos(t), (r + dr) * Math.sin(t), j0(z * (r + dr)) / 4], [ (r + dr) * Math.cos(t + dt), (r + dr) * Math.sin(t + dt), j0(z * (r + dr)) / 4 ], [r * Math.cos(t + dt), r * Math.sin(t + dt), j0(z * r) / 4] ]); } } let radial_lines = []; for (let r = 0; r < 1 + dr / 2; r = r + dr) { for (let t = 0; t < 2 * Math.PI - dt / 2; t = t + dt) { radial_lines.push([ [r * Math.cos(t), r * Math.sin(t), j0(z * r) / 4], [(r + dr) * Math.cos(t), (r + dr) * Math.sin(t), j0(z * (r + dr)) / 4] ]); } } let circular_lines = []; for (let t = 0; t < 2 * Math.PI - dt / 2; t = t + dt) { for (let r = 0; r < 1 + dr / 2; r = r + 4 * dr) { circular_lines.push([ [r * Math.cos(t), r * Math.sin(t), j0(z * r) / 4], [r * Math.cos(t + dt), r * Math.sin(t + dt), j0(z * r) / 4] ]); } } let T = scene.append('transform'); T.append(() => create_indexedFaceSet(quads, { color: '0.19 0.79 0.84' }) ); T.append(() => create_indexedLineSet(radial_lines)); T.append(() => create_indexedLineSet(circular_lines)); yield container.node(); x3dom.reload(); }35:T5da,comments = md`## Mathematical comments The vibrational modes of a disk are given by the eigenfunctions of the Laplacian on the disk, where the Laplacian (stated in terms of plar coordinates) is: ${tex.block`\Delta u = u_{rr} + \frac{1}{r}u_r + \frac{1}{r^2}u_{\theta\theta}.`} When ${tex`u`} is independent of ${tex`\theta`}, we have that ${tex`u_{\theta\theta}=0`} so this simplifies to ${tex.block`\Delta u = u_{rr} + \frac{1}{r}u_r.`} Thus, we're led to consider the boundary value problem ${tex.block`u''(r) + \frac{1}{r}u'(r) = -\lambda u(r), \: u'(0)=0, \: u(1)=0.`} Note that the left hand boundary condition arises from the fact the graph of the radial function has a maximum at ${tex`r=0`}. In order to solve the BVP, we might first find the general solution of the differential equation. If we [ask WolframAlpha to solve the equation](https://www.wolframalpha.com/input/?i=solve+u%27%27%28r%29+%2B+u%27%28r%29%2Fr+%3D%3D+-lambda+u%28r%29) we get something like ${tex.block`u(r) = c_1 J_0\left(r \sqrt{\lambda }\right)+c_2 Y_0\left(r \sqrt{\lambda }\right)`} and we're told that ${tex`J_0`} and ${tex`Y_0`} represent the [Bessel functions](https://en.wikipedia.org/wiki/Bessel_function) of the [first](https://mathworld.wolfram.com/BesselFunctionoftheFirstKind.html) and [second](https://mathworld.wolfram.com/BesselFunctionoftheSecondKind.html) kind. If we plot these, we note that ${tex`Y_0`} has a singularity at the origin; it appears that ${tex`J_0`} is the function that we need. `36:T4db,both_plots = { let w = width; let target = DOM.element('div'); functionPlot({ target: target, width: w, height: 0.6 * w, xAxis: { domain: [-0.05, 20] }, yAxis: { domain: [-2, 1.2] }, data: [ { graphType: 'polyline', skipTip: false, fn: function(scope) { // scope.x = Number var x = scope.x; return j0(x); } }, { graphType: 'polyline', skipTip: false, fn: function(scope) { // scope.x = Number var x = scope.x; return y0(x); } } ] }); let J0 = MathJax.tex2svg(String.raw`J_0`); d3.select(target) .select('svg') .append('g') .attr('transform', `translate(80 65)`) .append(() => J0.querySelector("svg")); let Y0 = MathJax.tex2svg(String.raw`Y_0`); d3.select(target) .select('svg') .append('g') .attr('transform', `translate(60 350)`) .append(() => Y0.querySelector("svg")); d3.select(target) .attr('position', 'relative') .append('div') .style('position', 'absolute') .style('width', `${w}px`) .style('height', `${0.6 * w}px`) .style('top', '0px') .style('left', '0px'); return target; }37:[] 32:{"id":"abee0592e1160f0a","slug":"rotationally-invariant-vibrational-modes-of-a-disk","title":"Rotationally invariant vibrational modes of a disk","thumbnail":"6d0327f3f1db89f107727a16edb8e7dc735a1b2fcf1bed77962a02d19c080779","access_level":"public","create_time":"$D2021-03-30T10:59:53.553Z","update_time":"$D2024-01-10T03:22:33.067Z","view_time":null,"first_public_time":"$D2021-03-31T19:12:17.408Z","has_unpublished_edits":null,"fork":false,"stars":4,"starred":false,"owner":{"type":"team","id":"d771c8ae812d5130","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":"starter_2024"},"version":326,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null}],"members":[{"type":"individual","id":"c3301e515dd08a41","login":"mcmcclur","name":"Mark McClure","avatar_url":"https://avatars-next.observableusercontent.com/e615e819ce83d43faef607e48c53c5ff63943aa0ba9f5848499bd02fef7396f4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Rotationally invariant vibrational modes of a disk","cells":[{"id":0,"value":"md`# Rotationally invariant vibrational modes of a disk`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"topmatter = md`Here's a look at the natural modes of vibration of a disk that remain invariant under any rotation.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"viewof run_it = Inputs.toggle({ label: \"Run\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"viewof n = Inputs.radio(d3.range(1, 11), { label: \"Mode:\", value: 3 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"radial_comment = md`The radial portions of these drums are given by the so-called *Bessel functions* and look like so:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"just_plot = {\n let w = width;\n let target = DOM.element(\"div\");\n functionPlot({\n target: target,\n width: w,\n height: 0.6 * w,\n xAxis: { domain: [-0.05, 1] },\n yAxis: { domain: [-0.6, 1.2] },\n data: [\n {\n graphType: \"polyline\",\n skipTip: true,\n fn: function (scope) {\n // scope.x = Number\n let x = scope.x;\n return j0(x * j0_zero(n));\n }\n }\n ]\n });\n\n d3.select(target)\n .attr(\"position\", \"relative\")\n .append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"width\", `${w}px`)\n .style(\"height\", `${0.6 * w}px`)\n .style(\"top\", \"0px\")\n .style(\"left\", \"0px\");\n\n return target;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md`## Code`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"run = {\n if (run_it) {\n d3.select(membrane)\n .select('transform')\n .attr('scale', `1 1 ${Math.sin((Math.sqrt(n) * now) / 400)}`);\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"function j0_zero(n) {\n let table = [\n 2.404825557695773,\n 5.5200781102863115,\n 8.653727912911013,\n 11.791534439014281,\n 14.930917708487787,\n 18.071063967910924,\n 21.21163662987926,\n 24.352471530749302,\n 27.493479132040253,\n 30.634606468431976\n ];\n if (n < 11) {\n return table[n - 1];\n } else {\n let z = table[9] + (n - 10) * Math.PI;\n for (let i = 0; i < 5; i++) {\n z = z + j0(z) / j1(z);\n }\n return z;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":310,"value":"import {\n create_indexedLineSet,\n create_indexedFaceSet\n} from \"@mcmcclur/x3dom-primitives\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"import {\n make_arrow,\n pt_list_to_coordString\n} from 'ba6b3d20e94e294f'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"import { Range, Toggle, Radio } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"d3 = require('d3@6')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"x3dom = require('x3dom').catch(() => window['x3dom'])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"functionPlot = require(\"function-plot@1/dist/function-plot\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"j1 = (await import(\"https://cdn.jsdelivr.net/npm/@stdlib/esm@0.0.3/math/base/special/besselj1.js\"))\n .default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"j0 = (await import(\"https://cdn.jsdelivr.net/npm/@stdlib/esm@0.0.3/math/base/special/besselj0.js\"))\n .default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"y0 = (await import(\"https://cdn.jsdelivr.net/npm/@stdlib/esm@0.0.3/math/base/special/bessely0.js\"))\n .default","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"MathJax = require('https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js').catch(\n () => window['MathJax']\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":210,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"