30:[] 2e:{"title":"Noise Octaves","cells":[{"id":0,"value":"# Noise Octaves\n## Learning Notes","pinned":false,"hidden":false,"mode":"md"},{"id":634,"value":"Noise octave is a method of adding depth (or texture) to a noise space.\nThe effect is achieved by layering a base noise layer with its doubling frequencies (octaves) and halving amplitudes with each layer.\nThen, all layers are added up, and the amplitude is normalized.","pinned":false,"hidden":false,"mode":"md"},{"id":657,"value":"If you are unable to grasp the idea, try the preview using a Sine wave.","pinned":false,"hidden":false,"mode":"md"},{"id":564,"value":"viewof previewWave = Inputs.radio([\"Noise\", \"Sine wave\"], {\n label: \"Preview using\",\n value: \"Noise\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"

\n ${drawLayers(layers)}\n

→

\n ${drawMergedLayer(layersMerged)}\n

","pinned":false,"hidden":false,"mode":"html"},{"id":325,"value":"viewof octaves1 = Inputs.range([0, 7], { label: \"Octave\", step: 1, value: 3 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"viewof noiseScale1 = Inputs.range([-10, 0], {\n label: \"Base Frequency (log2)\",\n step: 1 / 8,\n value: isNoisePreview() ? -8 : -6.3333\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"viewof randomize1 = Inputs.button(\"Randomize\", { disabled: !isNoisePreview() })","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"## Effect of Octaves on a 2D Noise","pinned":false,"hidden":false,"mode":"md"},{"id":4,"value":"canvas = {\n const context = DOM.context2d(width, height);\n\n drawNoise(context, {\n width,\n height,\n octaves,\n scale\n });\n\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":604,"value":"viewof octaves = {\n randomize;\n return Scrubber(\n Array.from({ length: 8 }, (_, i) => i),\n {\n delay: 1500,\n format: (i) => (i === 0 ? \"Base noise\" : `Octave ${i}`)\n // alternate: true\n }\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"viewof noiseScale = Inputs.range([-10, 0], {\n label: \"Base Frequency (log2)\",\n step: 1 / 8,\n value: -8\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":240,"value":"viewof randomize = Inputs.button(\"Randomize\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"## References\n\n- [Octaval flow fields](https://charlottedann.com/article/magical-vector-fields#octaval-flow-fields) by Charlotte Dann\n- [Simplex noise exerciser](https://observablehq.com/@esperanc/simplex-noise-exerciser) by Claudio Esperança\n- [Perlin Noise](https://observablehq.com/@mbostock/perlin-noise) by Mike Bostock","pinned":false,"hidden":false,"mode":"md"},{"id":592,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":471,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":536,"value":"### Single Dimension Example","pinned":false,"hidden":false,"mode":"md"},{"id":287,"value":"function drawLayers(data, { width = 400, strokeWidth = 0.75 } = {}) {\n return Plot.plot({\n width,\n y: { domain: [-1, 1] },\n x: {\n axis: false,\n grid: true\n },\n facet: {\n // marginRight: 0\n },\n fy: {\n padding: 0.125,\n label: \"Layer\",\n reverse: true\n },\n marks: [\n Plot.frame({ stroke: \"lightgray\" }),\n Plot.line(data, {\n x: \"x\",\n y: \"value\",\n fy: \"layer\",\n strokeWidth\n })\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"function drawMergedLayer(data, { width = 400, strokeWidth = 0.75 } = {}) {\n return Plot.plot({\n width,\n height: width / 2,\n y: { domain: [-1, 1] },\n x: {\n axis: false,\n grid: true\n },\n marks: [\n Plot.frame({ stroke: \"lightgray\" }),\n Plot.line(data, {\n x: \"x\",\n y: \"value\",\n strokeWidth\n })\n ]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":582,"value":"function isNoisePreview() {\n return previewWave === \"Noise\";\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"layers = {\n const scale = 2 ** noiseScale1;\n const fn = isNoisePreview() ? noise2DA : Math.sin;\n return Array.from({ length: width }).flatMap((_, i) => {\n const x = i * scale;\n\n let totalAmplitude = 0;\n let frequency = 1;\n let amplitude = 1;\n const layers = Array.from({ length: octaves1 + 1 }).map((_, l) => {\n const value = fn(x * frequency, 0) * amplitude;\n\n totalAmplitude += amplitude;\n amplitude *= 0.5; // Halves amplitude in each layers\n frequency *= 2; // Doubles the amplitude in each layers\n return {\n layer: l,\n x: i,\n value\n };\n });\n\n return layers.map((obj) => ({ ...obj, totalAmplitude }));\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":414,"value":"layersMerged = d3\n .groups(layers, (d) => d.x)\n .map(([_, layers]) => {\n const { totalAmplitude } = layers[0];\n const value = sumBy(layers, (d) => d.value) / totalAmplitude;\n return {\n ...layers[0],\n value\n };\n })","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"noise2DA = {\n const prng = alea(randomize1);\n return simplex.createNoise2D(prng);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"### Two Dimension Example","pinned":false,"hidden":false,"mode":"md"},{"id":297,"value":"scale = 2 ** noiseScale","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"function drawNoise(\n context,\n { octaves = 1, width, height, scale = 2 ** -5 } = {}\n) {\n const aspectRatio = height / width;\n\n const image = context.createImageData(width * dpr, height * dpr);\n\n const imageDataWidth = width * dpr * 4;\n for (let i = 0; i < image.data.length; i += 4) {\n const x = (i % imageDataWidth) / 4;\n const y = Math.floor(i / imageDataWidth / 2);\n\n const xScale = scale;\n const yScale = scale / aspectRatio;\n const noiseFn = octave(noise2DB, octaves + 1);\n const noise = noiseFn(x * xScale, y * yScale);\n const u = 0.5 + noise * 0.5;\n const v = Math.trunc(math.lerp(0, 255, u));\n\n image.data[i + 0] = v; // R\n image.data[i + 1] = v; // G\n image.data[i + 2] = v; // B\n image.data[i + 3] = 255; // Alpha\n }\n\n context.putImageData(image, 0, 0);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"// Based on Mike Bostock's https://observablehq.com/@mbostock/perlin-noise#octave\nfunction octave(noiseFn, octaves) {\n return function (x, y) {\n let total = 0;\n let frequency = 1;\n let amplitude = 1;\n let value = 0;\n\n for (let i = 0; i < octaves; ++i) {\n value += noiseFn(x * frequency, y * frequency) * amplitude;\n\n total += amplitude;\n amplitude *= 0.5;\n frequency *= 2;\n }\n\n return value / total;\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":140,"value":"dpr = window.devicePixelRatio","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"aspectRatio = 9 / 16","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = Math.floor(width * aspectRatio)","pinned":true,"hidden":false,"mode":"ojs"},{"id":236,"value":"noise2DB = {\n const prng = alea(randomize);\n return simplex.createNoise2D(prng);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":476,"value":"### Utilities","pinned":false,"hidden":false,"mode":"md"},{"id":418,"value":"// Source: https://youmightnotneed.com/lodash/#sumBy\nsumBy = (arr, func) => arr.reduce((acc, item) => acc + func(item), 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":481,"value":"### CSS","pinned":false,"hidden":false,"mode":"md"},{"id":442,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":469,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":134,"value":"import { CSMath as math } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":265,"value":"simplex = import(\"https://cdn.jsdelivr.net/npm/simplex-noise@4.0.1/+esm\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":269,"value":"alea = (await import(\"https://cdn.jsdelivr.net/npm/alea@1.0.1/+esm\")).default","pinned":false,"hidden":false,"mode":"ojs"},{"id":598,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":669,"value":"import {footer} from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":670,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":674,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}