2b:null 2c:["$","title",null,{"children":"Motion Trace | Chuncheng | Observable"}] 31:T5f1,addMouseHandler = () => { const area1 = layout.area1; const area1XScaler = d3 .scaleLinear() .domain([0, area1.w]) .range([0, 2 * Math.PI]); const area1YScaler = d3 .scaleLinear() .domain([0, area1.h]) .range([0, 2 * Math.PI]); const area3 = layout.area3; d3.select(ctx.canvas).on("mousemove", (event) => { const ptr = d3.pointer(event, ctx.canvas); let x = ptr[0] - area1.x, y = ptr[1] - area1.y; if (x > 0 && x < area1.w && y > 0 && y < area1.h) { if (norm([x, y], lastestArea1Ptr) < 100) { return -1; } lastestArea1Ptr[0] = x; lastestArea1Ptr[1] = y; arms.arm1.rad = area1XScaler(x); arms.arm2.rad = area1YScaler(y); radsTrace.push([arms.arm1.rad, arms.arm2.rad]); while (radsTrace.length > 100) { radsTrace.shift(); } drawAll(); } x = ptr[0] - area3.x; y = ptr[1] - area3.y; if (x > 0 && x < area3.w && y > 0 && y < area3.h) { // console.log(x, y); if (norm([x, y], lastestArea3Ptr) < 100) { return -1; } lastestArea3Ptr[0] = x; lastestArea3Ptr[1] = y; const idx = findClosest(x - area3.w / 2, y - area3.h / 2); const pos = posMap[idx]; const a1 = pos[2][0], a2 = pos[2][1]; arms.arm1.rad = a1; arms.arm2.rad = a2; radsTrace.push([arms.arm1.rad, arms.arm2.rad]); while (radsTrace.length > 100) { radsTrace.shift(); } drawAll(); } return 0; }); }32:T727,drawerTrace = () => { ctx.save(); // Draw the tace of the end point of the arm in area0 let area = layout.area0; let { arm1, arm2 } = arms; ctx.translate(area.x + area.w / 2, area.y + area.h / 2); for (let i = 0; i < positionTrace.length; i++) { ctx.save(); ctx.rotate(positionTrace[i][0]); ctx.translate(arm1.length, 0); ctx.rotate(positionTrace[i][1]); ctx.translate(arm2.length, 0); ctx.fillStyle = d3.hsl(0, 0, i / positionTrace.length); ctx.fillRect( -arm2.width / 2 / 2, -arm2.width / 2 / 2, arm2.width / 2, arm2.width / 2 ); ctx.restore(); } ctx.restore(); // Draw the trace of the rads space in area1 ctx.save(); area = layout.area1; const xScaler = d3 .scaleLinear() .range([0, area.w]) .domain([0, 2 * Math.PI]); const yScaler = d3 .scaleLinear() .range([0, area.h]) .domain([0, 2 * Math.PI]); for (let i = 0; i < radsTrace.length; i++) { ctx.save(); let x = xScaler(radsTrace[i][0]), y = yScaler(radsTrace[i][1]); ctx.translate(area.x, area.y); ctx.beginPath(); ctx.arc(x, y, 3, 0, Math.PI * 2, false); ctx.strokeStyle = d3.hsl(0, 0, i / radsTrace.length); ctx.stroke(); ctx.restore(); } // Draw the trace of the end point of the arm in area2 area = layout.area3; ctx.save(); ctx.translate(area.x + area.w / 2, area.y + area.h / 2); for (let i = 0; i < radsTrace.length; i++) { ctx.save(); const pos = rads2position(radsTrace[i]); const x = pos[0], y = pos[1]; ctx.translate(x, y); ctx.fillStyle = d3.hsl(0, 0, i / radsTrace.length); ctx.fillRect( -arm2.width / 2 / 2, -arm2.width / 2 / 2, arm2.width / 2, arm2.width / 2 ); ctx.restore(); } ctx.restore(); ctx.restore(); return 0; }33:T465,drawerMotionArms = () => { ctx.save(); const area = layout.area0; const { arm1, arm2 } = arms; ctx.translate(area.x + area.w / 2, area.y + area.h / 2); ctx.fillStyle = "white"; ctx.font = "30px serif"; ctx.fillText("Origin", 0, 0); const rads = [arm1.rad, arm2.rad]; positionTrace.push(rads); while (positionTrace.length > 100) { positionTrace.shift(); } // Draw arm1 ctx.rotate(rads[0]); ctx.fillStyle = d3.hsl(0, 1, 0.5); ctx.fillRect( -arm1.width / 2, -arm1.width / 2, arm1.length + arm1.width / 2, arm1.width ); ctx.fillStyle = d3.hsl(180, 1, 0.5); ctx.fillRect( -arm1.width / 2 / 2, -arm1.width / 2 / 2, arm1.width / 2, arm1.width / 2 ); // Draw arm2 ctx.translate(arm1.length, 0); ctx.rotate(rads[1]); ctx.fillStyle = d3.hsl(90, 1, 0.5); ctx.fillRect( -arm2.width / 2, -arm2.width / 2, arm2.length + arm2.width / 2, arm2.width ); ctx.fillStyle = d3.hsl(270, 1, 0.5); ctx.fillRect( -arm2.width / 2 / 2, -arm2.width / 2 / 2, arm2.width / 2, arm2.width / 2 ); ctx.restore(); return 0; }34:[] 2f:{"id":"20a6dc20f0c81bf4","slug":"motion-trace","title":"Motion Trace","thumbnail":"7111304de4f19bf64b7afd00956f7bf2da02f110b9855f9d74677c8fa5dd488a","access_level":"public","create_time":"$D2021-11-19T02:46:09.994Z","update_time":"$D2021-11-20T11:20:01.842Z","view_time":null,"first_public_time":"$D2021-11-19T07:12:22.274Z","fork":{"id":"588e80df1b09ca8c","slug":"simple-html-canvas","title":"Simple HTML Canvas","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":593,"publish_version":593,"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":"Motion Trace","cells":[{"id":0,"value":"# Motion Trace\n\nThe Arms will perform motion with your mouse moving in the right panels.\n\n- The right-top panel controls the angles of the 2 arms;\n- The right-bottom panel controls the positions of the end point.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"ctx.canvas","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"## What it is\n\nIt is a connected 2-arms system in 2D space.\nThe notebook shows the motion trace.\n","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":104,"value":"## Drawing","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"{\n drawAll();\n addMouseHandler();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"drawAll = () => {\n drawerClear();\n drawerLayoutAreas();\n drawerFillArea1();\n drawerFillArea3();\n drawerMotionArms();\n drawerArea1Ptr();\n drawerArea3Ptr();\n drawerTrace();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"## Drawing Scripts","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":321,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"drawerArea1Ptr = () => {\n ctx.save();\n\n const area = layout.area1;\n const x = lastestArea1Ptr[0],\n y = lastestArea1Ptr[1];\n ctx.translate(area.x, area.y);\n ctx.beginPath();\n ctx.arc(x, y, 6, 0, Math.PI * 2, false);\n ctx.strokeStyle = \"black\";\n ctx.stroke();\n\n ctx.restore();\n return 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":570,"value":"drawerArea3Ptr = () => {\n ctx.save();\n\n const area = layout.area3;\n const x = lastestArea3Ptr[0],\n y = lastestArea3Ptr[1];\n ctx.translate(area.x, area.y);\n ctx.beginPath();\n ctx.arc(x, y, 6, 0, Math.PI * 2, false);\n ctx.strokeStyle = \"black\";\n ctx.stroke();\n\n ctx.restore();\n return 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":186,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"drawerFillArea1 = () => {\n ctx.save();\n const area = layout.area1;\n const xScaler = d3\n .scaleLinear()\n .domain([area.x, area.x + area.w])\n .range([0, 360]);\n const yScaler = d3\n .scaleLinear()\n .domain([area.y, area.y + area.h])\n .range([1, 0]);\n\n const size = 20;\n\n for (let x = area.x; x < area.x + area.w - size; x += size) {\n for (\n let y = area.y;\n y < area.y + area.h - size * ratio;\n y += size * ratio\n ) {\n ctx.fillStyle = d3.hsl(xScaler(x), yScaler(y), 0.5);\n ctx.fillRect(x, y, size, size * ratio);\n }\n }\n\n ctx.fillStyle = \"black\";\n ctx.font = \"20px serif\";\n ctx.fillText(\n \"Mouse over to control the Arms on the LEFT\",\n area.x,\n area.y + area.h - 10\n );\n ctx.restore();\n return 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"drawerFillArea3 = () => {\n ctx.save();\n const area = layout.area3;\n const hScaler = d3\n .scaleLinear()\n .domain([0, Math.PI * 2])\n .range([0, 360]);\n\n const sScaler = d3\n .scaleLinear()\n .domain([0, Math.PI * 2])\n .range([0, 1]);\n\n ctx.translate(area.x + area.w / 2, area.y + area.h / 2);\n\n const n = Math.max(1, parseInt(posMap.length / 5000));\n for (let i = 0; i < posMap.length; i += n) {\n const e = posMap[i];\n ctx.fillStyle = d3.hsl(hScaler(e[2][0]), sScaler(e[2][1]), 0.5, 0.5);\n ctx.fillRect(e[0], e[1], 5, 5);\n }\n ctx.restore();\n return 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"drawerLayoutAreas = () => {\n ctx.save();\n ctx.strokeStyle = \"white\";\n ctx.lineWidth = 2;\n for (const name in layout) {\n const area = layout[name];\n ctx.strokeRect(area.x, area.y, area.w, area.h);\n }\n ctx.restore();\n return 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"drawerClear = (color = d3.hsl(200, 1, 0.3)) => {\n ctx.save();\n ctx.fillStyle = color;\n ctx.fillRect(0, 0, width, height);\n ctx.restore();\n return 0;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"ctx = {\n const context = DOM.context2d(width, height);\n return context;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":389,"value":"radsTrace = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"positionTrace = []","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"mutable lastestArea1Ptr = [0, 0]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":567,"value":"mutable lastestArea3Ptr = [layout.area3.w / 2, layout.area3.h / 2]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"norm = (a, b) => {\n return (a[0] - b[0]) ** 2 + (a[1] - b[1]) ** 2;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"resolve = 100","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"findClosest = (x, y) => {\n return d3.minIndex(posMap.map((e) => norm(e, [x, y])));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"posMap = {\n const radScaler = d3\n .scaleLinear()\n .domain([0, resolve])\n .range([0, Math.PI * 2]);\n\n const pos = [];\n for (let i = 0; i < resolve; i++) {\n const a1 = radScaler(i);\n for (let j = 0; j < resolve; j++) {\n const a2 = radScaler(j);\n const xy = rads2position([a1, a2]);\n xy.push([a1, a2]);\n pos.push(xy);\n }\n }\n return pos;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"rads2position = (rads) => {\n const { cos, sin } = Math;\n const { arm1, arm2 } = arms;\n const a1 = rads[0],\n a2 = rads[1];\n\n const y1 = arm1.length * sin(a1),\n x1 = arm1.length * cos(a1),\n y2 = arm2.length * sin(a1 + a2),\n x2 = arm2.length * cos(a1 + a2);\n\n return [x1 + x2, y1 + y2];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"## Layout","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"arms = {\n const length = (Math.min(layout.area0.w, layout.area0.h) / 4) * 0.9;\n const arm1 = Object.assign({\n rad: 0,\n length: length * 1.2,\n width: length / 10\n });\n const arm2 = Object.assign({\n rad: 0,\n length: length * 0.8,\n width: length / 10\n });\n return Object.assign({ arm1: arm1, arm2: arm2 });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"layout = {\n const padding = 5;\n\n const area0 = Object.assign({\n x: padding,\n y: padding,\n w: (width - 3 * padding) / 2,\n h: (height - 3 * padding) / 2\n });\n\n const area1 = Object.assign({\n x: width / 2 + 0.5 * padding,\n y: padding,\n w: (width - 3 * padding) / 2,\n h: (height - 3 * padding) / 2\n });\n\n const area2 = Object.assign({\n x: padding,\n y: height / 2 + 0.5 * padding,\n w: (width - 3 * padding) / 2,\n h: (height - 3 * padding) / 2\n });\n\n const area3 = Object.assign({\n x: width / 2 + 0.5 * padding,\n y: height / 2 + 0.5 * padding,\n w: (width - 3 * padding) / 2,\n h: (height - 3 * padding) / 2\n });\n\n return Object.assign({\n area0: area0,\n area1: area1,\n area2: area2,\n area3: area3\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"height = width * ratio","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":367,"value":"ratio = 0.8","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"d3 = require(\"d3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"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}