Math Function Graph Generator

Welcome to the Math Function Graph Generator — a free, browser-based tool for plotting mathematical functions and exploring their properties interactively. This simulator lets you enter one or more function expressions, visualise their graphs on a zoomable and pannable coordinate plane, and perform analysis including root finding, derivative overlays, definite integrals, and extrema detection. It is designed for mathematics students, engineering learners, and vocational education instructors — all without installation, signup, or licensing fees.

The calculator includes 12 preset functions covering polynomials, trigonometry, exponentials, logarithms, and special curves. It offers 4 interactive learning modes (Simulate, Explore, Practice, Quiz) and supports up to 10 simultaneous function plots with individual colour coding and visibility toggles.

When you first load the calculator, a default function (such as sin(x)) is plotted on the graph. To change it, type a new expression into the function input field in the sidebar. Press Enter or click outside the field to update the graph.

Click + Add Function to plot additional functions simultaneously. Each function gets its own colour. Use the visibility toggle next to each function entry to show or hide individual curves. Click the delete button to remove a function from the list.

Load a preset function from the presets bar to instantly see common mathematical functions like Quadratic, Sine, Exponential, or Normal Distribution plotted with appropriate viewing windows.

Use the tool bar above the graph to switch interaction modes: Move (pan and trace), Point (click to place coordinate points), Intersect (find where curves cross), and Tangent (draw tangent lines on curves). Click the gear icon to adjust axis ranges.

The calculator parses standard mathematical notation. Use x as the variable. Supported operations and functions include:

• Arithmetic: +, -, *, /, ^ (power)
• Trigonometric: sin(x), cos(x), tan(x), asin(x), acos(x), atan(x)
• Hyperbolic: sinh(x), cosh(x), tanh(x)
• Exponential & Log: exp(x), ln(x), log(x) (base 10), log2(x)
• Other: sqrt(x), abs(x), ceil(x), floor(x), sign(x)
• Constants: pi, e

Implicit multiplication is supported: 2x is the same as 2*x, and 3sin(x) is the same as 3*sin(x). Parentheses control order of operations as expected.

Zoom: Use the mouse scroll wheel to zoom in and out. The zoom is centred on your cursor position. You can also use the + and − buttons in the graph toolbar overlay.

Pan: Click and drag on the graph to pan the viewing window in any direction. The axis labels and grid update in real time as you drag.

Trace: Hover your mouse over a plotted curve to see a crosshair and tooltip showing the exact (x, y) coordinates at that point. The nearest curve is automatically highlighted.

Reset: Click the reset button (↺) in the toolbar to return to the default viewing window. Click the fit button (◼) to automatically adjust the view to show all plotted curves.

Roots: The analysis section in the sidebar automatically lists the x-intercepts (zeros) of the currently selected function within the visible range. Roots are also marked on the graph with small circles.

Extrema: Local minima and maxima are detected and displayed in the analysis section. These are the points where the first derivative equals zero and the second derivative confirms the nature of the turning point.

Derivatives: Enable Show f′(x) to overlay the first derivative curve in a dashed line. Enable Show f′′(x) to overlay the second derivative. Derivatives are computed numerically using the central difference method with a small step size for accuracy.

Definite Integral: Enter lower and upper bounds in the Integral section of the sidebar. The area under the curve between these bounds is shaded on the graph, and the numerical value is displayed. The integral is computed using Simpson’s rule with adaptive subdivision for accuracy.

Keyboard shortcuts:

• Ctrl+Z (or Cmd+Z on Mac) — Undo the last action.
• Ctrl+Shift+Z — Redo a previously undone action.
• Ctrl+Plus / Ctrl+Minus — Zoom in / out.
• Escape — Deselect the active function input.

Right-click context menu: Right-click anywhere on the graph canvas to access:

• Export Graph (PNG) — saves the current graph as a high-resolution image.
• Export Data (CSV) — downloads a table of x and f(x) values for all plotted functions.
• Copy Expression — copies the selected function expression to the clipboard.
• Reset View — resets zoom and pan to the default window.

• Use presets as starting points and then modify the expressions to experiment with transformations like shifting, scaling, and reflecting.
• Plot a function and its derivative side by side to visualise the relationship between slope and the original curve.
• When computing integrals, note that negative area (below the x-axis) subtracts from positive area — the displayed value is the net signed area.
• Zoom into regions of interest to see fine details like closely spaced roots or narrow extrema.
• Use abs(x) or floor(x) to explore piecewise-style functions without needing special syntax.
• Toggle Show Minor Grid for finer grid lines when you need more precise visual readings.
• The value table (accessible via the Show Table button below the graph) is useful for checking exact numerical values at regular intervals.

Sketch tool: Click the Sketch button in the toolbar. Draw freehand on the graph — the tool supports pressure-sensitive input for Apple Pencil and stylus devices. After each stroke, the tool auto-returns to Move mode. Click Sketch again to draw another stroke.

Colour & width: Click the ▾ dropdown arrow next to Sketch to choose from 6 colours (white, red, green, yellow, blue, orange) and 3 stroke widths (thin, medium, thick). A coloured dot on the button shows the active colour.

Coloured cursor: When Sketch or Shape tool is active, a coloured dot follows your cursor showing the active colour and size — so you always know what you are about to draw.

Shape tool: Click the shape icon (shows ▭ by default) to draw geometric annotations. Open the ▾ dropdown to choose from 7 shapes:

• Arrow — line with arrowhead, great for pointing to features
• Line — straight line between two points
• Rectangle — click-drag to draw a box (default)
• Circle — click centre, drag to set radius
• Ellipse — click-drag for bounding box
• Double Arrow — arrowheads on both ends, ideal for indicating distances
• Text — click to place a text label, type and press Enter

Fill toggle: Switch between Outline and Filled modes for closed shapes (rectangle, circle, ellipse).

Selecting a shape from the dropdown auto-activates the tool. After drawing, the tool returns to Move mode automatically.

Select: In Move mode, hover near any annotation edge to see a move cursor, then click to select. A dashed selection box with corner handles appears.

Move: Drag anywhere inside the selection box to reposition the annotation. On touch devices, tap to select then drag.

Resize: Drag any of the 4 corner handles to resize the shape. For text labels, resizing scales the font size proportionally.

Rotate: Click the purple rotation icon above the selection to rotate by 15° per click. The selection box rotates to match the shape orientation.

Duplicate: Click the cyan copy icon to create an offset duplicate of the selected annotation.

Delete: Click the red trash icon, press Delete/Backspace key, or right-click and select Delete Shape/Sketch.

Double-click text: Double-click any text label to edit its content inline.

Fullscreen mode: Click the ⛶ expand icon on the top-right of the graph canvas. The graph and sidebar fill the entire screen — ideal for classroom projectors and presentations.

Collapse sidebar: In fullscreen mode, click the ‹ chevron on the sidebar edge to collapse it, giving the graph maximum area. Click › to expand it again.

Exit fullscreen: Press Escape or click the ✕ close button. The sidebar automatically restores.

Annotation toggle: Click the 👁 eye icon in the bottom-left toolbar to hide all annotations (sketches, shapes, labels). Click again to show them. This lets you quickly compare annotated vs clean views.

Clear all: Click the 🗑 Clear button in the toolbar to remove all annotations. A confirmation dialog prevents accidental clearing.

Export PNG: Click the 📷 camera icon at the bottom-right of the graph. The exported image includes all annotations and a small mechsimulator.com watermark.

Export Clean: Right-click the graph and select Export Clean to save a PNG without any annotations — just the function curves and axes.

Export CSV: Right-click and select Export CSV to download a spreadsheet-compatible file with x and f(x) values for all plotted functions.

Copy coordinates: Right-click to copy the cursor position or the selected function expression to the clipboard.

Implicit equations: Enter equations like x^2 + y^2 = 25 to plot circles, ellipses, and other implicit curves.

Inequalities: Type y > sin(x) or y < x^2 to shade regions above or below curves.

Slider animation: Click the ▶ button next to any parameter slider to animate it. The parameter will sweep back and forth between its min and max values.

Interactive calculus tools: Use the f′ Deriv tool to draw the derivative between two selected points, or the ∫ Area tool to shade the integral region and see the computed area. Use the Tangent tool to draw tangent lines and see their equations.

Intersection finder: Use the Intersect tool to find where two curves cross. Intersection points are marked on the graph and listed in the analysis panel.