{"id":68,"date":"2013-01-26T04:43:28","date_gmt":"2013-01-26T04:43:28","guid":{"rendered":"http:\/\/tedcoe.com\/math\/?page_id=68"},"modified":"2024-07-24T20:48:57","modified_gmt":"2024-07-25T03:48:57","slug":"riemann-sums","status":"publish","type":"page","link":"https:\/\/www.tedcoe.com\/math\/calculus\/riemann-sums\/","title":{"rendered":"Riemann Sums"},"content":{"rendered":"

<\/iframe><\/p>\r\n<p>From Claude Sonnet 3.5<\/p>\r\n<p>\u00a0<\/p>\r\n\r\n\r\n<!DOCTYPE html>\r\n<html lang=\"en\">\r\n<head>\r\n <meta charset=\"UTF-8\">\r\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n <title>Riemann Sum Calculator<\/title>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mathjs\/11.8.0\/math.js\"><\/script>\r\n <script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/Chart.js\/3.9.1\/chart.min.js\"><\/script>\r\n <style>\r\n body {\r\n font-family: Arial, sans-serif;\r\n max-width: 1100px;\r\n margin: 0 auto;\r\n padding: 20px;\r\n }\r\n .input-group {\r\n margin-bottom: 10px;\r\n }\r\n label {\r\n display: inline-block;\r\n width: 150px;\r\n }\r\n input[type=\"text\"], input[type=\"number\"] {\r\n width: 200px;\r\n }\r\n #result, #integral {\r\n margin-top: 20px;\r\n font-weight: bold;\r\n }\r\n #chart-container {\r\n position: relative;\r\n height: 400px;\r\n width: 100%;\r\n }\r\n #tooltip {\r\n position: absolute;\r\n background: rgba(0, 0, 0, 0.7);\r\n color: white;\r\n padding: 5px;\r\n border-radius: 3px;\r\n font-size: 12px;\r\n pointer-events: none;\r\n opacity: 0;\r\n transition: opacity 0.3s;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <h1>Riemann Sum Calculator<\/h1>\r\n <div class=\"input-group\">\r\n <label for=\"function\">Function f(x):<\/label>\r\n <input type=\"text\" id=\"function\" value=\"0.5*x^2+1\">\r\n <\/div>\r\n <div class=\"input-group\">\r\n <label for=\"lower\">Lower bound:<\/label>\r\n <input type=\"number\" id=\"lower\" value=\"0\">\r\n <\/div>\r\n <div class=\"input-group\">\r\n <label for=\"upper\">Upper bound:<\/label>\r\n <input type=\"number\" id=\"upper\" value=\"4\">\r\n <\/div>\r\n <div class=\"input-group\">\r\n <label for=\"subdivisions\">Subdivisions:<\/label>\r\n <input type=\"number\" id=\"subdivisions\" value=\"5\" min=\"1\">\r\n <\/div>\r\n <div class=\"input-group\">\r\n <label for=\"sumType\">Sum type:<\/label>\r\n <select id=\"sumType\" onchange=\"calculate()\">\r\n <option value=\"left\">Left sum<\/option>\r\n <option value=\"right\">Right sum<\/option>\r\n <option value=\"midpoint\">Midpoint sum<\/option>\r\n <option value=\"trapezoidal\">Trapezoidal sum<\/option>\r\n <\/select>\r\n <\/div>\r\n <button onclick=\"calculate()\">Calculate<\/button>\r\n <div id=\"chart-container\">\r\n <canvas id=\"chart\"><\/canvas>\r\n <div id=\"tooltip\"><\/div>\r\n <\/div>\r\n <div id=\"result\"><\/div>\r\n <div id=\"integral\"><\/div>\r\n\r\n <script>\r\n let chart;\r\n let shapes = [];\r\n\r\n function calculate() {\r\n const func = document.getElementById('function').value;\r\n const lower = parseFloat(document.getElementById('lower').value);\r\n const upper = parseFloat(document.getElementById('upper').value);\r\n const subdivisions = parseInt(document.getElementById('subdivisions').value);\r\n const sumType = document.getElementById('sumType').value;\r\n\r\n const f = math.parse(func).compile();\r\n const dx = (upper - lower) \/ subdivisions;\r\n\r\n let sum = 0;\r\n const data = [];\r\n shapes = [];\r\n\r\n \/\/ Generate more points for a smoother curve\r\n const numPoints = subdivisions * 10;\r\n for (let i = 0; i <= numPoints; i++) {\r\n const x = lower + (i \/ numPoints) * (upper - lower);\r\n const y = f.evaluate({x: x});\r\n data.push({x, y});\r\n }\r\n\r\n for (let i = 0; i < subdivisions; i++) {\r\n const x1 = lower + i * dx;\r\n const x2 = lower + (i + 1) * dx;\r\n let y, y1, y2;\r\n\r\n y1 = f.evaluate({x: x1});\r\n y2 = f.evaluate({x: x2});\r\n\r\n if (sumType === 'left') {\r\n y = y1;\r\n shapes.push({type: 'rect', x1, x2, y, area: y * dx});\r\n } else if (sumType === 'right') {\r\n y = y2;\r\n shapes.push({type: 'rect', x1, x2, y, area: y * dx});\r\n } else if (sumType === 'midpoint') {\r\n const xMid = (x1 + x2) \/ 2;\r\n y = f.evaluate({x: xMid});\r\n shapes.push({type: 'rect', x1, x2, y, area: y * dx});\r\n } else { \/\/ trapezoidal\r\n y = (y1 + y2) \/ 2;\r\n shapes.push({type: 'trap', x1, x2, y1, y2, area: (y1 + y2) * dx \/ 2});\r\n }\r\n\r\n sum += shapes[shapes.length - 1].area;\r\n }\r\n\r\n updateChart(data, shapes, lower, upper, sumType);\r\n\r\n document.getElementById('result').textContent = `Riemann sum: ${sum.toFixed(4)}`;\r\n\r\n \/\/ Estimate integral using trapezoidal rule with many subdivisions\r\n const integralEstimate = estimateIntegral(f, lower, upper, 10000);\r\n document.getElementById('integral').innerHTML = `\u222b<sub>${lower}<\/sub><sup>${upper}<\/sup> (${func}) dx \u2248 ${integralEstimate.toFixed(4)}`;\r\n }\r\n\r\n function estimateIntegral(f, lower, upper, n) {\r\n const dx = (upper - lower) \/ n;\r\n let sum = (f.evaluate({x: lower}) + f.evaluate({x: upper})) \/ 2;\r\n\r\n for (let i = 1; i < n; i++) {\r\n const x = lower + i * dx;\r\n sum += f.evaluate({x: x});\r\n }\r\n\r\n return sum * dx;\r\n }\r\n\r\n function updateChart(data, shapes, lower, upper, sumType) {\r\n const ctx = document.getElementById('chart').getContext('2d');\r\n\r\n if (chart) {\r\n chart.destroy();\r\n }\r\n\r\n const minY = Math.min(0, ...data.map(point => point.y));\r\n const maxY = Math.max(...data.map(point => point.y));\r\n\r\n const datasets = [{\r\n label: 'f(x)',\r\n data: data,\r\n borderColor: 'blue',\r\n fill: false,\r\n pointRadius: 0\r\n }];\r\n\r\n if (sumType === 'trapezoidal') {\r\n datasets.push({\r\n label: 'Trapezoids',\r\n data: shapes.flatMap(s => [\r\n {x: s.x1, y: 0},\r\n {x: s.x1, y: s.y1},\r\n {x: s.x2, y: s.y2},\r\n {x: s.x2, y: 0}\r\n ]),\r\n backgroundColor: 'rgba(255, 0, 0, 0.2)',\r\n borderColor: 'rgba(255, 0, 0, 0.5)',\r\n borderWidth: 1,\r\n fill: true,\r\n pointRadius: 0,\r\n segment: {\r\n borderColor: ctx => ctx.p0.y > 0 && ctx.p1.y > 0 ? 'rgba(255, 0, 0, 0.5)' : 'transparent'\r\n }\r\n });\r\n } else {\r\n datasets.push({\r\n label: 'Rectangles',\r\n data: shapes.flatMap(s => [\r\n {x: s.x1, y: 0},\r\n {x: s.x1, y: s.y},\r\n {x: s.x2, y: s.y},\r\n {x: s.x2, y: 0}\r\n ]),\r\n backgroundColor: 'rgba(255, 0, 0, 0.2)',\r\n borderColor: 'rgba(255, 0, 0, 0.5)',\r\n borderWidth: 1,\r\n fill: true,\r\n pointRadius: 0,\r\n stepped: true\r\n });\r\n }\r\n\r\n chart = new Chart(ctx, {\r\n type: 'line',\r\n data: { datasets },\r\n options: {\r\n scales: {\r\n x: {\r\n type: 'linear',\r\n position: 'bottom',\r\n min: lower,\r\n max: upper\r\n },\r\n y: {\r\n min: minY,\r\n max: maxY\r\n }\r\n },\r\n onHover: (event, elements) => {\r\n const tooltip = document.getElementById('tooltip');\r\n if (elements.length > 0 && elements[0].datasetIndex === 1) {\r\n const index = Math.floor(elements[0].index \/ 4);\r\n const shape = shapes[index];\r\n tooltip.innerHTML = `Area: ${shape.area.toFixed(4)}`;\r\n tooltip.style.opacity = 1;\r\n tooltip.style.left = event.native.offsetX + 'px';\r\n tooltip.style.top = event.native.offsetY + 'px';\r\n } else {\r\n tooltip.style.opacity = 0;\r\n }\r\n }\r\n }\r\n });\r\n }\r\n\r\n calculate();\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n","protected":false},"excerpt":{"rendered":"<p>From Claude Sonnet 3.5 \u00a0 Riemann Sum Calculator Riemann Sum Calculator Function f(x): Lower bound: Upper bound: Subdivisions: Sum type: Left sumRight sumMidpoint sumTrapezoidal sum Calculate<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":15,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","neve_meta_sidebar":"","neve_meta_container":"","neve_meta_enable_content_width":"off","neve_meta_content_width":90,"neve_meta_title_alignment":"","neve_meta_author_avatar":"","neve_post_elements_order":"","neve_meta_disable_header":"","neve_meta_disable_footer":"on","neve_meta_disable_title":"","footnotes":""},"class_list":["post-68","page","type-page","status-publish","hentry"],"featured_image_src":null,"_links":{"self":[{"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/pages\/68","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/comments?post=68"}],"version-history":[{"count":5,"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/pages\/68\/revisions"}],"predecessor-version":[{"id":3145,"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/pages\/68\/revisions\/3145"}],"up":[{"embeddable":true,"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/pages\/15"}],"wp:attachment":[{"href":"https:\/\/www.tedcoe.com\/math\/wp-json\/wp\/v2\/media?parent=68"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}