Computational Coordinate Geometry & 2D Function Plotting Architecture
A 2D function grapher visualizes continuous and discrete single-variable real mappings $f: \mathbb{R} \to \mathbb{R}$ within the Cartesian coordinate plane $\mathbb{R}^2$. Modern browser graphics leverage the HTML5 Canvas API and affine geometric transformations to map mathematical world-space coordinates into raster device pixels at 60 frames per second.
Affine World-to-Screen Coordinate Transformations
Let the viewport viewing window be bounded by domain $[X_{\min}, X_{\max}]$ and codomain $[Y_{\min}, Y_{\max}]$. Given a canvas display raster of dimensions $W \times H$ pixels, any mathematical point $(x_w, y_w)$ transforms into device viewport pixel coordinates $(x_p, y_p)$ via the affine projection:
The vertical component is inverted ($Y_{\max} - y_w$) because computer graphics display buffers define the origin $(0,0)$ at the top-left corner with positive $y$ descending downwards, contrary to the standard Cartesian orientation.
Numerical Discontinuity & Asymptote Detection
When graphing rational and trigonometric functions containing vertical asymptotes (e.g., $f(x) = \frac{1}{x}$ at $x=0$, or $f(x) = \tan(x)$ at $x = \frac{\pi}{2} + k\pi$), adjacent sampled pixel vertices would erroneously produce solid vertical connecting lines if naive linear pathing is executed. To prevent graphing artifacts, the plotting engine computes the differential derivative:
If $\Delta y_p > 0.8H$ and the sign of $f(x)$ abruptly inverts, the engine invokes ctx.moveTo() rather than ctx.lineTo(), breaking the stroke continuity across infinite poles.
Numerical Derivative Estimation via Central Difference
Interactive curve analysis calculates instantaneous tangent slopes using the symmetrical central difference algorithm:
With perturbation step $h = 10^{-5}$, truncation error is $O(h^2)$, providing 10 decimal digits of precision for tangent vectors and local extrema identification.
Canonical Curve Analysis Example
Analyzing the cubic polynomial $f(x) = x^3 - 3x$ across the symmetric domain $x \in [-3, 3]$:
- Roots (Zero Crossings): $x(x^2 - 3) = 0 \implies x \in \{-\sqrt{3}, 0, \sqrt{3}\} \approx \{-1.732, 0, 1.732\}$.
- Critical Points: $f'(x) = 3x^2 - 3 = 0 \implies x^2 = 1 \implies x = \pm 1$.
- Second Derivative Test: $f''(x) = 6x$.
- At $x = -1$: $f''(-1) = -6 < 0 \implies$ Local Maximum at $(-1, 2)$.
- At $x = +1$: $f''(1) = +6 > 0 \implies$ Local Minimum at $(1, -2)$.
- Inflection Point: $f''(x) = 0 \implies (0, 0)$.