Torus · Klein Bottle · Möbius Strip · Sphere · Hyperboloid · Wireframe 3D
A parametric surface is defined by mapping two parameters (u, v) to 3D coordinates: x = f(u,v), y = g(u,v), z = h(u,v). This simulation renders five classic surfaces as interactive wireframe meshes:
The Klein bottle was first described by Felix Klein in 1882. In 4D, it has no self-intersections — only when immersed in 3D does it appear to pass through itself. The Möbius strip, discovered by August Möbius and Johann Listing in 1858, inspired M.C. Escher's famous "Möbius Strip II" showing ants marching in an endless loop. Cooling-tower hyperboloids are chosen for their structural strength — every point on the surface sits on a straight line, making construction with straight steel beams possible.
This explorer renders five classic surfaces defined by a map from two parameters (u, v) to 3D coordinates: x = f(u,v), y = g(u,v), z = h(u,v). It samples a grid across the u and v ranges, builds quad faces between neighbouring points, applies X and Y rotation matrices and a simple perspective projection, then sorts faces by average depth (painter's algorithm) before drawing them on a Canvas 2D context.
The Surface dropdown switches between the torus, sphere, Klein bottle, Möbius strip and hyperboloid. The U and V sliders set mesh density (8 to 80 and 4 to 40 segments), the speed slider drives auto-rotation, and tick boxes toggle wireframe, filled faces and axes. You can drag the canvas to rotate by hand. Parametric surfaces underpin CAD modelling, computer graphics and the study of topology and differential geometry.
What is a parametric surface?
It is a surface described by a function of two parameters, u and v, that returns a point (x, y, z) in space. As u and v sweep across their ranges, the points trace out the whole surface. This avoids needing a single equation linking x, y and z.
How does this simulation draw the surfaces?
It samples a grid of u and v values, computes a 3D point at each, rotates those points about the X and Y axes, and projects them to 2D with a basic perspective divide. Quad faces are then sorted back-to-front by depth and painted onto a Canvas 2D context.
What do the U and V segment sliders control?
They set how finely the surface is subdivided along each parameter direction. U ranges from 8 to 80 and V from 4 to 40 segments. More segments give a smoother, denser mesh at the cost of drawing more faces, while fewer segments expose the underlying grid.
The torus uses major radius R = 1.0 and minor radius r = 0.4, with x = (R + r·cos v)·cos u, y = (R + r·cos v)·sin u and z = r·sin u. Both u and v run from 0 to 2π, wrapping the tube around the central ring to form the doughnut shape.
A true Klein bottle is a non-orientable surface that only embeds without self-intersection in four dimensions. When immersed in our 3D space, the neck must pass through the wall, producing the visible self-intersection. The surface still has no distinct inside or outside.
The Möbius strip has only one side and one edge. The simulation builds it by sweeping a small line segment around a circle while rotating it through half a turn, so the two ends join with a flip. Tracing a finger along it returns you to the start on the opposite face.
The geometry of each surface is mathematically correct, but the renderer is a lightweight Canvas 2D engine, not a full 3D pipeline. It uses depth sorting rather than a z-buffer, flat per-face shading, and no proper lighting model, so it is intended for intuition and exploration rather than precise visualisation.
The hyperboloid of one sheet is a doubly ruled surface: every point lies on two straight lines. This lets engineers build a curved, strong shape from straight steel beams, and the waisted profile resists wind loads efficiently, which is why it is favoured for cooling towers and some tall structures.
It sorts all the quad faces by their average depth and draws the farthest ones first, so nearer faces overpaint them. This produces a plausible sense of solidity without a per-pixel depth buffer, though it can fail for interpenetrating geometry such as the Klein bottle's self-crossing.
Yes. Click and drag on the canvas to spin the surface freely; horizontal drags adjust the Y rotation and vertical drags adjust the X rotation. The speed slider sets the automatic spin rate, and the Reset button returns the orientation to its default starting angles.