2f:T5fd,Suppose an object moves through a vector field ${tex`\vec{F}`} along a closed curve ${tex`C`} that's parameterized by a function ${tex`\vec{r}`}. Then, we can represent the work done by the vector field on the object with the line integral ${tex.block`\oint_C \vec{F} \cdot d\vec{r}.`} If the parameterization ${tex`\vec{r}`} traces out the curve ${tex`C`} over the time interval ${tex`a\leq t \leq b`}, then one elementary way to evaluate this thing is via the formula ${tex.block`\oint_C \vec{F} \cdot d\vec{r} = \int_a^b \vec{F}(\vec{r}(t))\cdot\vec{r}'(t)\,dt.`} Sometimes, we see this written out in a more expanded form expressed in terms of the components of ${tex`\vec{F}`}. That is, if ${tex.block`\vec{F}(x,y) = \langle P(x,y), Q(x,y) \rangle \text{ and } \, \vec{r}(t) = \langle x(t), y(t) \rangle,`} then ${tex.block`\begin{aligned} \oint_C \vec{F} \cdot d\vec{r} &= \int_a^b \vec{F}(\vec{r}(t))\cdot\vec{r}'(t)\,dt \\ &= \int_a^b \langle P(x(t),y(t)), Q(x(t),y(t)) \rangle \cdot \langle x'(t), y'(t) \rangle \, dt \\ &= \int_a^b \left(P(x(t),y(t))\,x'(t) + Q(x(t),y(t))\,y'(t)\right)\,dt \\ &= \oint_C P \, dx + Q \, dy. \end{aligned}`} That last line is a common shorthand that evokes the previous longer line. Green's theorem relates this type of one-dimensional integral along a closed curve to a double integral over the two-dimensional domain bound by the curve. Specifically, suppose that the simple, positively oriented closed curve ${tex`C`} bounds the domain ${tex`D`}, as shown in the figure below:30:T841,curve_region = { let w = 700; let h = w; let svg = d3 .create("svg") .style("max-width", `${w}px`) .attr("viewBox", [0, 0, w, h]); let grid_container = svg.append("g").attr("stroke-width", 0.2); let curve_container = svg.append("g").attr("stroke-width", 3); let merged_container = svg.append("g").attr("stroke-width", 0.2); let [xmin, xmax, ymin, ymax] = [-pts.size, pts.size, -pts.size, pts.size]; let pad = 20; let x_scale = d3 .scaleLinear() .domain([xmin, xmax]) .range([pad, w - pad]); let y_scale = d3 .scaleLinear() .domain([ymin, ymax]) .range([h - pad, pad]); let path = d3 .line() .x((d) => x_scale(d[0])) .y((d) => y_scale(d[1])); let svg_path = curve_container .attr("stroke-width", 3) .append("path") .attr("d", path(pts)) .attr("stroke", "black") .attr("fill", "lightgray"); let direct_path = d3 .line() .x((d) => d[0]) .y((d) => d[1]); let pt = pts[0]; svg .append("path") .attr( "transform", `translate(${x_scale(pt[0])},${y_scale(pt[1])}) rotate(${pts.rot})` ) .attr( "d", direct_path([ [-20, 8], [0, 0], [-20, -8] ]) ); let dx = (pts.xmin + pts.xmax) / 2; let dy = (pts.ymin + pts.ymax) / 2; svg .append("g") .attr("transform", `translate(${x_scale(dx)},${y_scale(dy)}) scale(2)`) .append(() => MathJax.tex2svg(String.raw`D`).querySelector("svg")); let cx = pt[0] + 0.12 * (pt[0] - dx); let cy = pt[1] + 0.12 * (pt[1] - dy); svg .append("g") .attr( "transform", `translate(${x_scale(cx) - 12},${y_scale(cy) - 12}) scale(2)` ) .append(() => MathJax.tex2svg(String.raw`C`).querySelector("svg")); svg .append("g") .attr("stroke-width", 1.5) .attr("transform", `translate(0, ${y_scale(0)})`) .call(d3.axisBottom(x_scale).ticks(5).tickSizeOuter(0)); svg .append("g") .attr("stroke-width", 1.5) .attr("transform", `translate(${x_scale(0)})`) .call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0)); return svg.node(); }31:Tba3,curve_boxes = { let w = 700; let h = w; let svg = d3 .create("svg") .style("max-width", `${w}px`) .attr("viewBox", [0, 0, w, h]); let grid_container = svg .append("g") .attr("stroke", "black") .attr("stroke-width", 0.5); let outline_container = svg .append("g") .attr("stroke", "black") .attr("stroke-width", 5); let contained_container = svg .append("g") .attr("stroke", "black") .attr("stroke-width", 0.05); let curve_container = svg .append("g") .attr("stroke", "black") .attr("stroke-width", 5); let [xmin, xmax, ymin, ymax] = [-pts.size, pts.size, -pts.size, pts.size]; let pad = 0; let x_scale = d3 .scaleLinear() .domain([xmin, xmax]) .range([pad, w - pad]); let y_scale = d3 .scaleLinear() .domain([ymin, ymax]) .range([h - pad, pad]); let path = d3 .line() .x((d) => x_scale(d[0])) .y((d) => y_scale(d[1])); let d = pts.size / N; let boxes = d3 .range(-pts.size, pts.size, d) .map((x) => d3.range(-pts.size, pts.size, d).map((y) => [ [x, y], [x + d, y], [x + d, y + d], [x, y + d] ]) ) .flat(); grid_container .selectAll("path") .data(boxes) .join("path") .attr("d", (r) => path(r) + "Z") .attr("fill", "none"); let svg_path = curve_container .append("path") .attr("d", path(pts)) .attr("fill", "none"); let SVGPath = svg_path.node(); let contained_boxes = boxes.filter(box_in_fill); contained_container .selectAll("path") .data(contained_boxes) .join("path") .attr("d", (r) => path(r) + "Z") .attr("fill", "#ddd"); let outline = pc.union( contained_boxes.map((b) => [ b.map((pt) => pt.map((x) => Math.round(N * x))) ]) ); outline = outline.map((mp) => mp[0].map((a) => a.map((x) => x / N))); outline_container .selectAll("path") .data(outline) .join("path") .attr("d", path) .attr("fill", "#ddd"); let path2 = d3 .line() .x((d) => d[0]) .y((d) => d[1]); let pt = pts[0]; svg .append("path") .attr( "transform", `translate(${x_scale(pt[0])},${y_scale(pt[1])}) rotate(${pts.rot})` ) .attr( "d", path2([ [-20, 8], [0, 0], [-20, -8] ]) ); svg .append("g") .attr("stroke-width", 1.5) .attr("transform", `translate(0, ${y_scale(0)})`) .call(d3.axisBottom(x_scale).ticks(5).tickSizeOuter(0)); svg .append("g") .attr("stroke-width", 1.5) .attr("transform", `translate(${x_scale(0)})`) .call(d3.axisLeft(y_scale).ticks(5).tickSizeOuter(0)); return svg.node(); function box_in_fill(vertices) { let vertex_results = vertices.map(function ([x, y]) { let xx = x_scale(x); let yy = y_scale(y); let pt = new DOMPoint(xx, yy); return SVGPath.isPointInFill(pt); }); return vertex_results.every((test) => test); } }32:T700,box = { let s = 400; let plot = Plot.plot({ width: s, height: s, x: { axis: null, domain: [-1, 2] }, y: { axis: null, domain: [-1, 2] }, marks: [ Plot.line([ [0, 0], [1, 0], [1, 1], [0, 1], [0, 0] ]), Plot.dot([[0, 0]], { fill: "black", r: 4 }), Plot.arrow( [ [ [1 / 4, 0], [3 / 4, 0] ], [ [1, 1 / 4], [1, 3 / 4] ], [ [3 / 4, 1], [1 / 4, 1] ], [ [0, 3 / 4], [0, 1 / 4] ] ], { x1: (d) => d[0][0], y1: (d) => d[0][1], x2: (d) => d[1][0], y2: (d) => d[1][1] } ), function () { return svg` ${MathJax.tex2svg(String.raw`C_{B}`).querySelector("svg")} `; }, function () { return svg` ${MathJax.tex2svg(String.raw`C_{R}`).querySelector("svg")} `; }, function () { return svg` ${MathJax.tex2svg(String.raw`C_{T}`).querySelector("svg")} `; }, function () { return svg` ${MathJax.tex2svg(String.raw`C_{L}`).querySelector("svg")} `; }, function () { return svg` ${MathJax.tex2svg(String.raw`(x_0,y_0)`).querySelector("svg")} `; } ] }); return plot; }33:T533,comment3 = md`We then have ${tex.block`\begin{aligned} \oint_C P \, dx + Q \, dy &= \oint_{C_B} P \, dx + Q \, dy + \oint_{C_R} P \, dx + Q \, dy \\ &= \oint_{C_T} P \, dx + Q \, dy + \oint_{C_L} P \, dx + Q \, dy. \end{aligned} `} Now, as it turns out, ${tex.block`\int_{C_B+C_T} P\,dx + Q\,dy = \int_{C_B+C_T} P\,dx = -\iint\limits_D \frac{\partial P}{\partial y}\,dA`} and ${tex.block`\int_{C_R+C_L} P\,dx + Q\,dy = \int_{C_R+C_L} Q\,dy = \iint\limits_D \frac{\partial Q}{\partial x}\,dA.`} Adding those two together should give you Green's theorem. The justifications of those equations are similar; let's take a look at the first one: ${tex.block`\begin{aligned} \int_{C_B+C_T} P\,dx &= \int_0^h P(x_0 + x,y_0)\,dx - \int_0^h P(x_0+x,y_0+h) \, dx \\ &= \int_0^h \left(P(x_0+x,y_0) - P(x_0+x,y_0+h)\right) \, dx \\ &= \int_0^h \frac{P(x_0+x,y_0) - P(x_0+x,y_0+h)}{h}h \, dx \\ &\approx -\int_0^h \frac{\partial P}{\partial y}(x_0,y_0)\,h\,dx = -\int_0^h \int_0^h \frac{\partial P}{\partial y} \, dy \, dx. \end{aligned}`} ## The Divergence Theorem Similar arguments can be made to justify the equally fabulous Divergence Theorem: ${tex.block`\oint_C \vec{F}\cdot d\vec{n} = \oint_C \left(P\,dy - Q\,dx\right) = \iint\limits_D \left(\frac{\partial P}{\partial x} + \frac{\partial Q}{\partial y}\right) \, dA.`}`34:[] 2d:{"title":"Illustrations for the proof of Green's theorem","cells":[{"id":624,"value":"# Illustrations for the proof of Green's theorem","pinned":false,"hidden":false,"mode":"md"},{"id":579,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":337,"value":"viewof new_curve = Inputs.button(\"New curve\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":607,"value":"Green's theorem then asserts that \n${tex.block`\\oint_C P \\, dx + Q \\, dy = \\iint\\limits_D\\left(\\frac{\\partial Q}{\\partial x} - \\frac{\\partial P}{\\partial y}\\right)\\,dA.`}\nThe essence of the proof of Green's theorem contains in two parts:\n- We show that it should be very close to true for small squares and\n- we also show that we can approximate the interior of a simple region with a union of squares.\n\nThen, of course, the hard analysis arises when we try to show that the integral over the squares approaches the integral over the domain.\n\n## Approximating from the interior\n\nThe following interactive image should be reasonably convincing that we can approximate the integral over ${tex`C`} with the sum over the integrals over the boundaries of the squares inside ${tex`C`}.","pinned":false,"hidden":false,"mode":"md"},{"id":494,"value":"viewof new_curve2 = Inputs.button(\"New curve\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"viewof N = Inputs.range([1, 50], { value: 4, step: 1, label: \"N:\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":504,"value":"comment2 = md`## Integrals over small squares\n\nNow, suppose that ${tex`C`} is a positively oriented square with sides parallel to the coordinate axes and lower left hand corner at the point ${tex`(x_0,y_0)`}. This is a *small* square; we'll denote it's side length by ${tex`h`}. \n\nWe can decompose ${tex`C`} into its four sides labeled ${tex.block`C_B, C_R, C_T, \\text{ and } C_B:`}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":547,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":498,"value":"## Code","pinned":false,"hidden":false,"mode":"md"},{"id":322,"value":"pts = {\n new_curve;\n new_curve2;\n let n = 150;\n let [a, b] = [1, 2].map(d3.randomUniform(1, 5));\n let [p, q] = [1, 2].map(d3.randomUniform(0.1, 0.9));\n let theta = d3.randomUniform(0, 2 * Math.PI)();\n let cos_theta = Math.cos(theta);\n let sin_theta = Math.sin(theta);\n let R = (x, y) => [\n cos_theta * x - sin_theta * y,\n sin_theta * x + cos_theta * y\n ];\n let skew = d3.randomUniform(0, 0.5)();\n function r(t) {\n let c = Math.cos(t);\n let s = Math.sin(t);\n let x = (1 - c * skew) * a * Math.sign(c) * Math.abs(c) ** p;\n let y = b * Math.sign(s) * Math.abs(s) ** q;\n let [X, Y] = R(x, y);\n return [X, Y];\n }\n\n let pts = d3.range(0, 2 * Math.PI + Math.PI, Math.PI / n).map(r);\n pts.rot = -((180 * theta) / Math.PI + 90);\n let [xmin, xmax] = d3.extent(pts.map((pt) => pt[0]));\n let [ymin, ymax] = d3.extent(pts.map((pt) => pt[1]));\n pts.xmin = xmin;\n pts.ymin = ymin;\n pts.xmax = xmax;\n pts.ymax = ymax;\n pts.size = Math.ceil(d3.max([xmax, -xmin, ymax, -ymin]));\n\n return pts;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"pc = require(\"polygon-clipping\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"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"}],"files":"$W34","stdlib":"1","titling":"auto"}