๐ Learn Math with a Graph! Let's Explore Riemann Sums and Integrals! ๐
๐ Riemann Sum vs Integral: f(x) = x²
๐ Learn Math with a Graph! Let's Explore Riemann Sums and Integrals! ๐
Hey math explorers! ๐
Have you ever wondered how we find the area under a curve like ? ๐ง It might sound tricky, but today, I’ll show you a cool interactive program where you can see how it's done with bars and curves!
We're going to learn about something called the Riemann Sum and how it compares to the definite integral (don't worry, it's not scary at all!).
๐งฎ What You’ll See in This Program
-
A graph of the function
-
Rectangles (bars) showing an estimate of the area under the curve
-
The exact answer using a math formula called integral
-
A comparison between the estimate and the exact value!
You can also change:
-
The starting number (a)
-
The ending number (b)
-
The number of bars (n) to make the estimate better
๐ก Try It Below!
Just copy and paste the code into an HTML file (or your blog’s HTML editor), and click Draw to explore!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Riemann Sum vs Integral – f(x) = x²</title>
<style>
body { font-family: Arial, sans-serif; text-align: center; background: #f0f8ff; padding: 20px; }
canvas { border: 1px solid #000; margin-top: 20px; background: #fff; }
input { margin: 5px; padding: 5px; font-size: 16px; }
</style>
</head>
<body>
<h2>๐ Riemann Sum vs Integral: f(x) = x²</h2>
<label>a: <input type="number" id="a" value="0"></label>
<label>b: <input type="number" id="b" value="5"></label>
<label>n (divisions): <input type="number" id="n" value="5" min="1"></label>
<button onclick="draw()">Draw</button>
<canvas id="canvas" width="600" height="400"></canvas>
<div id="output"></div>
<script>
function f(x) {
return x * x;
}
function definiteIntegral(a, b) {
return (Math.pow(b, 3) - Math.pow(a, 3)) / 3;
}
function draw() {
const a = parseFloat(document.getElementById('a').value);
const b = parseFloat(document.getElementById('b').value);
const n = parseInt(document.getElementById('n').value);
const dx = (b - a) / n;
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
const xScale = canvas.width / (b - a);
const yScale = canvas.height / (b * b);
// Draw curve f(x) = x²
ctx.beginPath();
for (let x = a; x <= b; x += 0.01) {
const px = (x - a) * xScale;
const py = canvas.height - f(x) * yScale;
if (x === a) ctx.moveTo(px, py);
else ctx.lineTo(px, py);
}
ctx.strokeStyle = 'blue';
ctx.lineWidth = 2;
ctx.stroke();
// Draw bars and calculate Riemann sum
let sum = 0;
for (let i = 0; i < n; i++) {
const xLeft = a + i * dx;
const height = f(xLeft);
sum += height * dx;
// Draw bar
ctx.fillStyle = 'rgba(255, 99, 71, 0.6)';
ctx.fillRect(
(xLeft - a) * xScale,
canvas.height - height * yScale,
dx * xScale,
height * yScale
);
}
// Calculate integral
const exact = definiteIntegral(a, b);
const error = Math.abs(exact - sum);
document.getElementById('output').innerHTML = `
<p><strong>Function:</strong> f(x) = x²</p>
<p><strong>Left Riemann Sum:</strong> ∑ f(xแตข)·ฮx = ${sum.toFixed(4)}</p>
<p><strong>Integral:</strong> ∫<sub>${a}</sub><sup>${b}</sup> x² dx = (b³ - a³)/3 = ${exact.toFixed(4)}</p>
<p><strong>Difference (|Riemann - Integral|):</strong> ${error.toFixed(4)}</p>
`;
}
draw();
</script>
</body>
</html>
๐ค So What Did We Learn?
-
Riemann Sums help us estimate area using rectangles.
-
Integrals give us the exact area under a curve.
-
The more bars (n), the closer the Riemann Sum gets to the exact answer!
๐ฌ Let's Try More!
Want to try it with different functions like or ? Just let me know in the comments! ๐ Or share your ideas and questions!
Happy graphing, math friends! ๐๐
Comments
Post a Comment