2a:null 2b:["$","title",null,{"children":"Perlin Noise loop | Forrest O. | Observable"}] 30:T403,// const P = new Uint8Array(256); // for (let i = 0; i < 256; ++i) P[i] = i; // d3.shuffle(P); P = Uint8Array.of(151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180)31:[] 2e:{"id":"0689b12a829ab494","slug":"perlin-noise-loop","title":"Perlin Noise loop","thumbnail":"b13fe6ae3e712d35561a0948ab59462340ecc1661bc6b978e3f095000d73bab7","access_level":"public","create_time":"$D2020-12-27T10:45:56.475Z","update_time":"$D2020-12-28T10:52:38.609Z","view_time":null,"first_public_time":"$D2021-01-04T00:38:54.022Z","has_unpublished_edits":null,"fork":{"id":"316b246fa1642db4","slug":"perlin-noise","title":"Perlin Noise","owner":{"id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock"}},"stars":2,"starred":false,"owner":{"type":"team","id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":"starter_2024"},"version":396,"publish_version":396,"role":null,"authored":false,"authors":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null}],"members":[{"type":"individual","id":"b16dd1586d4d1422","login":"forresto","name":"Forrest O.","avatar_url":"https://avatars-next.observableusercontent.com/c22671040121cb9b9d22913e2eb0ffc4d65d3e535cda1133d6655f1d63b32e3f","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"c5136fc52eabeb2f","slug":"animation","title":"animation","owner":{"id":"f9abb147dc0e6dcd","login":"forresto","name":"Forrest O."}},"type":"notebook","body":{"titling":"auto","title":"Perlin Noise loop","cells":[{"id":0,"value":"md`# Perlin Noise loop\n\nLoopable paths through 2d/3d Perlin noise. \n\nBased on Ken Perlin’s [improved reference implementation](http://mrl.nyu.edu/~perlin/noise/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"viewof octaves = {\n const form = html``;\n form.i.oninput = () => form.o.value = `${form.value = form.i.valueAsNumber} octaves`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"demo = {\n const context = DOM.context2d(width, height, 1);\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"loopTime = 10000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"frame = {\n const TAU = Math.PI * 2;\n const pixel = 10;\n const zoom = 128 + Math.cos((TAU * now) / loopTime) * 16;\n const cx = 500 + Math.sin((TAU * now) / loopTime) * .125;\n const cy = 500 + Math.cos((TAU * now) / loopTime) * .125;\n // const cx = 500;\n // const cy = 500;\n const z = Math.sin((TAU * now) / loopTime);\n // const z = 0;\n const context = demo.getContext('2d');\n for (let y = 0; y < height; y += pixel) {\n for (let x = 0; x < width; x += pixel) {\n const grey =\n (demoNoise3(\n cx + (x - width / 2) / zoom,\n cy + (y - height / 2) / zoom,\n z\n ) +\n 1) *\n 128;\n context.fillStyle = `rgb(${grey}, ${grey}, ${grey})`;\n context.fillRect(x, y, pixel, pixel);\n }\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"demoNoise3 = makeNoise3(octaves)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"makeNoise3 = octaves => octave(perlin3, octaves)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"function perlin3(x, y, z) {\n const xi = Math.floor(x), yi = Math.floor(y), zi = Math.floor(z);\n const X = xi & 255, Y = yi & 255, Z = zi & 255;\n const u = fade(x -= xi), v = fade(y -= yi), w = fade(z -= zi);\n const A = p[X] + Y, AA = p[A] + Z, AB = p[A + 1] + Z;\n const B = p[X + 1] + Y, BA = p[B] + Z, BB = p[B + 1] + Z;\n return lerp(\n w,\n lerp(\n v,\n lerp(u, grad3(p[AA], x, y, z), grad3(p[BA], x - 1, y, z)),\n lerp(u, grad3(p[AB], x, y - 1, z), grad3(p[BB], x - 1, y - 1, z))\n ),\n lerp(\n v,\n lerp(u, grad3(p[AA + 1], x, y, z - 1), grad3(p[BA + 1], x - 1, y, z - 1)),\n lerp(u, grad3(p[AB + 1], x, y - 1, z - 1), grad3(p[BB + 1], x - 1, y - 1, z - 1))\n )\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":340,"value":"makeNoise2 = octaves => octave(perlin2, octaves)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":162,"value":"function perlin2(x, y) {\n const xi = Math.floor(x), yi = Math.floor(y);\n const X = xi & 255, Y = yi & 255;\n const u = fade(x -= xi), v = fade(y -= yi);\n const A = p[X] + Y, B = p[X + 1] + Y;\n return lerp(\n v,\n lerp(u, grad2(p[A], x, y), grad2(p[B], x - 1, y)),\n lerp(u, grad2(p[A + 1], x, y - 1), grad2(p[B + 1], x - 1, y - 1))\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"function octave(noise, octaves) {\n return function(x, y, z) {\n let total = 0;\n let frequency = 1;\n let amplitude = 1;\n let value = 0;\n for (let i = 0; i < octaves; ++i) {\n value += noise(x * frequency, y * frequency, z * frequency) * amplitude;\n total += amplitude;\n amplitude *= 0.5;\n frequency *= 2;\n }\n return value / total;\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"function grad3(i, x, y, z) {\n const h = i & 15;\n const u = h < 8 ? x : y;\n const v = h < 4 ? y : h === 12 || h === 14 ? x : z;\n return (h & 1 ? -u : u) + (h & 2 ? -v : v);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":152,"value":"function grad2(i, x, y) {\n const v = i & 1 ? y : x;\n return i & 2 ? -v : v;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"function fade(t) {\n return t * t * t * (t * (t * 6 - 15) + 10);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"function lerp(t, a, b) {\n return a + t * (b - a);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"p = {\n const p = new Uint8Array(512);\n for (let i = 0; i < 256; ++i) p[i] = p[i + 256] = P[i];\n return p;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1"}} 2f:"$2e:body"