2b:null 2c:["$","title",null,{"children":"Tileable Perlin noise | Torben Jansen | Observable"}] 31:T665,function perlin3(x, y, z, px, py, pz) { // Integer part of x, y, z; let xi = Math.floor(x); let yi = Math.floor(y); let zi = Math.floor(z); // Fractional part of x, y, z let xf = x - xi; let yf = y - yi; let zf = z - zi; // Wrap to 0..px-1 and wrap to 0..255 let xi1 = (px ? ( xi + 1 ) % px : xi + 1) & 0xff; let yi1 = (py ? ( yi + 1 ) % py : yi + 1) & 0xff; let zi1 = (pz ? ( zi + 1 ) % pz : zi + 1) & 0xff; xi = (px ? xi % px : xi) & 0xff; yi = (py ? yi % py : yi) & 0xff; zi = (pz ? zi % pz : zi) & 0xff; let r = fade(zf); let t = fade(yf); let s = fade(xf); let A = p[yi + p[zi ]]; let B = p[yi + p[zi1]]; let C = p[yi1 + p[zi ]]; let D = p[yi1 + p[zi1]]; return lerp(s, lerp(t, lerp(r, grad3(p[xi + A], xf, yf, zf), grad3(p[xi + B], xf, yf, zf - 1) ), lerp(r, grad3(p[xi + C], xf, yf - 1, zf), grad3(p[xi + D], xf, yf - 1, zf - 1) ) ), lerp(t, lerp(r, grad3(p[xi1 + A], xf - 1, yf, zf), grad3(p[xi1 + B], xf - 1, yf, zf - 1) ), lerp(r, grad3(p[xi1 + C], xf - 1, yf - 1, zf), grad3(p[xi1 + D], xf - 1, yf - 1, zf - 1) ) ) ); }32:Tc61,function perlin4(x, y, z, w, px, py, pz, pw) { // Integer part of x, y, z, w let xi = Math.floor(x); let yi = Math.floor(y); let zi = Math.floor(z); let wi = Math.floor(w); // Fractional part of x, y, z, w let xf = x - xi; let yf = y - yi; let zf = z - zi; let wf = w - wi; // Wrap to 0..px-1 and wrap to 0..255 let xi1 = (px ? (xi + 1) % px : xi + 1) & 0xff; let yi1 = (py ? (yi + 1) % py : yi + 1) & 0xff; let zi1 = (pz ? (zi + 1) % pz : zi + 1) & 0xff; let wi1 = (pw ? (wi + 1) % pw : wi + 1) & 0xff; xi = (px ? xi % px : xi) & 0xff; yi = (py ? yi % py : yi) & 0xff; zi = (pz ? zi % pz : zi) & 0xff; wi = (pw ? wi % pw : wi) & 0xff; let q = fade(wf); let r = fade(zf); let t = fade(yf); let s = fade(xf); let A = p[zi + p[wi]]; let B = p[zi + p[wi1]]; let C = p[zi1 + p[wi]]; let D = p[zi1 + p[wi1]]; let A1 = p[yi + A], A2 = p[yi1 + A]; let B1 = p[yi + B], B2 = p[yi1 + B]; let C1 = p[yi + C], C2 = p[yi1 + C]; let D1 = p[yi + D], D2 = p[yi1 + D]; return lerp(s, lerp(t, lerp(r, lerp(q, grad4(p[xi + A1], xf, yf, zf, wf), grad4(p[xi + B1], xf, yf, zf, wf - 1) ), lerp(q, grad4(p[xi + C1], xf, yf, zf - 1, wf), grad4(p[xi + D1], xf, yf, zf - 1, wf - 1) ) ), lerp(r, lerp(q, grad4(p[xi + A2], xf, yf - 1, zf, wf), grad4(p[xi + B2], xf, yf - 1, zf, wf - 1) ), lerp(q, grad4(p[xi + C2], xf, yf - 1, zf - 1, wf), grad4(p[xi + D2], xf, yf - 1, zf - 1, wf - 1) ) ) ), lerp(t, lerp(r, lerp(q, grad4(p[xi1 + A1], xf - 1, yf, zf, wf), grad4(p[xi1 + B1], xf - 1, yf, zf, wf - 1) ), lerp(q, grad4(p[xi1 + C1], xf - 1, yf, zf - 1, wf), grad4(p[xi1 + D1], xf - 1, yf, zf - 1, wf - 1) ) ), lerp(r, lerp(q, grad4(p[xi1 + A2], xf - 1, yf - 1, zf, wf), grad4(p[xi1 + B2], xf - 1, yf - 1, zf, wf - 1) ), lerp(q, grad4(p[xi1 + C2], xf - 1, yf - 1, zf - 1, wf), grad4(p[xi1 + D2], xf - 1, yf - 1, zf - 1, wf - 1) ) ) ) ); }33:T498,p = { const permutation = [ 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 ]; // avoid overflow const p = new Uint8Array(512); for (let i = 0; i < 256 ; i++) { p[i] = p[256 + i] = permutation[i]; } return p }34:[] 2f:{"id":"ec1a61b655573cec","slug":"tileable-perlin-noise","title":"Tileable Perlin noise","thumbnail":"2b921b79615250816657350572477e1e281824d7b6a50a7b53fe17c6f727639e","access_level":"public","create_time":"$D2019-11-08T19:54:52.716Z","update_time":"$D2019-11-27T06:35:29.786Z","view_time":null,"first_public_time":"$D2019-11-08T21:42:11.410Z","fork":false,"stars":13,"starred":false,"owner":{"type":"team","id":"03836a98946da550","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":"starter_2024"},"version":265,"publish_version":265,"role":null,"authored":false,"authors":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null}],"members":[{"type":"individual","id":"9334261743951ef0","login":"toja","name":"Torben Jansen","avatar_url":"https://avatars-next.observableusercontent.com/f79c27ca86680a3a399f6eb78b22436d6dd665b49ad284ba1ccfb405bfc89fe0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Tileable Perlin noise","cells":[{"id":0,"value":"md`# Tileable Perlin noise`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":64,"value":"{\n const textures = [texture2, texture3, texture4]\n const context = DOM.context2d(size * 3, size * 2, 1);\n const pattern = context.createPattern(textures[dimensions], 'repeat');\n context.fillStyle = pattern;\n context.fillRect(0, 0, 800, 600);\n return context.canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":153,"value":"viewof dimensions = {\n const form = html`\n\n`\n form.oninput = () => form.value = +form.dimensions.value;\n form.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":103,"value":"md`\nBased on Stefan Gustavson's implementation: https://github.com/stegu/perlin-noise\n\n*To do: 1-dimensional noise(?), octaves, examples, documentation*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":94,"value":"md`---\n## Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":116,"value":"function perlin2(x, y, px, py) {\n \n // Integer part of x, y\n let xi = Math.floor(x); \n let yi = Math.floor(y);\n \n // Fractional part of x, y\n let xf = x - xi;\n let yf = y - yi;\n \n // Wrap to 0..px-1 and wrap to 0..255\n let xi1 = (px ? ( xi + 1 ) % px : xi + 1) & 0xff;\n let yi1 = (py ? ( yi + 1 ) % py : yi + 1) & 0xff;\n \n xi = (px ? xi % px : xi) & 0xff;\n yi = (py ? yi % py : yi) & 0xff;\n\n let s = fade(xf);\n let t = fade(yf);\n\n return lerp(s,\n lerp(t,\n grad2(p[xi + p[yi]], xf, yf),\n grad2(p[xi + p[yi1]], xf, yf - 1)\n ),\n lerp(t,\n grad2(p[xi1 + p[yi]], xf - 1, yf),\n grad2(p[xi1 + p[yi1]], xf - 1, yf - 1)\n )\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":134,"value":"texture2 = {\n const context = DOM.context2d(size, size, 1);\n const image = context.createImageData(size, size);\n \n const f = 1 / 64;\n const px = size * f;\n const py = size * f;\n \n for (let y = 0, i = 0; y < size; ++y) {\n for (let x = 0; x < size; ++x, i += 4) {\n const n = perlin2(x * f, y * f, px, py);\n image.data[i + 3] = (n + 1) * 128;\n }\n }\n \n context.putImageData(image, 0, 0);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"texture3 = {\n const q = 8;\n const f = 1 / 16;\n \n const px = size / q * f;\n const py = size / q * f;\n const pz = loop && 4;\n \n const context = DOM.context2d(size, size);\n \n while(true) { \n context.clearRect(0, 0, size, size); \n const t = Date.now() / 1000;\n for (let x = 0, r = 0; x < size + 1; x += q, ++r) {\n for (let y = 0, c = 0; y < size + 1; y += q, ++c) {\n \n const rad = perlin3(c * f, r * f, t, px, py, pz) * Math.PI * 4;\n const X = q * Math.cos(rad);\n const Y = q * Math.sin(rad);\n \n context.beginPath()\n context.moveTo(x, y);\n context.lineTo(x + X, y + Y);\n context.stroke();\n }\n }\n yield context.canvas;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"viewof loop = {\n const form = html`\n\n `\n form.oninput = () => form.value = form.loop.checked;\n form.value = form.loop.checked;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":213,"value":"texture4 = {\n \n const { cos, sin } = Math;\n const pi2 = Math.PI * 2;\n \n const context = DOM.context2d(size, size, 1);\n const image = context.createImageData(size, size);\n \n for (let y = 0, i = 0; y < size; ++y) {\n for (let x = 0; x < size; ++x, i += 4) {\n \n const s = x / size;\n const t = y / size;\n\n const nx = cos(s * pi2);\n const ny = cos(t * pi2);\n const nz = sin(s * pi2);\n const nw = sin(t * pi2);\n \n image.data[i + 3] = (perlin4(nx, ny, nz, nw) + 1) * 128;\n }\n }\n \n context.putImageData(image, 0, 0);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":123,"value":"function grad2(hash, x, y) {\n const h = hash & 7; // Convert low 3 bits of hash code\n const u = h < 4 ? x : y; // into 8 simple gradient directions,\n const v = h < 4 ? y : x; // and compute the dot product with (x,y).\n return (h & 1 ? -u : u) + (h & 2 ? -v : v);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"function grad3(hash, x, y, z) {\n const h = hash & 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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":172,"value":"function grad4(hash, x, y, z, t) {\n const h = hash & 31; // Convert low 5 bits of hash code into 32 simple\n const u = h < 24 ? x : y; // gradient directions, and compute dot product.\n const v = h < 16 ? y : z;\n const w = h < 8 ? z : t;\n return (h & 1 ? -u : u) + ( h & 2 ? -v : v) + (h & 4 ? -w : w);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"function fade(t) {\n return t * t * t * (t * (t * 6 - 15) + 10);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"function lerp(t, a, b) {\n return a + t * (b - a);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":70,"value":"size = 256;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"