1d:{"title":"029 Map of Somewhere","cells":[{"id":0,"value":"md`# 029 Map of Somewhere\n\nBased on Varun Vachhar's [Noise Rings](https://github.com/storybookjs/shout-out-kit/blob/main/image-component/src/noise-rings.js).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"viewof randomize = Button(\"🎲 Randomize\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"viewof numOfIntervals = Range([2, 12], {\n value: 6,\n step: 1,\n label: md`Intervals`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"viewof resolution = Range([10, 200], {\n value: 170,\n step: 1,\n label: md`Resolution`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"viewof frequencyValue = Range([-10, 10], {\n value: -0.75,\n step: 0.125,\n label: md`Frequency`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"frequency = {\n if (frequencyValue === 0) return 1;\n if (frequencyValue < 0) return -1 / frequencyValue;\n\n return frequencyValue;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"viewof amplitude = Range([0, 1], {\n value: 1,\n step: 0.01,\n label: md`Amplitude`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"viewof margin = Range([0, 0.5], {\n value: 0.125,\n step: 0.125,\n label: md`Margin`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":171,"value":"viewof strokeWidth = Range([0.125, 10], {\n value: 1.75,\n step: 0.125,\n label: md`Stroke Width`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"viewof showGridLines = Toggle({ label: \"Show Grid Lines\", value: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"viewof numOfGridLines = Range([0, 10], {\n value: 6,\n step: 1,\n label: md`Number of Grid Lines`,\n disabled: !showGridLines\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof showNoiseSpace = Toggle({ label: \"Show Noise Space\", value: false })","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"aspectRatio = 1.6","pinned":false,"hidden":false,"mode":"ojs"},{"id":414,"value":"function placeLegend() {\n const legendMarginX = marginX * 2 + mapSize;\n const labelLengthRange = [32, 144];\n const op = 0.25;\n randomize;\n return `\n \n\n \n\n \n\n \n\n \n\n\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"function drawNoise() {\n let dotEls = \"\";\n const cellSize = mapSize / (resolution - 1);\n\n const r = 200 / resolution;\n noiseSpace.flat().forEach((p) => {\n const [u, v, n] = p;\n const cx = CSMath.lerp(0, mapSize, u);\n const cy = CSMath.lerp(0, mapSize, v);\n const o = CSMath.mapRange(n, bounds.lower, bounds.upper, 0, 1);\n\n dotEls += ``;\n });\n return dotEls;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"function drawIsoLines() {\n let paths = \"\";\n bands.forEach((d, idx) => {\n paths += ``;\n });\n\n return paths;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"$1f","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"function placeSymbols() {\n const markerMargin = mapSize / 20;\n randomize;\n return `\n \n\n \n\n \n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"height = Math.floor(width / aspectRatio)","pinned":false,"hidden":false,"mode":"ojs"},{"id":336,"value":"squareSize = Math.min(height, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"mapSize = squareSize - squareSize * margin - strokeWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"marginX = marginY + strokeWidth / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":329,"value":"marginY = (height - mapSize) / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"colors = ({\n bg: \"#fef4e0\",\n fg: \"#486b8b\",\n ac: \"#e25532\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"noiseSpace = CSMath.linspace(resolution, true).map((v) =>\n CSMath.linspace(resolution, true).map((u) => {\n const n = CSRandom.noise3D(u, v, randomize, frequency, amplitude);\n return [u, v, n * 0.5 + 0.5];\n })\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"noiseMap = noiseSpace.map((p) => p.map((attr) => attr[2]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"bounds = {\n const noises = noiseMap.flat();\n const lower = Math.min(...noises);\n const upper = Math.max(...noises);\n\n return {\n lower,\n upper\n };\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"bands = {\n const intervals = CSMath.linspace(numOfIntervals);\n\n const isoLines = intervals\n .map((weight, idx) => {\n if (idx > 0) {\n const min = intervals[idx - 1];\n const max = intervals[idx];\n\n const lowerBound = CSMath.mapRange(\n min,\n 0,\n 1,\n bounds.lower,\n bounds.upper\n );\n const upperBound = CSMath.mapRange(\n max,\n 0,\n 1,\n bounds.lower,\n bounds.upper\n );\n\n const band = MarchingSquares.isoBands(\n noiseMap,\n lowerBound,\n upperBound - lowerBound\n );\n\n return band.map((p) =>\n p.map(([x, y]) => [\n CSMath.mapRange(x, 0, resolution - 1, 0, mapSize),\n CSMath.mapRange(y, 0, resolution - 1, 0, mapSize)\n ])\n );\n }\n })\n .filter((arr) => arr);\n\n return CSPenplot.pathsToSVGPaths(isoLines, { mapSize, mapSize, units: \"px\" });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"CSUtil = require('https://bundle.run/canvas-sketch-util@1.10.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"CSRandom = CSUtil.random","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"CSMath = CSUtil.math","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"CSPenplot = CSUtil.penplot","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"MarchingSquares = import(\n \"https://unpkg.com/marchingsquares@1.3.3/dist/marchingsquares-esm.js?module\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"import { Toggle, Range, Button } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":480,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":486,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W20","stdlib":"1"}