Interactive 2D Function Plotter Math

x: ---, y: ---

What is the 2D Function Plotter?

Quick Answer: A dynamic graphing tool that draws y = f(x) curves in real time. You can enter multiple functions, zoom, pan, and trace coordinates. It highlights x- and y-intercepts automatically, making algebra and pre‑calculus concepts visually intuitive.

Theory Behind the Graph

This plotter visualizes Cartesian functions – relationships where each input x produces exactly one output y. The simulation uses Math.js to evaluate expressions containing polynomials, trigonometric, logarithmic, exponential, and absolute value (modulus) operations. The coordinate plane follows standard axis conventions, and the view transforms using affine transformations (scale & translate) to support zoom and pan. Intercepts are located numerically: the y-intercept is f(0), and x-intercepts (roots) are approximated by scanning and sign‑change refinement.

Formulas used in the engine:

  • y = f(x) where f can include: sin, cos, tan, log, ln, exp, sqrt, abs, pow, and standard arithmetic.
  • Coordinate transform: canvasX = (x - offsetX) * scale, canvasY = height - (y - offsetY) * scale
  • Intercept detection: f(0) for y‑intercept; root‑finding via interval bisection when f(a)*f(b) < 0.

Step-by-Step Examples

Example 1: Visualize a Quadratic & Its Roots

  1. Enter f(x) = x^2 - 4 in the first input field.
  2. Enable Intercepts (green dots appear at x = -2 and x = 2). The y‑intercept is marked at (0, -4).
  3. Use the mouse to trace – the coordinate display updates live. Notice the curve is symmetric about the y‑axis.
  4. Zoom in near a root to see the precise crossing point.

Example 2: Compare Trigonometric Functions

  1. Add two functions: sin(x) and cos(x). Assign different colors.
  2. Observe the phase shift: sin(x) and cos(x) are 90° (π/2) apart.
  3. Check Grid to count periods; zoom to verify amplitude = 1.
  4. Remove the cosine function and add tan(x) – vertical asymptotes appear as breaks (the evaluator returns large values, which we cap).

Example 3: Exponential & Logarithmic Behavior

  1. Plot 2^x and log(x)/log(2) (base‑2 logarithm).
  2. Notice they are inverse functions – the green symmetry line y = x can be added as a separate function x.
  3. Examine the y‑intercept of 2^x at (0,1) and the x‑intercept of log_2(x) at (1,0).

Frequently Asked Questions

How do I enter trigonometric functions?

Use standard JavaScript/Math notation: sin(x), cos(x), tan(x). For inverse, use asin(x), acos(x), atan(x). The plotter assumes radians.

Can I plot implicit functions or inequalities?

This tool only handles explicit y = f(x) forms. For inequalities or implicit graphs (like circles), check our dedicated inequality region tool.

Why does my function disappear when I zoom too much?

If the curve goes outside the visible y‑range, it won't be drawn. Use Reset View or zoom out. Also, functions with very large values (e.g., tan near asymptotes) are capped to keep the graph clean.

Does the plotter show intercepts automatically?

Yes. When Intercepts toggle is on, the tool scans for y‑intercept (0, f(0)) and approximates x‑intercepts using a numeric root‑finding method. Green dots mark these points.

Is this tool usable on mobile phones?

Absolutely. The interface is fully responsive. You can pan with one‑finger drag and pinch to zoom on touchscreens. All controls stack vertically on small screens.