Mathematical Expression Parsing & Cartesian Coordinate Rendering
Visualizing mathematical functions is essential for understanding symmetry, periodicity, local extrema, discontinuities, and limits. While traditional desktop software suites can be heavy and cumbersome, modern HTML5 Canvas 2D graphics engines deliver smooth, plugin-free 60 fps mathematical visualizations directly inside modern web browsers.
The Toolbase Function Plotter tokenizes standard infix mathematical expressions through real-time lexical analysis and operator precedence evaluation, mapping discrete mathematical Cartesian values to anti-aliased screen pixel coordinates.
Multi-Function Simultaneous Overlay
Plot multiple distinct functions (f(x), g(x), h(x)) in vibrant color-coded lines on a shared canvas to compare intersections and symmetry.
Real-Time Mouse Coordinate Tracking
Hover anywhere over the canvas grid to inspect exact floating-point (x, y) coordinate values via a dynamic tooltip.
Fluid Viewport Zoom & Origin Reset
Effortlessly zoom in (+), zoom out (-), and reset origin coordinates to inspect microscopic harmonics or macro asymptotes.
1. Supported Mathematical Operators & Functions Specification Table
Overview of supported arithmetic operators, built-in functions, and fundamental constants.
| Symbol / Function | Category & Description | Sample Expression | Visual Curve Characteristics |
|---|---|---|---|
| +, -, *, / | Basic Arithmetic | 2 * x + 5 | Linear slope 2 with Y-intercept 5 |
| ^ or ** | Power / Exponentiation | x^2 - 4 | Symmetric quadratic parabola centered on origin |
| sin(x), cos(x), tan(x) | Trigonometric Functions | sin(x) * 2 | Sinusoidal wave with period 2π and amplitude 2 |
| sqrt(x), cbrt(x) | Square / Cube Roots | sqrt(x) | Monotonically increasing curve for x >= 0 |
| abs(x) | Absolute Value | abs(x) - 3 | V-shaped symmetric graph meeting at x=0 |
| log(x), exp(x) | Natural Log & Exponential | exp(x) | Rapidly diverging exponential growth curve |
| pi, e | Mathematical Constants | sin(pi * x) | Exact period calculation using π and Euler's number (e) |
2. Pixel Coordinates ↔ Cartesian Mathematical Coordinate Mapping
In the HTML5 Canvas coordinate space, (0, 0) is anchored at the Top-Left corner, with X increasing rightward and Y increasing downward. In mathematical Cartesian coordinates, (0, 0) sits at the center, with Y increasing upward.
To map any arbitrary mathematical point (MathX, MathY) to screen pixel coordinates (ScreenX, ScreenY), the following linear projection formulas are applied:
ScreenX = (MathX - Xmin) / (Xmax - Xmin) * CanvasWidth
ScreenY = CanvasHeight - (MathY - Ymin) / (Ymax - Ymin) * CanvasHeight
The inverse transformation allows the mouse cursor pixel position (px, py) to be converted back into exact Cartesian coordinates (x, y) for real-time tooltips.
3. Multi-Function Analysis & Practical Workflow Tips
① Plotting f(x) = sin(x) alongside g(x) = cos(x) visually highlights the π/2 phase shift and shared intersection points.
② Combine polynomials with trigonometry (e.g. h(x) = cos(x) * x) to model damped oscillations or expanding vibrations.
③ Right-click the canvas and select "Save Image As..." to export high-resolution PNG graph renderings for reports or publications.
Frequently Asked Questions (FAQ)
Q.How are undefined mathematical domains (like 1/x at x=0 or sqrt(-1)) handled?
Points yielding undefined real values evaluate to NaN and are omitted from drawing paths, rendering clean, broken lines across asymptotes and discontinuities.
Q.Can I omit the multiplication asterisk (*) in expressions like 2x?
Yes. The expression parser automatically normalizes implicit multiplication (e.g. 2x -> 2*x, sin(x)x -> sin(x)*x), though writing 2*x explicitly is recommended.
Q.How many functions can I overlay on a single canvas?
There is no limit. Click "+ Add New Function" to add as many color-coded equations as you need.
Q.Is the graph responsive on mobile devices and high-DPI displays?
Yes. The canvas automatically recalibrates to viewport resizing events, redrawing at native pixel ratios at 60 fps.