2b:null 2c:["$","title",null,{"children":"Demo of Neural Network | Chuncheng | Observable"}] 31:[] 2f:{"id":"79ecfb0c7c706d49","slug":"demo-of-neural-network","title":"Demo of Neural Network","thumbnail":"052e9b69a0df559272b41b59cf7690d6dcc9d48db5b6826aae21fb44f7c6cf1f","access_level":"public","create_time":"$D2021-10-14T13:46:11.920Z","update_time":"$D2023-01-22T03:29:10.469Z","view_time":null,"first_public_time":"$D2021-10-14T15:08:27.303Z","fork":{"id":"ab682d19bec9f569","slug":"regl","title":"Regl","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":835,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Demo of Neural Network","cells":[{"id":0,"value":"# Demo of Neural Network\n\nIt is a simple demo for how the neural network works.\n\nBy using a simple 2-layer neural network with random parameters,\nwe can highlight every single component of the surface of the bunny rabbit.\n\n## Neural Network Setting\n\n1. The feature is the ${tex`(x, y, z)`} coordinates of the nodes.\n2. The activation function is **sigmoid** function.\n3. We used ${tex`n = ${n}`} channels to extend the expression ability of the network.\n\n## How to use\n\n1. You can click the **click me** button to keep the parameters changing,\nand the highlight areas will move accordingly.\n2. The **Color Controller** is similar with the **click me** button,\nbut it allows you to move forward step-by-step.\n3. You can drag the ${tex`\\phi`} and ${tex`\\theta`} ranger to adjust the view angle.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":509,"value":"y = \\frac{e^x}{1 + e^x}","pinned":false,"hidden":false,"mode":"tex","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"## Controller","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":650,"value":"viewof colorController = Inputs.range([0, 100], { label: \"Color Controller\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"viewof phi = Inputs.range([0, Math.PI], {\n label: \"phi (up-down)\",\n value: Math.PI / 6.0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":489,"value":"viewof theta = Inputs.range([0, 4 * Math.PI], {\n label: \"theta (left-right)\",\n value: (3.0 * Math.PI) / 4.0,\n step: (2 * Math.PI) / 400\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":539,"value":"## Bunny Rabbit","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"canvas = DOM.canvas(width, (width * 9) / 16)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"viewof button1 = Inputs.button(\"Click me\", {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":683,"value":"viewof reload1 = Inputs.button(\"reload\", {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":552,"value":"### Support Camera Change by Controller","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"cameraBuffer = () => {\n let cameraParams = Object.assign({\n center: [0, 3.5, 0],\n theta: theta, //(3.0 * Math.PI) / 4.0,\n phi: phi, //Math.PI / 6.0,\n distance: 20.0,\n damping: 0,\n noScroll: true,\n renderOnDirty: true\n });\n\n const camera = reglCamera(regl, cameraParams);\n return [camera];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":737,"value":"camera = {\n let cameraParams = Object.assign({\n center: [0, 3.5, 0],\n theta: theta, //(3.0 * Math.PI) / 4.0,\n phi: phi, //Math.PI / 6.0,\n distance: 20.0,\n damping: 0,\n noScroll: true,\n renderOnDirty: true\n });\n\n const camera = reglCamera(regl, cameraParams);\n return camera;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"{\n // value1;\n colorController;\n updateParameters();\n cameraBuffer()[0](function () {\n regl.clear({ color: [0, 0.1, 0.26, 1] });\n drawBunny()();\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":807,"value":"{\n // value1;\n now;\n if (!paused && timer.elapsed() > 20) {\n timer.update();\n updateParameters();\n cameraBuffer()[0](function () {\n regl.clear({ color: [0, 0.1, 0.26, 1] });\n drawBunny()();\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"// {\n// function loop() {\n// updateParameters();\n// cameraBuffer()[0](function () {\n// regl.clear({ color: [0, 0.1, 0.26, 1] });\n// drawBunny()();\n// });\n// requestAnimationFrame(loop);\n// }\n\n// loop();\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":560,"value":"### Support Camera Free View by Mouse (Deprecated)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"// Continuously updates\n// regl.frame(() => {\n// updateParameters();\n// camera(function () {\n// regl.clear({ color: [0, 0.1, 0.26, 1] });\n// drawBunny()();\n// });\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"// camera = (await require(\"https://bundle.run/regl-camera@2.1.1\"))(regl, {\n// center: [0, 3.5, 0],\n// theta: (3.0 * Math.PI) / 4.0,\n// phi: Math.PI / 6.0,\n// distance: 20.0,\n// damping: 0,\n// noScroll: true,\n// renderOnDirty: true\n// })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":556,"value":"## Draw the Bunny","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"drawBunny = () =>\n regl({\n frag: `\n precision mediump float;\n varying vec3 vnormal;\n void main () {\n gl_FragColor = vec4(abs(vnormal), 1.0);\n }`,\n vert: `\n precision mediump float;\n uniform mat4 projection, view;\n attribute vec3 position, normal;\n varying vec3 vnormal;\n void main () {\n vnormal = normal;\n gl_Position = projection * view * vec4(position, 1.0);\n }`,\n attributes: {\n position: bunny.positions,\n normal: color() //normals(bunny.cells, bunny.positions)\n },\n elements: bunny.cells\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":580,"value":"### Rebuild the Color by Neural Network","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"paused = {\n button1;\n return !this;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"color()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"color = () => {\n // value1;\n const c = normals(bunny.cells, bunny.positions);\n for (let i = 0; i < c.length; i++) {\n let p = bunny.positions[i];\n let t = 0;\n for (let j = 0; j < n; j++) {\n t +=\n cs2[j] *\n sigmoid((p[0] - cs1[j][3]) / (ext[1][0] - ext[0][0])) *\n cs1[j][0];\n t +=\n cs2[j] *\n sigmoid((p[1] - cs1[j][4]) / (ext[1][1] - ext[0][1])) *\n cs1[j][1];\n t +=\n cs2[j] *\n sigmoid((p[2] - cs1[j][5]) / (ext[1][2] - ext[0][2])) *\n cs1[j][2];\n }\n c[i][0] = sigmoid(t);\n c[i][1] /= 2;\n c[i][2] /= 2;\n }\n const e = d3.extent(c);\n\n // const tScale = d3.scaleLinear().domain([e[0][0], e[1][0]]).range([0, 1]);\n\n // return c.map((t) => {\n // const { r, g, b } = d3.color(colorScale(tScale(t[0])));\n // return [r / 255, g / 255, b / 255];\n // });\n\n return c.map((x) => [\n // x[0],\n 0.2 + 0.7 * ((x[0] - e[0][0]) / (e[1][0] - e[0][0])) ** 2,\n x[1],\n x[2]\n ]);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":753,"value":"viewof color1 = Inputs.color({ label: \"Favorite color 1\", value: \"#4682b4\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":755,"value":"viewof color2 = Inputs.color({label: \"Favorite color 2\", value: \"#a03322\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":762,"value":"d3.color(colorScale(0.5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":749,"value":"colorScale = d3.interpolateHsl(color1, color2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":584,"value":"### Neural Network Parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"n = 10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":398,"value":"cs2 = {\n reload1;\n const cs2 = [];\n for (let i = 0; i < n * 2; i++) {\n cs2.push(rnd());\n }\n return cs2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":393,"value":"cs1 = {\n reload1;\n const cs1 = [];\n for (let i = 0; i < n * 2; i++) {\n let cs = [];\n for (let j = 0; j < 6; j++) {\n cs.push(rnd());\n }\n cs1.push(cs);\n }\n return cs1;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"ext = d3.extent(bunny.positions)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"updateParameters = () => {\n for (let i = 0; i < n; i++) {\n cs2[i] += cs2[n + i] * 0.2;\n if (Math.abs(cs2[i]) > 1) {\n cs2[n + i] *= -1;\n cs2[i] += cs2[n + i] * 0.2;\n }\n }\n\n for (let i = 0; i < n; i++) {\n for (let j = 0; j < 6; j++) {\n cs1[i][j] += cs1[n + i][j] * 0.2;\n\n let M = 1,\n m = -1;\n if (j > 3) {\n M = ext[1][j - 3];\n m = ext[0][j - 3];\n }\n\n if (cs1[i][j] > M || cs1[i][j] < m) {\n cs1[n + i][j] *= -1;\n cs1[i][j] += cs1[n + i][j] * 0.2;\n }\n }\n }\n\n // console.log(\"Parameters Updated\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"rnd = () => Math.random() - 0.5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"sigmoid = (x) => Math.exp(x) / (1 + Math.exp(x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":587,"value":"### Quick Scripts (Debug)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"d3.extent(bunny.positions)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"bunny.positions","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":383,"value":"normals(bunny.cells, bunny.positions)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":530,"value":"## The 3rd-party packages","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"bunny = require('https://bundle.run/bunny@1.0.1')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"normals = require('https://bundle.run/angle-normals@1.0.0')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":546,"value":"reglCamera = require(\"https://bundle.run/regl-camera@2.1.1\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"regl = (await require(\"regl\"))({ canvas })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":565,"value":"// Imported from https://observablehq.com/@ellemenno/toc-with-nesting\ntoc = (title = \"Table of Contents\", selector = \"h1,h2,h3\") => {\n return Generators.observe((notify) => {\n let old = [];\n const level = (h) => parseInt(h.tagName[1], 10);\n const observed = () => {\n const now = Array.from(document.querySelectorAll(selector));\n if (!(now.length !== old.length || now.some((h, i) => h !== old[i])))\n return;\n\n const header = title && title.length > 0 ? `${title}` : \"\";\n const list = (old = now).map((h) =>\n Object.assign(\n html`${\"

${DOM.text(\n h.textContent\n )}`,\n { onclick: (e) => (e.preventDefault(), h.scrollIntoView()) }\n )\n );\n notify(html`${header}