31:[] 2f:{"title":"Try Perlin Noise","cells":[{"id":0,"value":"md`# Try Perlin Noise`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"md`## 1D Random Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"{\n const ctx = DOM.context2d(SIZE, SIZE);\n ctx.beginPath();\n for (let x = 0; x < SIZE; x++) {\n let y = Math.ceil(Math.random() * SIZE);\n ctx.lineTo(x, y);\n }\n ctx.stroke();\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":97,"value":"md`\n---\n## 1D Perlin Noise`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"{\n const ctx = DOM.context2d(SIZE, SIZE);\n ctx.beginPath();\n for (let x = 0; x < SIZE; x++) {\n const scale = 0.01;\n const value = perlin2(x * scale, 1);\n const y = Math.ceil((value + 1) / 2 * SIZE);\n ctx.lineTo(x, y);\n }\n ctx.stroke();\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`\n---\n## Multiple 1D Perlin Noise`","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"{\n const ctx = DOM.context2d(SIZE, SIZE);\n ctx.beginPath();\n for (let x = 0; x < SIZE; x++) {\n let frequency = 0.02;\n let amplitude = 1;\n let totalAmp = 1;\n let value = 0;\n for (let i = 0; i < 16; i++) {\n value += perlin2(x * frequency, 1) * amplitude;\n totalAmp += amplitude;\n amplitude /= 2;\n frequency *= 2;\n }\n value /= totalAmp;\n let y = Math.ceil((value + 1) / 2 * SIZE);\n ctx.lineTo(x, y);\n }\n ctx.stroke(); \n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"md`\n---\n## Animated 1D Perlin Noise (2D)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"{\n const ctx = DOM.context2d(SIZE, SIZE);\n let frame = 0;\n while (true) {\n ctx.clearRect(0, 0, SIZE, SIZE);\n ctx.beginPath();\n for (let x = 0; x < SIZE; x++) {\n let scale = 0.02;\n let value = perlin2(x * scale, frame * scale);\n let y = Math.ceil((value + 1) / 2 * SIZE);\n ctx.lineTo(x, y);\n }\n ctx.stroke();\n frame++;\n yield ctx.canvas;\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`\n---\n## 2D Perlin Noise`","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"{\n const ctx = DOM.context2d(SIZE, SIZE);\n const image = ctx.createImageData(ctx.canvas.width, ctx.canvas.height);\n for (let x = 0; x < ctx.canvas.width; x++) {\n for (let y = 0; y < ctx.canvas.height; y++) {\n let opacity = 0;\n let freq = 0.005;\n let amp = 1;\n let totalAmp = 0;\n for (let i = 0; i < 16; i++) {\n opacity += perlin2(x * freq, y * freq) * amp;\n amp *= 0.5;\n totalAmp += amp;\n freq *= 2;\n }\n opacity /= totalAmp;\n opacity = Math.ceil((opacity + 1) / 2 * 255)\n draw(image, x, y, [0, 0, 0, opacity]);\n }\n }\n ctx.putImageData(image, 0, 0);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"{\n const ctx = DOM.context2d(SIZE, SIZE);\n const image = ctx.createImageData(ctx.canvas.width, ctx.canvas.height);\n for (let x = 0; x < ctx.canvas.width; x++) {\n for (let y = 0; y < ctx.canvas.height; y++) {\n let opacity = 0;\n let freq = 0.005;\n let amp = 1;\n let totalAmp = 0;\n for (let i = 0; i < 16; i++) {\n opacity += Math.abs(perlin2(x * freq, y * freq) * amp);\n amp /= 2;\n totalAmp += amp;\n freq *= 2;\n }\n opacity /= totalAmp;\n opacity = Math.sin((x / SIZE + opacity) * Math.PI * 2)\n opacity = Math.ceil((opacity + 1) / 2 * 255)\n draw(image, x, y, [0, 0, 0, opacity]);\n }\n }\n ctx.putImageData(image, 0, 0);\n return ctx.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"function draw(image, x, y, color) {\n if (y >= image.height || x >= image.width) return;\n let offset = (image.height * y + x) * 4;\n image.data[offset] = color[0];\n image.data[offset + 1] = color[1];\n image.data[offset + 2] = color[2];\n image.data[offset + 3] = color[3] || 255;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"SIZE = 500","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import { perlin2, perlin3 } from '@mbostock/perlin-noise'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}