2b:null 2c:["$","title",null,{"children":"Procedural texturing w/ Perlin noise | Torben Jansen | Observable"}] 31:T598,function perlin(x, y, z) { const X = Math.floor(x) & 255, Y = Math.floor(y) & 255, Z = Math.floor(z) & 255; x -= Math.floor(x); y -= Math.floor(y); z -= Math.floor(z); const u = fade(x), v = fade(y), w = fade(z); const aaa = p[ p[ p[ X ] + Y ] + Z ], aab = p[ p[ p[ X ] + Y ] + Z + 1 ], aba = p[ p[ p[ X ] + Y + 1 ] + Z ], abb = p[ p[ p[ X ] + Y + 1 ] + Z + 1 ], baa = p[ p[ p[ X + 1 ] + Y ] + Z ], bab = p[ p[ p[ X + 1 ] + Y ] + Z + 1 ], bba = p[ p[ p[ X + 1 ] + Y + 1 ] + Z ], bbb = p[ p[ p[ X + 1 ] + Y + 1 ] + Z + 1 ]; return lerp ( w, lerp ( v, lerp( u, grad( aaa, x , y , z ), grad( baa, x - 1, y , z )), lerp( u, grad( aba, x , y - 1, z ), grad( bba, x - 1, y - 1, z ))), lerp ( v, lerp( u, grad( aab, x , y , z - 1 ), grad( bab, x - 1, y , z - 1 )), lerp( u, grad( abb, x , y - 1, z - 1 ), grad( bbb, x - 1, y - 1, z - 1 )))); }32:T426,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 ]33:[] 2f:{"id":"0dfa9ebd47f59bd2","slug":"procedural-texturing-w-perlin-noise","title":"Procedural texturing w/ Perlin noise","thumbnail":"b20b835b7019211ed71ae6271d7d23f56334fc49fed89601a07f18463f281ad5","access_level":"public","create_time":"$D2018-10-27T07:35:35.842Z","update_time":"$D2019-06-10T13:56:05.546Z","view_time":null,"first_public_time":"$D2018-10-28T03:07:15.814Z","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":1273,"publish_version":1273,"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":false,"trashed":false,"subscribed":null,"forks":6,"collection":{"id":"98ae616d2a8b76bf","slug":"generative-art","title":"Generative art","owner":{"id":"03836a98946da550","login":"toja","name":"Torben Jansen"}},"type":"notebook","body":{"title":"Procedural texturing w/ Perlin noise","cells":[{"id":724,"value":"md`# Procedural texturing w/ Perlin noise`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"md`[Perlin noise](https://en.wikipedia.org/wiki/Perlin_noise) is a type of gradient noise developed by Ken Perlin in 1983. It's a procedural texture primitive, used by visual effects artists to increase the appearance of realism in computer graphics. \n\nIn 1997, Perlin was awarded an Academy Award for Technical Achievement for creating the algorithm.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":202,"value":"texture = {\n const context = DOM.context2d(width, height, 1);\n context.putImageData(new ImageData(imageData, width, height), 0, 0);\n return context.canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":662,"value":"viewof octaves = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":970,"value":"md`\nIn this example a 3D perlin noise is used to generate a spherical texture. The texture is then applied to a sphere and displayed with THREE.js.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":841,"value":"function noise(row, column, [x, y, z]) {\n const n = fbm(octaves);\n const t = Math.abs(Math.cos(row * 7.5 / width + n(x, y, z)));\n return color(t).rgb();\n //return n(x * 8, y * 8, z * 8);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":856,"value":"colors = [\"#fdfbfa\", \"#D5DEC3\", \"#C2B4A4\", \"#869696\", \"#686064\", \"#5b4a46\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"ball = {\n while (true) {\n sphere.rotation.x += 0.002;\n sphere.rotation.y += 0.001;\n renderer.render(scene, camera);\n yield renderer.domElement;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":816,"value":"width = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"height = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":590,"value":"md`---\n\n### Texture generation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":191,"value":"imageData = {\n const data = new Uint8ClampedArray(width * height * 4);\n\n for (let row = 0; row < height; row++) {\n for (let column = 0; column < width; column++) {\n \n const [r, g, b] = noise(row, column, getSphereCoordinates(column / (width - 1), row / (height - 1)));\n const index = (column + row * width) * 4;\n data[index ] = r;\n data[index + 1] = g;\n data[index + 2] = b;\n data[index + 3] = 255;\n }\n }\n \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":65,"value":"function getSphereCoordinates(u, v) {\n \n const lon = (u * 360 - 180) * Math.PI / 180,\n lat = (v * 180 - 90) * Math.PI / 180;\n\n return [\n (Math.cos(lat) * Math.cos(lon) + 1) / 2,\n (Math.sin(lat) + 1) / 2,\n (Math.cos(lat) * Math.sin(lon) + 1) / 2\n ]\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"color = chroma.scale(colors).mode(\"lab\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":585,"value":"md`---\n### Perlin noise\n\nRef.: https://mrl.nyu.edu/~perlin/noise/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":69,"value":"function fbm(octaves) {\n\n return function (x, y, z) {\n\n let frequency = 1,\n amplitude = 1,\n persistence = 0.7,\n lacunarity = 2;\n\n let total = 0;\n\n for(let i = 0; i < octaves; i++) {\n total += perlin(x * frequency, y * frequency, z * frequency) * amplitude;\n amplitude *= persistence;\n frequency *= lacunarity;\n }\n return total;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":51,"value":"function grad(hash, x, y, z) {\n switch(hash & 0xF) {\n case 0x0: return x + y;\n case 0x1: return -x + y;\n case 0x2: return x - y;\n case 0x3: return -x - y;\n case 0x4: return x + z;\n case 0x5: return -x + z;\n case 0x6: return x - z;\n case 0x7: return -x - z;\n case 0x8: return y + z;\n case 0x9: return -y + z;\n case 0xA: return y - z;\n case 0xB: return -y - z;\n case 0xC: return y + x;\n case 0xD: return -y + z;\n case 0xE: return y - x;\n case 0xF: return -y - z;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"p = {\n const p = new Array(512);\n for (var i = 0; i < 256 ; i++) {\n p[256+i] = p[i] = permutation[i];\n }\n return p;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"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":23,"value":"function lerp(t, a, b) {\n return a + t * (b - a);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":552,"value":"md`---\n### three.js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":352,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0xffffff);\n scene.add(sphere, light, camera);\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":356,"value":"renderer = {\n const renderer = new THREE.WebGLRenderer({antialias: true});\n renderer.setSize(width, height);\n return renderer;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":335,"value":"camera = {\n const angle = 45,\n aspect = width / height,\n near = 0.1,\n far = 10000;\n const camera = new THREE.PerspectiveCamera(angle, aspect, near, far);\n return camera\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":315,"value":"light = {\n const light = new THREE.Group();\n const ambient = new THREE.AmbientLight(0x606060);\n const spot = new THREE.DirectionalLight(0xe0e0e0, 0.8);\n spot.position.set(90, 90, 50);\n light.add(ambient, spot)\n return light;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"sphere = {\n const radius = 75,\n segments = 32,\n rings = 32;\n \n const material = new THREE.MeshPhongMaterial(\n {\n emissive: new THREE.Color(\"rgb(7,3,5)\"),\n specular: new THREE.Color(\"rgb(64,64,64)\"),\n shininess: 60,\n map: textureMap,\n transparent: false\n }\n );\n\n const sphere = new THREE.Mesh();\n sphere.geometry = new THREE.SphereGeometry( radius, segments, rings);\n sphere.position.z = -200;\n sphere.material = material;\n \n return sphere;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":299,"value":"textureMap = {\n const texture = new THREE.DataTexture(\n new Uint8Array(imageData),\n width,\n height,\n THREE.RGBAFormat,\n THREE.UnsignedByteType,\n THREE.EquirectangularReflectionMapping\n );\n \n texture.unpackAlignment = 1;\n texture.needsUpdate = true;\n \n return texture;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":478,"value":"md`---\n### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"THREE = require('three')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":227,"value":"chroma = require(\"chroma-js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"