This is an attempt to illustrate numerical integration by animating an HTML5’s canvas.
We’re trying to find the area between x = 1 and x = 5, beneath the parabola:
By integrating, the area under the curve can be calculated as being 17 ⅔ (see below for the analytical solution). For numerical integration, however, the area under the curve is filled with trapezoids and the total area is calculated from the sum of all the areas. As you increase the number of trapezoids, the approximation becomes more accurate. The reduction in the error can be seen on the graph: with 1 trapezoid there is a large gap between the shaded area and the curve; more trapezoids fill in the gap better and better.
The table below show how the error (defined as the difference between the calculation using trapezoids and the analytic solution) gets smaller with increasing numbers of trapezoids (n).
Number of trapezoids | Area (units2) | Error (difference from 17.66) |
---|---|---|
1 | 15.00 | 2.66 |
2 | 17.00 | 0.66 |
3 | 17.37 | 0.29 |
4 | 17.50 | 0.16 |
5 | 17.56 | 0.10 |
6 | 17.59 | 0.07 |
7 | 17.61 | 0.05 |
8 | 17.63 | 0.03 |
9 | 17.63 | 0.03 |
10 | 17.64 | 0.02 |
Analytic solution
The area under the curve, between x = 1 and x = 5 can be figured out analytically by integrating between these limits.
(See also WolframAlpha’s solution).
Update
Demonstration of this numerical integration using four trapezoids in embeddable graphs.