2b:null 2c:["$","title",null,{"children":"Path of Light | Chuncheng | Observable"}] 31:T8c4,chart_demo = { // block; // ----------------------------------------- // Fetch Settings const { width, height } = settings; const { num, points, delaunay, voronoi } = layout; // Setup Local Constants const context = DOM.context2d(width, height); const path = d3.geoPath(null, context).pointRadius(2.5); // Local Functions const backgrounds = color => { // Draw the center points and edges of the voronoi, // using the given [color] context.strokeStyle = color; context.beginPath(); voronoi.render(context); voronoi.renderBounds(context); context.stroke(); context.fillStyle = 'white'; context.beginPath(); voronoi.render(context); context.fill(); context.fillStyle = color; context.beginPath(); path({ type: "MultiPoint", coordinates: points }); context.fill(); }; const choice = lst => { // Randomly choice an element from the [lst] const n = lst.length; return lst[parseInt(Math.random() * n)]; }; const drawLine = (a, b, color) => { // Draw the line between points of [a] and [b], // using the given [color] context.strokeStyle = color; context.beginPath(); context.moveTo(...points[a]); context.lineTo(...points[b]); context.stroke(); }; const exclude = (a, b) => { // Exclude [b] from [a] const c = []; for (let i = 0; i < a.length; i++) { if (b.indexOf(a[i]) < 0) { c.push(a[i]); } } return c; }; // ----------------------------------------- // Backgrounds in dimColor backgrounds(d3.hsl(hue, 0.5, 0.8)); // We start at time t=0 let t = 0; // Generate color dynamically const color = () => { return d3.hsl(hue + 180, 0.5, 0.5, Math.abs(sin(t))); }; let idx = 0; // for (t = 0; t < 360; t++) { while (true) { // Clear and Draw // Clear context.clearRect(0, 0, width, height); backgrounds(d3.hsl(hue, 0.5, 0.8)); // Draw context.fillStyle = color(); context.beginPath(); voronoi.renderCell(idx, context); context.fill(); t++; // Jump to a neighbor if (t % 30 == 0) { idx = choice([...voronoi.neighbors(idx)]); } yield context.canvas; } return context.canvas; }32:Tf3b,chart_dynamic = { // return 0; // ----------------------------------------- // Fetch Settings const { width, height } = settings; const { num, points, delaunay, voronoi } = layout; // Setup Local Constants const context = DOM.context2d(width, height); const path = d3.geoPath(null, context).pointRadius(2.5); // Local Functions const backgrounds = color => { // Draw the center points and edges of the voronoi, // using the given [color] context.strokeStyle = color; context.beginPath(); voronoi.render(context); voronoi.renderBounds(context); context.stroke(); context.fillStyle = 'white'; context.beginPath(); voronoi.render(context); context.fill(); context.fillStyle = color; context.beginPath(); path({ type: "MultiPoint", coordinates: points }); context.fill(); }; const choice = lst => { // Randomly choice an element from the [lst] const n = lst.length; return lst[parseInt(Math.random() * n)]; }; const drawLine = (a, b, color) => { // Draw the line between points of [a] and [b], // using the given [color] context.strokeStyle = color; context.beginPath(); context.moveTo(...points[a]); context.lineTo(...points[b]); context.stroke(); }; const exclude = (a, b) => { // Exclude [b] from [a] const c = []; for (let i = 0; i < a.length; i++) { if (b.indexOf(a[i]) < 0) { c.push(a[i]); } } return c; }; // ----------------------------------------- // Backgrounds in dimColor backgrounds(d3.hsl(hue, 0.5, 0.8)); context.fillStyle = d3.hsl(hue, 1, 0.5, 1); context.beginPath(); voronoi.renderCell(startPoint, context); context.fill(); context.fillStyle = 'red'; // d3.hsl(hue + 180, 1, 0.5, 1); context.beginPath(); voronoi.renderCell(stopPoint, context); context.fill(); const traces = []; for (let loop = 0; loop < 100000; loop++) { let a = startPoint, b = -1; const trace = [a]; while (a != stopPoint) { const neighbors = [...voronoi.neighbors(a)]; b = choice(exclude(neighbors, trace)); if (!b) { break; } // drawLine(a, b, d3.hsl(hue + 180, 0.5, 0.5, 0.3)); a = b; trace.push(a); } if (a == stopPoint) { traces.push(trace); } if (traces.length > numTraces) { break; } } console.log('There are traces of', traces.length); const nodes = {}; let mn = 0; for (let t = 0; t < traces.length; t++) { let pharse = 0; for (let i = 0; i < traces[t].length - 1; i++) { const a = traces[t][i], b = traces[t][i + 1]; if (points[b][1] < height / 2) { pharse += 1; } else { pharse += 1; } if (nodes[b]) { nodes[b].push(pharse); } else { nodes[b] = [pharse]; } mn = mn > nodes[b].length ? mn : nodes[b].length; } } let t = 0; while (true) { t += speed; // for (let t = 0; t < 360; t += 10) { context.clearRect(0, 0, width, height); backgrounds(d3.hsl(hue, 0.5, 0.8)); context.fillStyle = d3.hsl(hue, 1, 0.5, 1); context.beginPath(); voronoi.renderCell(startPoint, context); context.fill(); context.fillStyle = 'red'; // d3.hsl(hue + 180, 1, 0.5, 1); context.beginPath(); voronoi.renderCell(stopPoint, context); context.fill(); for (let p in nodes) { const x = parseInt(p); if (x == startPoint) continue; if (x == stopPoint) continue; const s = sum( nodes[p].map(x => { return cos(t + x); }) ); context.fillStyle = d3.hsl(hue + 180, 1, 0.5, s / numTraces); context.beginPath(); voronoi.renderCell(x, context); context.fill(); // console.log(t, s, nodes[p]); } yield context.canvas; } return context.canvas; }33:Tf98,chart_shadow = { // ----------------------------------------- // Fetch Settings const { width, height } = settings; const { num, points, delaunay, voronoi } = layout; // Setup Local Constants const context = DOM.context2d(width, height); const path = d3.geoPath(null, context).pointRadius(2.5); // Local Functions const backgrounds = color => { // Draw the center points and edges of the voronoi, // using the given [color] context.strokeStyle = color; context.beginPath(); voronoi.render(context); voronoi.renderBounds(context); context.stroke(); context.fillStyle = 'white'; context.beginPath(); voronoi.render(context); context.fill(); context.fillStyle = color; context.beginPath(); path({ type: "MultiPoint", coordinates: points }); context.fill(); }; const choice = lst => { // Randomly choice an element from the [lst] const n = lst.length; return lst[parseInt(Math.random() * n)]; }; const drawLine = (a, b, color) => { // Draw the line between points of [a] and [b], // using the given [color] context.strokeStyle = color; context.beginPath(); context.moveTo(...points[a]); context.lineTo(...points[b]); context.stroke(); }; const exclude = (a, b) => { // Exclude [b] from [a] const c = []; for (let i = 0; i < a.length; i++) { if (b.indexOf(a[i]) < 0) { c.push(a[i]); } } return c; }; // ----------------------------------------- // Backgrounds in dimColor backgrounds(d3.hsl(hue, 0.5, 0.8)); context.fillStyle = d3.hsl(hue, 1, 0.5, 1); context.beginPath(); voronoi.renderCell(startPoint, context); context.fill(); context.fillStyle = 'red'; // d3.hsl(hue + 180, 1, 0.5, 1); context.beginPath(); voronoi.renderCell(stopPoint, context); context.fill(); const traces = []; for (let loop = 0; loop < 100000; loop++) { let a = startPoint, b = -1; const trace = [a]; while (a != stopPoint) { const neighbors = [...voronoi.neighbors(a)]; b = choice(exclude(neighbors, trace)); if (!b) { break; } // drawLine(a, b, d3.hsl(hue + 180, 0.5, 0.5, 0.3)); a = b; trace.push(a); } if (a == stopPoint) { traces.push(trace); } if (traces.length > numTraces) { break; } } console.log('There are traces of', traces.length); const nodes = {}; const nodes1 = {}; let mn = 0; for (let t = 0; t < traces.length; t++) { let pharse = 0; for (let i = 0; i < traces[t].length - 1; i++) { const a = traces[t][i], b = traces[t][i + 1]; if (points[b][1] < height / 2) { pharse += 1; } else { pharse += 1; } if (nodes[b]) { nodes[b].push(pharse); } else { nodes[b] = [pharse]; nodes1[b] = -1; } mn = mn > nodes[b].length ? mn : nodes[b].length; } } // let t = 0; // while (true) { // t += speed; for (let t = 0; t < 360; t += speed) { context.clearRect(0, 0, width, height); backgrounds(d3.hsl(hue, 0.5, 0.8)); context.fillStyle = d3.hsl(hue, 1, 0.5, 1); context.beginPath(); voronoi.renderCell(startPoint, context); context.fill(); context.fillStyle = 'red'; // d3.hsl(hue + 180, 1, 0.5, 1); context.beginPath(); voronoi.renderCell(stopPoint, context); context.fill(); for (let p in nodes) { const x = parseInt(p); if (x == startPoint) continue; if (x == stopPoint) continue; const s = sum( nodes[p].map(x => { return cos(t + x); }) ); nodes1[p] = nodes1[p] > s ? nodes1[p] : s; context.fillStyle = d3.hsl(hue + 180, 1, 0.5, nodes1[p] / numTraces); context.beginPath(); voronoi.renderCell(x, context); context.fill(); // console.log(t, s, nodes[p]); } yield context.canvas; } return context.canvas; }34:[] 2f:{"id":"5ad9cf2c4adbe023","slug":"path-of-light","title":"Path of Light","thumbnail":"09bcc9ba8e47a6c5cac8d520f1b780573ddd55da4ace2ad984c803883a282cf7","access_level":"public","create_time":"$D2021-08-19T12:23:35.038Z","update_time":"$D2021-08-20T15:05:09.386Z","view_time":null,"first_public_time":"$D2021-08-20T14:51:36.578Z","fork":false,"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":564,"publish_version":564,"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":"Path of Light","cells":[{"id":0,"value":"md`# Path of Light\n\nIt is a project showing the way of the lights may be following.\n\nThey say the light is both material and wave, so I am building a simple demo (or simulation).\n\n- Material: It refers the light nodes are separated small balls;\n- Wave: It refers the light is a oscillation.\n\nFor the simplest condition, we think a light is an oscillating and jumping Elf.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"md`## Demo`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"viewof num = Inputs.range([300, 1200], {\n value: 1000,\n step: 100,\n label: \"Num:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"viewof hue = Inputs.range([0, 180], {\n value: 30,\n step: 1,\n label: \"Hue:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":505,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"md`## Dynamic Trace`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"viewof startPoint = Inputs.range([0, num - 1], {\n value: 0,\n step: 1,\n label: \"StartPoint:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"viewof stopPoint = Inputs.range([0, num - 1], {\n value: num - 1,\n step: 1,\n label: \"StopPoint:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":426,"value":"viewof numTraces = Inputs.range([100, 200], {\n value: 100,\n step: 20,\n label: \"NumTraces:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"viewof speed = Inputs.range([1, 3], {\n value: 1,\n step: 0.5,\n label: \"Speed:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":382,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":491,"value":"md`## Shadow Trace`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"md`## Layout`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"layout = mkLayout(num, settings.width, settings.height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"settings = setup()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"norm = v => {\n return Math.sqrt(v[0] * v[0] + v[1] * v[1]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":392,"value":"sum = lst => {\n let s = 0;\n for (let i = 0; i < lst.length; i++) {\n s += lst[i];\n }\n return s;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"sin = x => {\n return Math.sin((x * Math.PI) / 180);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"cos = x => {\n return Math.cos((x * Math.PI) / 180);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"mkLayout = (num, width, height) => {\n const points = Array.from({ length: num }, () => [\n Math.random() * width,\n Math.random() * height\n ]);\n const delaunay = d3.Delaunay.from(points);\n const voronoi = delaunay.voronoi([0, 0, width, height]);\n return { num: num, points: points, delaunay: delaunay, voronoi: voronoi };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"setup = () => {\n const width = 800;\n const height = 800;\n return { width: width, height: height };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"