2e:null 2f:["$","title",null,{"children":"Playing with Hilbert | Zeke Nierenberg | Observable"}] 34:T5b7,drawAreaButtons = { function nextOrder() { const group = drawArea .reduce((g, stroke) => { return g.addPath(Path.fromSimple(stroke)); }, new Group()) .scale(0.5); const offsetAmount = group.bounds.x + group.bounds.x * Math.pow(0.5, drawingOrder); const upperLeft = group.rotate(-90); const lowerLeft = group.translate(new Vector(0, offsetAmount)); const lowerRight = group.translate(new Vector(offsetAmount, offsetAmount)); const upperRight = group.rotate(90).translate(new Vector(offsetAmount, 0)); const nextPaths = Group.merge(upperLeft, lowerLeft, lowerRight, upperRight) .translateMinPointToOrigin() .translate(new Vector(10, 10)); //.scale(0.75); mutable drawingOrder = drawingOrder + 1; viewof drawArea.reset(); viewof drawArea.addStrokes(nextPaths.paths.map(path => path.toSimple())); } const form = html``; form.next.onclick = nextOrder; form.reset.onclick = () => { viewof drawArea.reset(); mutable drawingOrder = 0; }; form.undo.onclick = () => viewof drawArea.undo(); form.redo.onclick = () => viewof drawArea.redo(); return form; }35:T549,FFT = { const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); const audio = await waitForElement("audio"); audio.onplay = () => { audioCtx.resume(); mutable playing = true; }; audio.onpause = () => { mutable playing = false; audioCtx.suspend(); }; const source = audioCtx.createMediaElementSource(audio); // Create an analyser const analyser = audioCtx.createAnalyser(); analyser.fftSize = 512; const bufferLength = analyser.frequencyBinCount; const dataArray = new Float32Array(bufferLength); // Connect parts source.connect(analyser); analyser.connect(audioCtx.destination); let tick = 0; while (true) { analyser.getFloatFrequencyData(dataArray); yield dataArray; } // var analyser = audioCtx.createAnalyser(); // const FFTData = new Float32Array(analyser.frequencyBinCount); // analyser.fftSize = 2048; // var bufferLength = analyser.frequencyBinCount; // var dataArray = new Uint8Array(bufferLength); // const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); // const microphone = audioCtx.createMediaStreamSource(stream); // microphone.connect(analyser); // console.log(audioCtx); // // return {}; // while (true) { // analyser.getFloatFrequencyData(FFTData); // return FFTData; // } }36:[{"id":"dd82373df724a240e2773840bf500b6ddcbc57195115af8cb12ca816aacc0792589a007e18c17c971d486e3f916354ae004a77a75a594754efb101178441715a","href":"https://static.observableusercontent.com/files/dd82373df724a240e2773840bf500b6ddcbc57195115af8cb12ca816aacc0792589a007e18c17c971d486e3f916354ae004a77a75a594754efb101178441715a","name":"neil-armstrong.mp3","type":"audio/mpeg","lastModified":1613961437193.592,"size":3378910},{"id":"18ecb34ecb60e913f1089f4e332aa4ac195ad584545c2d4a4c6e305cb016643408aafa47ca524a5dbee6517ee37fd089a51fcad6b95ac2d81b22c4c86b908612","href":"https://static.observableusercontent.com/files/18ecb34ecb60e913f1089f4e332aa4ac195ad584545c2d4a4c6e305cb016643408aafa47ca524a5dbee6517ee37fd089a51fcad6b95ac2d81b22c4c86b908612","name":"string-example@1.png","type":"image/png","lastModified":1614176611132.798,"size":132651}] 32:{"id":"daf0edd310cb805d","slug":"playing-with-hilbert","title":"Playing with Hilbert","thumbnail":"e092e72d048e05d75d080009c01e3ea59f4b16be8cb9e64d24280e0d80662d6a","access_level":"public","create_time":"$D2021-02-21T03:10:53.628Z","update_time":"$D2021-03-15T15:05:30.911Z","view_time":null,"first_public_time":"$D2021-03-13T14:31:01.681Z","has_unpublished_edits":null,"fork":false,"stars":24,"starred":false,"owner":{"type":"team","id":"b9eb63f17050ccf7","login":"zekenie","name":"Zeke Nierenberg","avatar_url":"https://avatars-next.observableusercontent.com/7346a2f2887cfa1ebd3d2765ca074b2f6990326c21752f6834193815df569cd3","tier":"starter_2024"},"version":1141,"publish_version":1141,"role":null,"authored":false,"authors":[{"type":"individual","id":"9202aa42fa47ffda","login":"zekenie","name":"Zeke Nierenberg","avatar_url":"https://avatars-next.observableusercontent.com/7346a2f2887cfa1ebd3d2765ca074b2f6990326c21752f6834193815df569cd3","tier":null}],"members":[{"type":"individual","id":"9202aa42fa47ffda","login":"zekenie","name":"Zeke Nierenberg","avatar_url":"https://avatars-next.observableusercontent.com/7346a2f2887cfa1ebd3d2765ca074b2f6990326c21752f6834193815df569cd3","tier":null,"role":"editor"}],"comments":[{"id":"fc6ad357290e284c","reply_to_id":null,"content":"mean! :)","create_time":"$D2021-03-13T16:13:09.274Z","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":"04dbc10dfd614ab2","reply_to_id":"fc6ad357290e284c","content":"😉","create_time":"$D2021-03-13T16:18:58.143Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"9202aa42fa47ffda","login":"zekenie","name":"Zeke Nierenberg","avatar_url":"https://avatars-next.observableusercontent.com/7346a2f2887cfa1ebd3d2765ca074b2f6990326c21752f6834193815df569cd3","tier":null}},{"id":"bac58696444e761a","reply_to_id":null,"content":"Implementation","create_time":"$D2021-03-14T18:15:51.866Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}},{"id":"b037a263bc0ca62d","reply_to_id":"bac58696444e761a","content":"Thanks!!","create_time":"$D2021-03-15T15:05:24.517Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"9202aa42fa47ffda","login":"zekenie","name":"Zeke Nierenberg","avatar_url":"https://avatars-next.observableusercontent.com/7346a2f2887cfa1ebd3d2765ca074b2f6990326c21752f6834193815df569cd3","tier":null}},{"id":"1d99b5b6d582832f","reply_to_id":"fc6ad357290e284c","content":"oh you made my day.","create_time":"$D2021-03-29T19:00:33.076Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"366ba7a1a135b4c1","login":"robeddy","name":"","avatar_url":"https://avatars-next.observableusercontent.com/7d446c5c663b0b350371be81d8a5447637598270463ae40f7cd17eacae0b910b","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Playing with Hilbert","cells":[{"id":0,"value":"md`# Playing with Hilbert`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":738,"value":"html`

Source: @Stansy on wikipedia

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"md`\nSpace filling curves are fractals that weave through every point in space.\n\nThey're useful when you are building a system that needs to

\\`\\`
*jump dimensions*
\\`\\`.\n\nLet's say you have a piece of string that represents 1-dimentional space. You could mark that string with a sharpie and represent a point. If you were to take your string and lay it out on the floor and make it all squiggled up, you'd have your sharpie point somewhere in 2-dimentional space.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":897,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":902,"value":"md`This strategy isn't repeatable, though. You're basically mapping from 1D → 2D at random. The Hilbert curve is one way to map _consistently_ from 1D space to 2D, and 2D back to 1D.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":893,"value":"md`Hilbert curves, like all fractals, can be represented at an any \"order.\" An order 1 Hilbert curve has 4 points. An order 4 Hilbert curve has 256 points. Play with the slider below to get a sense of how the curve changes at different orders.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"viewof order = Range([1, 8], { value: 6, label: \"Order\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":779,"value":"md`Hilbert curves have some useful properties. If two numbers are close together in 1D space, they'll also be close in 2D space. You can also map the reverse, 2D to 1D, but the Hilbert curve doesn't garantee that if two points are close together in 2D space they'll always be close together in 1D space.\n\nTo get a feel for how this works, I've given you three sliders to play with. The first is the _order_ slider. It starts at _2_ for a pretty \"low res\" curve. The next two, \\`x\\` and \\`x'\\` represent points in 1D space.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":818,"value":"viewof secondOrder = Range([1, 8], { value: 2, label: \"Order\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"viewof xPrime = Range([0, 100], { value: 25, label: \"X'\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"viewof x = Range([0, 100], { value: 20, label: \"X\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":847,"value":"fig2 = {\n const secondHilbert = hilbert(secondOrder)\n .translateMinPointToOrigin()\n .scale(190);\n\n const mapIntToPx = d3\n .scaleLinear()\n .domain([0, 100])\n .range([0, secondHilbert.points.length - 1])\n .interpolate(d3.interpolateRound);\n\n const xVector = secondHilbert.points[mapIntToPx(x)];\n\n const xPrimeVector = secondHilbert.points[mapIntToPx(xPrime)];\n\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"md`Now that you have your bearings, feel free to draw the hilbert curve yourself. Worry not, I'll help. In the space below, start by drawing an order 1 Hilbert curve. As a reminder of what that looks like, it's sort of a box-y uppercase U or \\`|_|\\`. Also, you can see what it looks like above if you draw the \"order\" bar down to 1. When you're done drawing an order 1 curve, click \"Next Order\"`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":938,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1038,"value":"mutable drawingOrder = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"viewof drawArea = makeDrawArea(Math.min(width, 500), Math.min(width, 500))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"md`What about practical applications, but what are they? [3Blue1Brown](https://www.youtube.com/watch?time_continue=3&v=3s7h2MHQtxc&feature=emb_logo) gives a tantilizing (although as far as I understand theoretical) example of converting grayscale image data (2D: X and Y + brightness) to sound. The idea is that someone with impared vision could learn to \"see\" with their ears.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"md`For fun, I've created the reverse. Below you can play some famous audio and watch as 1D audio data is mapped to 2D pixel data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":532,"value":"html`

Neil Amrstrong saying \"one small step\"

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":555,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":808,"value":"md`Google used Hilbert curves in [exactly this way](https://medium.com/sidewalk-talk/s2-cells-and-space-filling-curves-keys-to-building-better-digital-map-tools-for-cities-a312aa5e2f59) on their maps product. It's been used to [visualize the human genome](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2677744/). I'm just scratching the surface.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"md`## Implementation\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1089,"value":"mutable playing = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"function createHilbertMapper({ order = 4, domain, size = 250 }) {\n const { points } = hilbert(order)\n .translateMinPointToOrigin()\n .scale(size);\n const mapToRange = d3\n .scaleLinear()\n .domain(domain)\n .range([0, points.length])\n .interpolate(d3.interpolateRound);\n\n const powScale = d3\n .scalePow()\n .exponent(Math.E)\n .domain([28, 153])\n .range([6, 14]);\n\n const logScale = d3.scaleLog().domain([28, 153]);\n const fillScale = d3.scaleSequential(d => d3.interpolateReds(logScale(d)));\n\n //const strokeScale = d3.scaleSequential(d => d3.interpolateReds(logScale(d)));\n\n return function hilbertMapper(frequency, amplitude) {\n const valueInRange = mapToRange(frequency);\n return {\n ...points[valueInRange],\n fill: fillScale(Math.abs(amplitude)),\n width: powScale(Math.abs(amplitude))\n //stroke: strokeScale(Math.abs(amplitude))\n };\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"getVectorForFrequency = createHilbertMapper({ domain: [0, 256] })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"hilbert = {\n // This makes a shape like this ==>\n // | |\n // |_ _|\n\n const baseHilbert = new Path()\n .addToTail(new Vector(0, 0))\n .addToTail(new Vector(0, 1))\n .addToTail(new Vector(1, 0))\n .addToTail(new Vector(0, -1));\n\n return function innerHilbert(order) {\n if (order === 1) {\n return baseHilbert;\n }\n const nextOrderDown = innerHilbert(order - 1).scale(0.5);\n\n // flip the first one counter-clockwise\n const upperLeft = nextOrderDown.rotate(-90);\n\n // move this down\n const bottomLeft = nextOrderDown.translate(new Vector(0, 1));\n\n // move this down and to the right\n const bottomRight = nextOrderDown.translate(new Vector(1, 1));\n\n // move this to the right and rotate clockwise\n const upperRight = nextOrderDown.translate(new Vector(1, 0)).rotate(90);\n\n return upperLeft\n .join(bottomLeft, \"head\", \"tail\")\n .join(bottomRight, \"tail\", \"tail\")\n .join(upperRight, \"tail\", \"head\");\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":501,"value":"renderData = {\n if (!playing) {\n return defaultSoundArr;\n }\n return {\n points: Array.from(FFT).map((amplitude, i) => {\n return getVectorForFrequency(i, amplitude);\n })\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1099,"value":"defaultSoundArr = {\n return {\n points: new Array(256).fill(0).map((amplitude, i) => {\n return getVectorForFrequency(i, amplitude);\n })\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"hilbertPoints = hilbert(order)\n .translateMinPointToOrigin()\n .scale(190)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":692,"value":"// taken from: https://paul.kinlan.me/waiting-for-an-element-to-be-created/\nfunction waitForElement(selector, i) {\n return new Promise(async function(resolve, reject) {\n if (i > 5) {\n reject(new Error('element not found'));\n }\n const element = document.querySelector(selector);\n\n if (element) {\n resolve(element);\n return;\n }\n\n setTimeout(() => resolve(waitForElement(selector, i + 1)), 50);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"import { makeDrawArea } from \"@zekenie/svg-pencil-area\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"import {\n Button,\n Checkbox,\n Toggle,\n Radio,\n Range,\n Select,\n Text,\n Textarea,\n Search,\n Table\n} from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":666,"value":"import {\n Path,\n Vector,\n renderPath,\n Group\n} from \"@zekenie/tiny-vector-graphics-library\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"