31:T691,canvas = { const marker = DOM.uid("arrow"); return html` `}32:T5c6,md` SVG has a [coordinate system](https://dev.w3.org/SVG/profiles/1.1F2/publish/coords.html#InitialCoordinateSystem) that has its origin in the top-left corner, with the X coordinate increasing as we move towards the right and the Y coordinate increasing as we descend. In the sketch above, this is marked by the two little arrows in the corner of the canvas. Given a ${circle('blue')} reference point — that may, or may not, be the origin ⟨0,0⟩ — any other ${circle('crimson')} point can be expressed in two ways: The most familiar is through its [Cartesian coordinates](https://en.wikipedia.org/wiki/Cartesian_coordinate_system), which are the distances between our ${circle('crimson')} point and the ${circle('blue')} reference point on the X and Y axes: ${tex` \left\{ \begin{array}{l} Δx = x_{\text{current}} - x_{\text{reference}} \\ \\ Δy = y_{\text{current}} - y_{\text{reference}} \end{array} \right. `} But it can also be expressed through two [Polar coordinates](https://en.wikipedia.org/wiki/Polar_coordinate_system): * the _radius r_ is the absolute distance from the ${circle('blue')} reference point; * the _angle θ_ from a reference direction, which in our case is → We can transform the Cartesian coordinates to their Polar equivalents through the following formulas: ${tex` \left\{ \begin{array}{l} r = \sqrt{Δx^2 + Δy^2}\\ \\ θ = \text{Math.atan2}(Δy, Δx) \end{array} \right. `} And in JavaScript: `33:Ta08,{ let description = describe('updates the DOM elements with appropriate attributes'); let { r, theta } = cartesian_to_polar({ x: current_coords.x - reference_coords.x, y: current_coords.y - reference_coords.y }); let cx = reference_coords.x * 0.4 + current_coords.x * 0.6; let cy = reference_coords.y * 0.4 + current_coords.y * 0.6; let pt = polar_to_cartesian({ r, theta }); let theta_pt = polar_to_cartesian({ r: r + 10, theta: theta / 2 }); theta_pt = { x: theta_pt.x + reference_coords.x, y: theta_pt.y + reference_coords.y }; attr(reference_pt, { cx: reference_coords.x, cy: reference_coords.y }); attr(current_pt, { cx: current_coords.x, cy: current_coords.y }); attr(dx_line, { x1: reference_coords.x, x2: current_coords.x, y1: reference_coords.y, y2: reference_coords.y }); attr(dx_line_secondary, { x1: reference_coords.x, x2: current_coords.x, y1: current_coords.y, y2: current_coords.y }); attr(dy_line, { x1: reference_coords.x, x2: reference_coords.x, y1: reference_coords.y, y2: current_coords.y }); attr(dy_line_secondary, { x1: current_coords.x, x2: current_coords.x, y1: reference_coords.y, y2: current_coords.y }); attr(dx_text, { x: reference_coords.x * 0.5 + current_coords.x * 0.5, y: reference_coords.y - 5, text: `Δx: ${Math.round(current_coords.x - reference_coords.x)}` }); attr(dy_text, { x: reference_coords.x - 5, y: reference_coords.y * 0.5 + current_coords.y * 0.5, text: `Δy: ${Math.round(current_coords.y - reference_coords.y)}` }); attr(polar_circle, { cx: reference_coords.x, cy: reference_coords.y, r: r }); attr(polar_line, { x1: reference_coords.x, y1: reference_coords.y, x2: current_coords.x, y2: current_coords.y }); attr(polar_r, { x: cx, y: cy - 5, transform: `rotate(${theta / Math.PI * 180} ${cx} ${cy})`, text: `r: ${Math.round(r)}` }); attr(polar_theta, { x: theta_pt.x, y: theta_pt.y, transform: `rotate(${theta / 2 / Math.PI * 180} ${theta_pt.x} ${theta_pt.y})`, text: `θ: ${Math.round(theta / Math.PI * 180)}°` }); attr(polar_path, { d: ` M ${ reference_coords.x } ${ reference_coords.y } L ${ reference_coords.x + r } ${ reference_coords.y } A ${ r } ${ r } 0 ${ theta > 0 ? '0 1' : '0 0' } ${ pt.x + reference_coords.x } ${ pt.y + reference_coords.y }` }); return description; }34:[] 2f:{"title":"Cartesian and polar coordinates","cells":[{"id":354,"value":"md`\n# Cartesian and polar coordinates\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":335,"value":"// Given an object in Cartesian coordinates { x: …, y: … }\n// compute its Polar coordiantes { r: …, theta: … } \nfunction cartesian_to_polar({x, y}) {\n return { \n r: Math.sqrt(x * x + y * y), \n theta: Math.atan2(y, x) \n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":337,"value":"md`\nThis will result in an angle θ expressed in radians in the interval (−π, π].\n\nConversely, given the Polar coordinates of a point we can express them as Cartesian coordinates with:\n\n${tex`\n \\left\\{ \\begin{array}{l}\n Δx = r \\cdot \\text{Math.cos}(θ)\\\\\n \\\\\n Δy = r \\cdot \\text{Math.sin}(θ)\n \\end{array} \\right.\n`}\n\nAnd in JavaScript:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"// Given an object in Polar coordiantes { r: …, theta: … } \n// compute its Cartesian coordinates { x: …, y: … }\nfunction polar_to_cartesian({r, theta}) {\n return { \n x: r * Math.cos(theta),\n y: r * Math.sin(theta)\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":345,"value":"md`\nWe can observe that any point on the segment defined by our two points will have the same θ polar coordinate. In fact, the equation of the line that passes through the two points can be written as:\n\n${tex`Δy = Δx \\cdot tan(θ)`}\n\nThis property can be useful if we want to constrain movement of an object along a certain predefined line (e.g. horizontally, vertically, or at a 45° angle).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"md`\n---\n## Appendix\n\nThese make this notebook work.\n\n#### DOM Elements\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":656,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"reference_pt = canvas.querySelector('.pt--reference')","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"current_pt = canvas.querySelector('.pt--current')","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"dx_element = canvas.querySelector('.dx')","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"dy_element = canvas.querySelector('.dy')","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"polar_el = canvas.querySelector('.polar')","pinned":false,"hidden":false,"mode":"ojs"},{"id":432,"value":"dx_line = dx_element.querySelector('.dx__line--principal')","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"dy_line = dy_element.querySelector('.dy__line--principal')","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"dx_line_secondary = dx_element.querySelector('.dx__line--secondary')","pinned":false,"hidden":false,"mode":"ojs"},{"id":441,"value":"dy_line_secondary = dy_element.querySelector('.dy__line--secondary')","pinned":false,"hidden":false,"mode":"ojs"},{"id":444,"value":"dx_text = dx_element.querySelector('text')","pinned":false,"hidden":false,"mode":"ojs"},{"id":447,"value":"dy_text = dy_element.querySelector('text')","pinned":false,"hidden":false,"mode":"ojs"},{"id":450,"value":"polar_circle = polar_el.querySelector('circle')","pinned":false,"hidden":false,"mode":"ojs"},{"id":453,"value":"polar_line = polar_el.querySelector('line')","pinned":false,"hidden":false,"mode":"ojs"},{"id":456,"value":"polar_r = polar_el.querySelector('.polar__r')","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"polar_theta = polar_el.querySelector('.polar__theta')","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"polar_path = polar_el.querySelector('path')","pinned":false,"hidden":false,"mode":"ojs"},{"id":383,"value":"md`\n#### Mutable values\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"mutable reference_coords = ({ x: width / 2, y: 200 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"mutable current_coords = ({ x: width * 3/4, y: 300 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"md`\n#### Code for interactivity\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"{\n \n let description = describe('makes the two points draggable');\n \n let cleanup_reference_pt = drag(reference_pt, (type, coords) => {\n if (type === 'move') mutable reference_coords = coords;\n });\n \n let cleanup_current_pt = drag(current_pt, (type, coords) => {\n if (type === 'move') mutable current_coords = coords;\n });\n \n invalidation.then(() => { \n cleanup_reference_pt();\n cleanup_current_pt(); \n });\n \n return description;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":312,"value":"md`\n#### Imports\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":302,"value":"import { circle, describe } from '@danburzo/style'","pinned":false,"hidden":false,"mode":"ojs"},{"id":406,"value":"import { attr, drag } from '@danburzo/stdlib-extra'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}