RienmanSum

How to use the applet

• Drag the two blue points on the $x$-axis to choose the interval $[a,b]$.
• Move the slider $n$ to choose the number of subintervals in the partition $a=x_0<x_1<\dots<x_n=b.$
• Click “Randomize partition” to generate a new random partition with the same number $n$.
• Move the slider $\delta$ to control how “loose” the upper and lower staircase bounds are.
• The blue curve is the function $f$.
• The red rectangles form an upper staircase function: on each subinterval $[x_{i-1},x_i]$ the height is $M_i+\delta$, where $M_i=\sup_{x\in[x_{i-1},x_i]} f(x).$
• The green rectangles form a lower staircase function: on each subinterval the height is $m_i-\delta$, where $m_i=\inf_{x\in[x_{i-1},x_i]} f(x).$
• The green step function stays below $f$, and the red step function stays above $f$ (by construction).
• Decreasing $\delta$ toward $0$ makes the bounds tighter for the chosen partition.
• Increasing $n$ (more, finer subintervals) typically makes the upper and lower step functions closer, illustrating why integrable functions have matching upper and lower integrals in the limit of finer partitions.

Description

Link to code.

Reference: Lecture Notes Calculus 1 ( May22,2022 ) Definition7.5 page 125

This applet illustrates the idea behind the lower and upper integrals definition. The function is fixed in the code as const f = (x: number) => 0.25 * x ** 3 - x ** 2 - x + 2;. The interval $[a,b]$ is controlled by two draggable points.

The slider nSlider sets the number of subintervals in a partition $Z: a=x_0<\dots<x_n=b$. The partition is randomized by assigning random positive “weights” randomWeights = Array.from({ length: MAX_PARTITIONS }, () => Math.random() * 0.8 + 0.3); and converting them into cut points with the helper buildRandomCuts(n, start, end). Pressing the button “Randomize partition” regenerates these weights and therefore produces a new random partition.

On each subinterval $[x_{i-1},x_i]$ the applet computes $m_i=\inf_{x\in[x_{i-1},x_i]} f(x)$ and $M_i=\sup_{x\in[x_{i-1},x_i]} f(x)$. Since $f$ is a cubic polynomial, these extrema are attained at the endpoints and at critical points (zeros of $f'$). In the code the two critical points are precomputed in criticalPoints, and the values $m_i$ and $M_i$ are computed by the function:

const extremaOnInterval = (x1: number, x2: number) => {
    let minVal = Math.min(f(x1), f(x2));
    let maxVal = Math.max(f(x1), f(x2));

    for (const c of criticalPoints) {
    if (c >= x1 - EPS && c <= x2 + EPS) {
        const v = f(c);
        minVal = Math.min(minVal, v);
        maxVal = Math.max(maxVal, v);
    }
    }
    return { min: minVal, max: maxVal };
};

The red rectangles represent an upper staircase function and the green rectangles represent a lower staircase function. Their shapes are produced by the two JSXGraph curves upperCurve and lowerCurve. For each subinterval, the rectangle heights are built in computeRectangleCurve(cuts, type).

The slider deltaSlider controls how tight these staircase bounds are. On each subinterval the applet draws the lower bound with height $m_i-\delta$ and the upper bound with height $M_i+\delta$: const h = type === "upper" ? max + delta : min - delta; This guarantees that the green staircase function stays below $f$ and the red staircase function stays above $f$. When $\delta$ is decreased toward $0$, the bounds become tighter and approach the “best” lower and upper step functions associated to the chosen partition.

const computeRectangleCurve = (cuts: number[], type: "upper" | "lower") => {
    const X: number[] = [];
    const Y: number[] = [];
    const delta = Math.max(0, deltaSlider.Value());

    for (let i = 0; i < cuts.length - 1; i++) {
    const x1 = cuts[i];
    const x2 = cuts[i + 1];
    const { min, max } = extremaOnInterval(x1, x2);

    const h = type === "upper" ? max + delta : min - delta;

    X.push(x1, x1, x2, x2);
    Y.push(0, h, h, 0);
    }

    return { X, Y };
};