2f:T4b2,polar_definition_pic = { let w = 500; let delta = pi / 100; let t = pi / 5; return Plot.plot({ x: { ticks: "none", domain: [-1.8, 1.8] }, y: { ticks: 0, domain: [-1, 1.4] }, width: w, height: (w * 2.4) / 3.6, inset: 5, marks: [ Plot.arrow([1], { x1: () => 0, x2: () => 1.8 * cos(t), y1: () => 0, y2: () => 1.8 * sin(t) }), Plot.dot([[1.8 * cos(t), 1.8 * sin(t)]], { fill: "black", r: 4 }), Plot.line( d3 .range(0, pi / 5 + delta, delta) .map((t) => [0.4 * cos(t), 0.4 * sin(t)]), { stroke: "black" } ), () => svg` ${MathJax.tex2svg(String.raw`\theta`).querySelector("svg")} `, () => svg` ${MathJax.tex2svg(String.raw`r`).querySelector("svg")} `, () => svg` ${MathJax.tex2svg(String.raw`(r\cos(\theta),r\sin(\theta))`).querySelector( "svg" )} `, Plot.ruleX([0]), Plot.ruleY([0]) ] }); }30:T767,relationship = { let w = 500; let delta = pi / 100; let t = pi / 5; return Plot.plot({ x: { ticks: "none", domain: [-1.8, 1.8] }, y: { ticks: 0, domain: [-1, 1.4] }, width: w, height: (w * 2.4) / 3.6, inset: 5, marks: [ Plot.arrow([1], { x1: () => 0, x2: () => 1.8 * cos(t), y1: () => 0, y2: () => 1.8 * sin(t) }), Plot.dot([[1.8 * cos(t), 1.8 * sin(t)]], { fill: "black", r: 4 }), Plot.line( d3 .range(0, pi / 5 + delta, delta) .map((t) => [0.4 * cos(t), 0.4 * sin(t)]), { stroke: "black" } ), Plot.line( [ [0, 0], [1.8 * cos(t), 0], [1.8 * cos(t), 1.8 * sin(t)] ], { strokeWidth: 3, strokeDasharray: "5,8" } ), () => svg` ${MathJax.tex2svg(String.raw`\theta`).querySelector("svg")} `, () => svg` ${MathJax.tex2svg(String.raw`r`).querySelector("svg")} `, () => svg` ${MathJax.tex2svg(String.raw`(r\cos(\theta),r\sin(\theta))`).querySelector( "svg" )} `, () => svg` ${MathJax.tex2svg(String.raw`x`).querySelector("svg")} `, () => svg` ${MathJax.tex2svg(String.raw`y`).querySelector("svg")} `, () => svg` ${MathJax.tex2svg( String.raw`\begin{align}x&=r\cos(\theta)\\y&=r\sin(\theta)\end{align}` ).querySelector("svg")} `, Plot.ruleX([0]), Plot.ruleY([0]) ] }); }31:T683,polar_domain_picture = { let w = 400; let t1 = pi / 8; let t2 = pi / 3; let r = 0.4; let plot = Plot.plot({ x: { domain: [-0.1, 1.2], ticks: false }, y: { domain: [-0.1, 1.2], ticks: false }, width: w, height: w, marks: [ Plot.line( [ [r * cos(t1), r * sin(t1)], [cos(t1), sin(t1)] ] .concat(d3.range(t1, t2, pi / 100).map((t) => [cos(t), sin(t)])) .concat([ [cos(t2), sin(t2)], [r * cos(t2), r * sin(t2)] ]) .concat( d3.range(t2, t1, -pi / 100).map((t) => [r * cos(t), r * sin(t)]) ), { stroke: null, strokeWidth: 5, fill: "lightgray" } ), Plot.line( [ [-0.2 * cos(t1), -0.2 * sin(t1)], [2.4 * cos(t1), 2.4 * sin(t1)] ], { strokeWidth: 3 } ), Plot.line( [ [-0.2 * cos(t2), -0.2 * sin(t2)], [2.4 * cos(t2), 2.4 * sin(t2)] ], { strokeWidth: 3 } ), Plot.line( d3.range(0, pi / 2, pi / 100).map((t) => [r * cos(t), r * sin(t)]), { strokeWidth: 3 } ), Plot.line( d3.range(0, pi / 2, pi / 100).map((t) => [1 * cos(t), 1 * sin(t)]), { strokeWidth: 3 } ), Plot.ruleX([0]), Plot.ruleY([0]), () => svg` ${MathJax.tex2svg(String.raw`r=a`).querySelector("svg")} `, () => svg` ${MathJax.tex2svg(String.raw`r=b`).querySelector("svg")} ` ] }); return plot; }32:T997,## Translating the integral Let's talk about how it is that ${tex.block`\iint_{D} (1-(x^2+y^2))\, dA = \int_0^{2\pi}\int_0^1 (1-r^2) r \, dr \, d\theta.`} More generally, how do we express ${tex.block`\iint_R f(x,y) \, dA`} in terms of polar coordinates? Generally, there are three parts of the translation: ${tex.block`\color{green}{\iint_R} \color{blue}{f(x,y)} \, \color{red}{dA} \: \to \: \color{green}{\int_{\alpha}^{\beta} \int_a^b} \color{blue}{F(r,\theta)} \: \color{red}{r \, dr \, d\theta}.`} - The bounds of integration: ${tex.block`\iint_R \to \int_{\alpha}^{\beta} \int_a^b`}, - the function: ${tex`f(x,y) \to F(r,\theta)`}, and - the area element ${tex`dA = r\,dr\,d\theta`}. ### The bounds of integration The bounds of integration typically look like ${tex`\displaystyle \int_{\alpha}^{\beta} \int_a^b`} and correspond to the geometry of the region ${await FileAttachment("polar_region.svg").image({width: 600})} ### The function To translate ${tex`f(x,y)`} to ${tex`F(r,\theta)`}, we can replace - ${tex`x=r\cos(\theta)`} - ${tex`y=r\sin(\theta)`} For example, ${tex`f(x,y)=x-y^3`} would become ${tex`F(r,\theta)=r\cos(\theta)-r^3\sin^3(\theta)`}. Often though, we'll see an ${tex`x^2+y^2`} and we can replace that directly with ${tex`r^2`}. For example, ${tex`f(x,y)=(x^2+y^2)\sin(x^2+y^2)`}, then ${tex.block`F(r,\theta) = r^2\sin(r^2).`} The result is independent of ${tex`\theta`}. ### The area element The final step is the easiest, though slightly tricky conceptually. We always have: ${tex.block`dA \to r\,dr\,d\theta.`} To understand where the extra ${tex`r`} comes from, you need to understand that the volume represented by a polar integral is approximated by a sum: ${tex.block`\iint_d f(x,y) \, dA \approx \sum_{i=1}^m \sum_{j=1}^n f(r_i \cos(\theta_j),r_i \sin(\theta_j)) \Delta A_{i,j}.`} That sum corresponds to a particular picture: ${await FileAttachment("area_element@2.svg").image({ width: 600 })} Note that the area of that shaded wedge depends upon its distance to the origin. An excellent approximation to that area, in fact, is ${tex.block`\Delta A = \Delta r \,r\Delta \theta.`} ### The working example Returning to the example ${tex.block`\iint_{D} (1-(x^2+y^2)) \, dA,`} we can now see pretty easily that ${tex.block`\color{green}{\iint_D} \color{blue}{(1-(x^2+y^2))} \, \color{red}{dA} \: = \: \color{green}{\int_{0}^{2\pi} \int_0^1} \color{blue}{(1-r^2)} \: \color{red}{r \, dr \, d\theta}.`} 33:[{"id":"82339efe4a58e2f5b630b31ad9c2b60a9f21736d33b69babec2b92cf4afa3420de4387993e923ce84910b5ff12e54ec3401bef6d87b025a8b72f4bc8f738b8c0","href":"https://static.observableusercontent.com/files/82339efe4a58e2f5b630b31ad9c2b60a9f21736d33b69babec2b92cf4afa3420de4387993e923ce84910b5ff12e54ec3401bef6d87b025a8b72f4bc8f738b8c0","name":"polar_region.svg","type":"image/svg+xml","lastModified":1678842235218.642,"size":34071},{"id":"1c3bf244f7a894a1dbddbc02d97c66396f74b335ea158960cf442535e8d330cd2a822a41293c6e0aa47c7f7e8575a81477fb76c11f356bf4b93aee5efc6f7200","href":"https://static.observableusercontent.com/files/1c3bf244f7a894a1dbddbc02d97c66396f74b335ea158960cf442535e8d330cd2a822a41293c6e0aa47c7f7e8575a81477fb76c11f356bf4b93aee5efc6f7200","name":"area_element.svg","type":"image/svg+xml","lastModified":1678842312940.112,"size":36399},{"id":"d7100b02788495ce80bbe04fe3ae269b7242cd53054ffcf0a6b7602833344d41ec1c70e580432b48efe3ad49b01c06a07e55bc26365fc6c8d99a5117edf93a32","href":"https://static.observableusercontent.com/files/d7100b02788495ce80bbe04fe3ae269b7242cd53054ffcf0a6b7602833344d41ec1c70e580432b48efe3ad49b01c06a07e55bc26365fc6c8d99a5117edf93a32","name":"area_element@2.svg","type":"image/svg+xml","lastModified":1678874677086.108,"size":39565}] 2d:{"title":"Polar Coordinates","cells":[{"id":0,"value":"# Polar Coordinates\n\nHere's a short, intro presention to polar coordinates and why we might use them for double integrals.","pinned":false,"hidden":false,"mode":"md"},{"id":6,"value":"## A natural question\n\nHere's a natural question: What is the volume under the paraboloid ${tex.block`z=1-(x^2+y^2)`} and over the ${tex`xy`}-plane?","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"upside_down_paraboloid = show_x3d(\n [\n create_surface(\n (r, t) => [r * cos(t), r * sin(t), 1 - r ** 2],\n [0, 1],\n [0, 2 * pi]\n ),\n create_surface((r, t) => [r * cos(t), r * sin(t), 0], [0, 1], [0, 2 * pi], {\n show_mesh: false,\n color: \"gray\",\n transparency: 0.1\n })\n ],\n\n { width: 800 }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"### The domain of integration\n\nYou can rotate the previous 3D figure to see that, from above, the domain is clearly a circle. Here's another look at the domain, with arrows indicating how we might integrate with respect to ${tex`y`} first.","pinned":false,"hidden":false,"mode":"md"},{"id":65,"value":"cartesion_domain_picture = {\n let delta = pi / 100;\n return Plot.plot({\n width: 400,\n height: 400,\n inset: 5,\n marks: [\n Plot.arrow(\n d3.range(-1, 1, 0.1).map((x) => ({\n x1: x,\n x2: x,\n y1: -sqrt(1 - x ** 2),\n y2: sqrt(1 - x ** 2)\n })),\n { x1: \"x1\", x2: \"x2\", y1: \"y1\", y2: \"y2\" }\n ),\n Plot.line(\n d3.range(0, 2 * pi + delta, delta).map((t) => [cos(t), sin(t)]),\n {\n stroke: \"black\"\n }\n ),\n Plot.ruleX([-1.05]),\n Plot.ruleY([-1.05])\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":106,"value":"### An integral\n\nUsing some symmetry, this leads to the integral:\n\n${tex.block`\\begin{aligned}\n &4\\int_0^1 \\int_0^{\\sqrt{1-x^2}} (1-x^2-y^2) \\, dy = 4\\int_0^1 \\left(y-x^2y-\\frac{1}{3}y^3\\right)\\Big|_0^{\\sqrt{1-x^2}} \\, dx \\\\\n &= 4\\int_0^1 \\left(\\sqrt{1-x^2} - x^2 \\sqrt{1-x^2} -\\frac{1}{3}(1-x^2)^{3/2}\\right) \\, dx = \\color{red}{??}\n\\end{aligned}`}","pinned":false,"hidden":false,"mode":"md"},{"id":115,"value":"## Polar coordinates\n\nAn alternative way to describe the position of points in the plane:","pinned":false,"hidden":false,"mode":"md"},{"id":117,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":162,"value":"### The relationship with ${tex`x`} and ${tex`y`}","pinned":false,"hidden":false,"mode":"md"},{"id":202,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"### A few polar points - with various descriptions","pinned":false,"hidden":false,"mode":"md"},{"id":234,"value":"points = {\n let w = 600;\n return Plot.plot({\n x: { ticks: \"none\", domain: [-2, 2] },\n y: { ticks: 0, domain: [-1.2, 1.2] },\n width: w,\n height: (w * 2.4) / 4,\n inset: 5,\n marks: [\n Plot.dot(\n [\n [2 * cos(pi / 6), 2 * sin(pi / 6)],\n [0, 1],\n [sqrt(2) * cos((5 * pi) / 4), sqrt(2) * sin((5 * pi) / 4)]\n ],\n { fill: \"black\" }\n ),\n () => svg`\n \n ${MathJax.tex2svg(\n String.raw`(\\sqrt{2}, -3\\pi/4) = (\\sqrt{2},5\\pi/4)`\n ).querySelector(\"svg\")}\n `,\n () => svg`\n \n ${MathJax.tex2svg(String.raw`(1,\\pi/2)=(1,5\\pi/2)`).querySelector(\"svg\")}\n `,\n () => svg`\n \n ${MathJax.tex2svg(String.raw`(2,\\pi/6)=(-2,7\\pi/6)`).querySelector(\"svg\")}\n `,\n Plot.ruleX([0]),\n Plot.ruleY([0])\n ]\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"## Polar regions\n\nIn Cartesian coordinates, rectangles are easy to describe using a pair of inequalities with constant bounds:\n${tex.block`a\\leq x \\leq b \\text{ and } c\\leq y \\leq d.`}","pinned":false,"hidden":false,"mode":"md"},{"id":278,"value":"rectangle = {\n let [a, b] = [1, 4];\n let [c, d] = [1, 3];\n\n let plot = Plot.plot({\n width: 500,\n height: 300,\n x: {\n domain: [0, 5],\n ticks: [1, 4],\n tickFormat: (x) => (x == 1 ? \"a\" : \"b\")\n },\n y: {\n domain: [0, 4],\n ticks: [1, 3],\n tickFormat: (x) => (x == 1 ? \"c\" : \"d\")\n },\n marks: [\n Plot.rect(\n [\n [\n [a, b],\n [c, d]\n ]\n ],\n {\n x1: (d) => d[0][0],\n x2: (d) => d[0][1],\n y1: (d) => d[1][0],\n y2: (d) => d[1][1],\n stroke: \"black\",\n fill: \"lightgray\"\n }\n ),\n Plot.ruleX([0]),\n Plot.ruleX([1, 4], { strokeDasharray: [5, 8] }),\n Plot.ruleY([0]),\n Plot.ruleY([1, 3], { strokeDasharray: [5, 8] })\n ]\n });\n\n d3.select(plot).selectAll(\"text\").attr(\"font-size\", \"16\");\n\n return plot;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"I guess the corresponding thing in polar coordinates should be described by\n${tex.block`a\\leq r \\leq b \\text{ and } \\alpha \\leq \\theta \\leq \\beta.`}","pinned":false,"hidden":false,"mode":"md"},{"id":338,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":495,"value":"That image describes a portion of an *annulus*. Other natural regions include full disks or portions of disks. The unit disk, for example, can be described as\n${tex.block`0 \\leq r \\leq 1 \\text{ and } 0 \\leq \\theta \\leq 2\\pi:`}`","pinned":false,"hidden":false,"mode":"md"},{"id":497,"value":"unit_disk = Plot.plot({\n width: 400,\n height: 400,\n x: { domain: [-1.3, 1.3] },\n y: { domain: [-1.3, 1.3] },\n marks: [\n Plot.line(\n d3\n .range(0, 2 * Math.PI, Math.PI / 100)\n .map((t) => [Math.cos(t), Math.sin(t)]),\n { fill: \"lightgray\", stroke: \"black\" }\n ),\n Plot.axisX({ y: 0, ticks: [-1, 1] }),\n Plot.axisY({ x: 0, ticks: [-1, 1] }),\n Plot.ruleX([0]),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":549,"value":"Note that the bounds on ${tex`r`} and ${tex`\\theta`} in the description of the region become bounds of integration in the iterated integral. That nasty looking Cartesian integral becomes\n${tex.block`\\int_0^{2\\pi}\\int_0^1 (1-r^2) r \\, dr \\, d\\theta,`}\nwhich is quite easy to evaluate!","pinned":false,"hidden":false,"mode":"md"},{"id":591,"value":"$32","pinned":false,"hidden":false,"mode":"md"},{"id":63,"value":"## Imports","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"import {\n create_surface,\n show_x3d,\n create_indexedFaceSet,\n style\n} from \"@mcmcclur/plotx3d\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"style","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"sin = Math.sin","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"cos = Math.cos","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"pi = Math.PI","pinned":true,"hidden":false,"mode":"ojs"},{"id":67,"value":"sqrt = Math.sqrt","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"MathJax = require(\"https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js\").catch(\n () => window[\"MathJax\"]\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":467,"value":"half_moon = show_x3d(\n [\n create_surface(\n (r, t) => [\n r * cos(t),\n r * sin(t),\n (1 - (2 * r * cos(t) + r * sin(t))) / 4\n ],\n [0, 2],\n [0, pi],\n { color: d3.color(d3.schemeCategory10[1]).brighter(), show_mesh: false }\n ),\n create_surface(\n (z, t) => [\n 2 * cos(t),\n 2 * sin(t),\n (z * (1 - (2 * 2 * cos(t) + 2 * sin(t)))) / 4\n ],\n [0, 1],\n [0, pi],\n { show_mesh: false, transparency: 0.6, color: \"gray\" }\n ),\n create_indexedFaceSet(\n [\n [\n [-2, -1, 0],\n [2, -1, 0],\n [2, 2, 0],\n [-2, 2, 0]\n ]\n ],\n { transparency: 0.5 }\n )\n ],\n { width: 800 }\n)","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}