2b:null 2c:["$","title",null,{"children":"Distorting sphere with cyclic perlin noise | sw1227 | Observable"}] 31:[] 2f:{"id":"da3268e71d3c862b","slug":"distorting-sphere-with-cyclic-perlin-noise","title":"Distorting sphere with cyclic perlin noise","thumbnail":"e33a3dd750d8436bf2a6298cc503b00245d1c61199be27183ccd9b0364bb493d","access_level":"public","create_time":"$D2020-03-08T07:55:47.074Z","update_time":"$D2020-03-08T08:46:52.176Z","view_time":null,"first_public_time":"$D2020-03-08T08:47:07.459Z","fork":false,"stars":9,"starred":false,"owner":{"type":"team","id":"06475ae5027cde36","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":"starter_2024"},"version":146,"publish_version":146,"role":null,"authored":false,"authors":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null}],"members":[{"type":"individual","id":"4a648b0bd17e2c08","login":"sw1227","name":"sw1227","avatar_url":"https://avatars-next.observableusercontent.com/3e09ff2c49317e618eedc394f3b33dbb5c952acf0d9654683424e681e7857f8c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":4,"collection":{"id":"038b5c6aee569a25","slug":"3d","title":"3D","owner":{"id":"06475ae5027cde36","login":"sw1227","name":"sw1227"}},"type":"notebook","body":{"title":"Distorting sphere with cyclic perlin noise","cells":[{"id":0,"value":"md`# Distorting sphere with cyclic perlin noise\nSuppose you want to generate an asteroid-like (or potato-like) shape by distorting a sphere. Although perlin noise can be used for random terrain generation, things are not so straightforward in this case, due to the cyclic nature of spheres.\n\nI found [an article](https://note.com/deconbatch/n/nc14219bfacc6?magazine_key=m5512019b8626) on how to draw a distorted circle using perlin noise. The idea is that, given 2D contiunous noise function ${tex`\\operatorname{noise}(x, y)`}, use noise values along a circular trajectory (i.e. use ${tex`\\operatorname{noise}(r\\operatorname{cos} \\theta, r\\operatorname{sin} \\theta )`}).\n\nYou can use this idea for spheres too, just by using 3D noise function ${tex`\\operatorname{noise} (x, y, z)`} and equations of spherical coordinate system.\n\nIn this notebook, a sphere is distorted in that way and visualized with Three.js.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"viewof scale = {\n const form = html`\n`;\n form.i.oninput = () => form.o.value = `noise scale = ${form.value = form.i.valueAsNumber}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"viewof coeff = {\n const form = html`\n`;\n form.i.oninput = () => form.o.value = `noise weight = ${form.value = form.i.valueAsNumber}`;\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"{\n const renderer = new THREE.WebGLRenderer({antialias: true});\n const controls = new THREE.OrbitControls(camera, renderer.domElement);\n invalidation.then(() => (controls.dispose(), renderer.dispose()));\n renderer.setSize(width, height);\n renderer.setPixelRatio(devicePixelRatio);\n controls.addEventListener(\"change\", () => renderer.render(scene, camera));\n renderer.render(scene, camera);\n return renderer.domElement;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"viewof material = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"materials = ({\n Normal: new THREE.MeshNormalMaterial({\n side: THREE.DoubleSide,\n }),\n Wireframe: new THREE.MeshBasicMaterial({\n color: 0x22ff55,\n wireframe: true,\n depthWrite: false,\n side: THREE.DoubleSide,\n blending: THREE.AdditiveBlending\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"position = (u, v, r) => {\n const spherePoint = [\n r * Math.cos(v) * Math.cos(u),\n r * Math.cos(v) * Math.sin(u),\n r * Math.sin(v)\n ];\n // Noise value at this point on sphere\n const offset = perlin3(...spherePoint.map(d => d*scale));\n return new THREE.Vector3(\n ...spherePoint.map((d, i) => d * (1 + coeff * offset))\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"sphere = {\n const meshes = [];\n\n const du = Math.PI / 30;\n const dv = Math.PI / 30;\n d3.range(0, 2*Math.PI, du).forEach(u => {\n d3.range(-Math.PI/2, Math.PI/2, dv).forEach(v => {\n const param = [\n {u: u, v: v },\n {u: u+du, v: v },\n {u: u+du, v: v+dv},\n {u: u, v: v+dv}\n ];\n\n const r = 1;\n meshes.push(rect(\n ...param.map(p => position(p.u, p.v, r)),\n materials[material]\n ));\n });\n });\n\n return meshes;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"// Make a Plane mesh with specified Material\nrect = (v1, v2, v3, v4, material) => {\n const planeGeometry = new THREE.Geometry();\n // add vertices\n [v1, v2, v3, v4].forEach(v => planeGeometry.vertices.push(v));\n // add faces\n planeGeometry.faces.push(new THREE.Face3(0, 1, 2));\n planeGeometry.faces.push(new THREE.Face3(2, 3, 0));\n planeGeometry.computeFaceNormals();\n // mesh\n const plane = new THREE.Mesh( planeGeometry, material );\n return plane;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"scene = {\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x202020);\n sphere.forEach(m => scene.add(m));\n return scene;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"camera = {\n const fov = 45;\n const aspect = width / height;\n const near = 0.1;\n const far = 1000;\n const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);\n camera.position.set(5, 2, 2)\n camera.lookAt(new THREE.Vector3(0, 0, 0));\n return camera;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"md`## imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"import {perlin3} from \"@mbostock/perlin-noise\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"THREE = {\n const THREE = window.THREE = await require(\"three@0.99.0/build/three.min.js\");\n await require(\"three@0.99.0/examples/js/controls/OrbitControls.js\").catch(() => {});\n return THREE;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"