Epsilon Delta Definition

How to use the applet

• Drag $a$ on the $x$-axis to choose the point where we test continuity.
• Drag the green point $f(a)+\varepsilon$ to set $\varepsilon$ (this creates the green horizontal band $f(a)\pm\varepsilon$).
• Drag the orange point $a+\delta$ to set $\delta$ (this creates the orange vertical band $a\pm\delta$).
• Drag $x$ (blue) inside the interval $(a-\delta,\ a+\delta)$.
• Use the buttons to switch the function (e.g. a discontinuous example vs. $\arctan(x)$).
• Click “Find $\delta$” to automatically choose a $\delta$ that works for the current $\varepsilon$, if such a $\delta$ exists.
• The blue segment represents $|x-a|$ (kept $<\delta$ by construction).
• The vertical difference $|f(x)-f(a)|$ is shown on the $y$-axis and is colored:
  • green if $|f(x)-f(a)|<\varepsilon$,
  • red if $|f(x)-f(a)|\ge \varepsilon$.
• For a continuous function at $a$, you can make $\varepsilon$ small and still find some $\delta$ so that the output stays inside the green band whenever $x$ stays inside the orange band.
• For the discontinuous example (with $a$ at the jump), for sufficiently small $\varepsilon$ there is no $\delta$ that works: the “Find $\delta$” button will report that no $\delta$ is found.

Description

Link to code.

Reference: Lecture Notes Calculus 1 ( May22,2022 ) Theorem4.11 page 64

This example is adapted from the JSXGraph documentation.

The function is defined with a discontinuity at the point where $a$ is placed:

const DISCONTINUITY = 1.25;

const f = (x: number) => {
    if (x < DISCONTINUITY) {
        return Math.pow(x, 3) * 0.3;
    } else {
        return Math.pow(x, 2);
    }
};
...
const pointA = board.create('glider', [DISCONTINUITY, 0 ...

This is to show how the definition works in particular when a function is discontinuous.

The value $x$ is constrained by $|x - a| < \delta$.

In the code, $\delta$ is represented as the horizontal distance between deltaPoint and the point $a$:

const getDelta = () => Math.abs(deltaPoint.X() - pointA.X());
...
// ===== POINT X =====
// Line for x glider (constrained to delta neighborhood)
const xLine = board.create('line', [
    [() => pointA.X() - getDelta(), 0],
    [() => deltaPoint.X(), 0]
], ...);
// x glider
const xPoint = board.create('glider', [
    pointA.X() + getDelta() / 2,
    0,
    xLine
], ...);

The segment between $(a, f(a))$ and $(x, f(x))$ changes color depending on whether the continuity condition holds:

board.create('line', [pointYfpointA, point0fx], {
    ...
    strokeColor: () => {
        const epsilon = getEpsilon();
        const dist = Math.abs(point0fx.Y() - pointYfpointA.Y());
        return dist < epsilon ? '#ff00ff' : '#ff0e0eff';
    },
   ...
});

Here, dist corresponds to $|f(x) - f(a)|$, and the color changes depending on whether $|f(x) - f(a)| < \varepsilon$.

The student should first choose a relatively large $\varepsilon$ and a corresponding $\delta$, and then move $x$ within the interval $|x - a| < \delta$ to observe how $|f(x) - f(a)|$ behaves.