30:T546,{ const renderScale = 16; const svg = DOM.svg(width, height); const svgSelection = d3.select(svg).append('g') .attr("transform", `translate (${width/2} ${height/2}) scale(${renderScale},${renderScale})`); var vertices3D = getGrid(a).map(arr => { var x = arr[0]; var y = arr[1]; var z = A * Math.cos(m * Math.PI * x / a) * Math.cos(n * Math.PI * y / a) - B * Math.cos(n * Math.PI * x / a) * Math.cos(m * Math.PI * y / a); var max = A + B; var xyz = zAxisRotation(yAxisRotation(xAxisRotation({x,y,z}, roll), pitch), yaw); xyz.opacity = opacity === "quartic fade" ? Math.pow(1-Math.abs(z/max),4): .6; xyz.color = d3.interpolateCool((z + 8) / 16) return xyz; }) var squares = svgSelection.selectAll('.square') .data(vertices3D) .join('path') .attr('class', 'square') .style('opacity', d => d.opacity) .style('fill', d => d.color) .attr('stroke', d => 'none') .attr('d', (d,i) => { //slice off the last gnomon if(((i+1)%a !== 0) && (i < a*(a-1))) { return `M ${vertices3D[i].x} ${vertices3D[i].y} L ${vertices3D[i+1].x } ${vertices3D[i+1].y} L ${vertices3D[i+1+a].x} ${vertices3D[i+1+a].y} L ${vertices3D[i+a].x } ${vertices3D[i+a].y} Z` } return; }) return svg; }31:[] 2e:{"title":"Chladni Figures","cells":[{"id":0,"value":"md`# Chladni Figures\n\nIf you sprinkle sand onto a metallic plate and vibrate it with a violin bow or an amplifier, the sand will jitter into an [intricate interference pattern](https://www.youtube.com/watch?v=9uEeADQN8Jo). These figures, made famous by [Ernst Chladni](https://monoskop.org/Ernst_Chladni) in the late 18^th century, reveal the nodal lines of waveforms emanating from the vibrating plate. \n\nTo better understand this phenomenon, I decided to make an interactive simulator. The dynamics of these emergent patterns are surprisingly complicated (if you feel like diving into 4^th-order differential equations and eigenpairs of biharmonic operators, a proper mathematical explanation can be found [here](http://www.unige.ch/~gander/Preprints/Ritz.pdf)). For my purposes, [an approximate parametric solution](https://asa.scitation.org/doi/abs/10.1121/1.1916019?journalCode=jas) works perfectly well:` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1289,"value":"tex.block`W = A cos\\Big(\\frac{m\\pi x}{a}\\Big)cos\\Big(\\frac{n\\pi y}{a}\\Big) - B cos\\Big(\\frac{n\\pi x}{a}\\Big)cos\\Big(\\frac{m\\pi y}{a}\\Big)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1460,"value":"md`Instead of showing only the nodes (i.e. wherever W = 0), I'm visualizing the full waveform, sampled across an elastic grid. Color and amplitude are both correlated with W. To highlight Chladni patterns, set translucency to *quartic fade*. You can modify other variables with the sliders below.` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"frame = {\n let i = 0;\n let limit = 360;\n while (true) {\n animate(i, limit)\n yield Promises.delay((1000/60), ++i);\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":1537,"value":"function animate(frame, limit) {\n if (frame <= limit) { \n viewof m.value = 4*Math.cos(tau * frame/120) + 4;\n viewof m.dispatchEvent(new CustomEvent(\"input\"));\n viewof n.value = 1*(Math.cos(tau * frame/120) + 1);\n viewof n.dispatchEvent(new CustomEvent(\"input\"));\n viewof pitch.value = frame%360;\n viewof pitch.dispatchEvent(new CustomEvent(\"input\"));\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":113,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1331,"value":"viewof opacity = radio({\n title: 'translucency',\n options: [\n { label: 'uniform', value: 'uniform' },\n { label: 'quartic fade', value: 'quartic fade' },\n ],\n value: 'quartic fade'\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"md`m = ${m}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"viewof m = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`n = ${n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"viewof n = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1425,"value":"md`a = ${a}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1428,"value":"viewof a = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1403,"value":"md`A = ${A}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1383,"value":"viewof A = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":1407,"value":"md`B = ${B}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1409,"value":"viewof B = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"md`roll = ${roll} deg`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"viewof roll = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":420,"value":"md`pitch = ${pitch} deg`","pinned":false,"hidden":false,"mode":"ojs"},{"id":193,"value":"viewof pitch = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":422,"value":"md`yaw = ${yaw} deg`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"viewof yaw = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"height = 400","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"width = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":1159,"value":"tau = 2 * Math.PI","pinned":false,"hidden":false,"mode":"ojs"},{"id":616,"value":"function getGrid(gnomons) {\n var grid = [];\n for(let i = 0; i < gnomons; ++i) {\n for(let j = 0; j < gnomons; ++j) {\n // grid.push([i,j]) would be quad 1, centering around origin instead\n grid.push([i - (gnomons - 1)/2,j - (gnomons - 1)/2])\n }\n }\n return grid;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":196,"value":"function xAxisRotation(coordinate, roll) {\n var radians = 2 * Math.PI * (roll % 360) / 360;\n var m = [\n 1, 0, 0,\n 0, Math.cos(radians), -Math.sin(radians),\n 0, Math.sin(radians), Math.cos(radians) \n ];\n return {\n x: m[0] * coordinate.x + m[1] * coordinate.y + m[2] * coordinate.z,\n y: m[3] * coordinate.x + m[4] * coordinate.y + m[5] * coordinate.z,\n z: m[6] * coordinate.x + m[7] * coordinate.y + m[8] * coordinate.z,\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":202,"value":"function yAxisRotation(coordinate, pitch) {\n var radians = 2 * Math.PI * (pitch % 360) / 360;\n var m = [\n Math.cos(radians), 0, Math.sin(radians),\n 0, 1, 0,\n -Math.sin(radians), 0, Math.cos(radians) \n ];\n return {\n x: m[0] * coordinate.x + m[1] * coordinate.y + m[2] * coordinate.z,\n y: m[3] * coordinate.x + m[4] * coordinate.y + m[5] * coordinate.z,\n z: m[6] * coordinate.x + m[7] * coordinate.y + m[8] * coordinate.z,\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":205,"value":"function zAxisRotation(coordinate, yaw) {\n var radians = 2 * Math.PI * (yaw % 360) / 360;\n var m = [\n Math.cos(radians), -Math.sin(radians), 0,\n Math.sin(radians), Math.cos(radians), 0,\n 0, 0, 1 \n ];\n return {\n x: m[0] * coordinate.x + m[1] * coordinate.y + m[2] * coordinate.z,\n y: m[3] * coordinate.x + m[4] * coordinate.y + m[5] * coordinate.z,\n z: m[6] * coordinate.x + m[7] * coordinate.y + m[8] * coordinate.z,\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}