3D Surface Plotter

The 3D Surface Plotter draws any function of two variables \( z = f(x, y) \) as a fully interactive 3D landscape directly in your browser. Drag inside the viewport to rotate the surface, scroll or pinch to zoom, and right-drag (or two-finger pan on mobile) to slide the view. Type your own function with full sin, cos, exp, log, sqrt support, the constants \( \pi \) and \( e \), and natural conveniences like x^2 or 2xy — or click one of ten presets for an instant render of the classic saddle, paraboloid, Mexican-hat sinc, monkey saddle, egg-crate, Gaussian bump and more. Choose between isometric and perspective projection, six perceptual color maps, and three wireframe styles, then export the current view as a high-resolution PNG.

How 3D Surface Plotting Works

A Gallery of Classic Surfaces

What Makes This 3D Plotter Different

Expression Syntax — Quick Reference

Reading a 3D Surface

A surface plot encodes huge amounts of information in shape and color together. A few patterns become recognisable with practice:

• Critical points are where the surface has a horizontal tangent plane — local maxima look like dome tops, local minima like bowl bottoms, and saddle points bend up in one direction and down in the perpendicular direction. Click the Saddle preset and rotate the view: along one axis it's a smile, along the other it's a frown.
• Level curves (contour lines) appear naturally when the color map is divergent or terrain-style — bands of the same color trace out lines of constant \( z \).
• Gradient direction is the steepest uphill direction at each point. Visually, that's the direction perpendicular to the level curves, pointing toward warmer colors.
• Symmetry is obvious in 3D: \( z = x^2 + y^2 \) is rotationally symmetric (a bowl), \( z = x^2 - y^2 \) has only mirror symmetries (a saddle), and \( z = x^3 - 3xy^2 \) has a beautiful three-fold rotation symmetry (monkey saddle).

From Saddle to Sinc: One-Click Tour

The preset gallery is a guided tour through the most-taught multivariable surfaces. A suggested sequence for first-time viewers:

1. Paraboloid \( z = x^2 + y^2 \) — the friendliest 3D surface. A bowl, rotationally symmetric, with a single minimum at the origin.
2. Saddle \( z = x^2 - y^2 \) — the iconic Pringle. Try cool-warm color map to see the positive/negative split immediately.
3. Hyperbolic paraboloid \( z = xy \) — a saddle rotated 45°. Same shape, different orientation.
4. Monkey saddle \( z = x^3 - 3xy^2 \) — three slopes around the origin instead of two. Named because a monkey would need to rest its tail there too.
5. Gaussian \( z = e^{-(x^2+y^2)} \) — the bell curve in 2D. Foundation of statistics, signal processing and physics.
6. Mexican-hat sinc \( z = \sin\sqrt{x^2+y^2}/\sqrt{x^2+y^2} \) — the radial sinc. Appears in Fourier optics, diffraction patterns, and the wavelet that bears its name.
7. Egg crate \( z = \sin x \sin y \) — periodic in two directions. Toggle wireframe on to see the grid lines align with the bumps.
8. Ripples \( z = \sin\sqrt{x^2+y^2} \) — concentric waves spreading from the origin. Try the wide −8 to 8 domain.

Real-World Uses

• Multivariable calculus: visualise partial derivatives, gradients, critical points, and Lagrange multipliers without redrawing by hand each time.
• Physics: potential energy surfaces, electromagnetic field intensities, fluid pressure distributions and quantum wave functions all live as \( z = f(x, y) \).
• Machine learning: loss landscapes around a 2D weight subspace help build intuition for why gradient descent works (and why saddles are a problem).
• Computer graphics: heightmaps for terrain are exactly this — a function \( h(x, y) \) sampled on a regular grid then triangulated.
• Civil engineering: elevation models for terrain analysis, dam catchments and earthworks volume estimation.
• Data visualisation: any quantity that depends on two independent variables — temperature across a country, sales by region and month, fitness across two hyperparameters — naturally renders as a surface.

Tips for Beautiful Plots

• Match the domain to the function. Polynomials are usually shown on −3 to 3. Oscillating functions like sinc need a wide domain (−8 to 8) to reveal the ripples. Use −1 to 1 to zoom into a single saddle near the origin.
• Pick the right color map. Use cool-warm for any surface with positive and negative regions — the white midpoint marks the zero level instantly. Use viridis or plasma for non-negative surfaces. Use terrain for landscape-style heightmaps.
• Turn wireframe off for portfolio renders. Subtle wireframe is great for teaching ("see the mesh"). For publication-quality figures, set wireframe to Off and increase resolution to High or Ultra.
• Auto-spin captures rich animations. Hit Auto-spin then start a screen recording — perfect for embedding a rotating surface into slides without manual orchestration.
• Domains too large can flatten the surface. If your function returns huge values near the edges, the interior detail collapses. Either shrink the domain or scale the function (e.g. \( z / 100 \)) to bring the action back into view.

Frequently Asked Questions