Bézier Surface

In computational geometry and digital sketching, a curved surface is not an opaque mathematical abstraction—it is the physical manifestation of geometric construction. Just as George Chaikin's 1974 corner-cutting algorithm reveals how a curve emerges from an open polygon through repeated subdivision, a Bézier surface demonstrates how double-curved spatial form can be constructed from first principles using only a compass and straightedge.

These five original hand-drafted plates document the progressive geometric construction of a spatial saddle surface patch:

Plate 1: The initial spatial quadrilateral frame, defined by four corner anchor vertices in 3D space, a primary diagonal division rule, and affine division marks.

Plate 2: Geometric bisection using circular compass arcs swung from vertices, locating segment midpoints and establishing the first interior quad and diagonal lattice.

Plate 3: Successive subdivision where straight perimeter chords visibly bow outward into spatial splines, braced by interior diagonal dashed chords.

Plate 4: The converged double-curved anticlastic saddle surface, complete with architectural crosshair ticks at every grid intersection, dashed diagonal chords, and tangent overshoots.

Plate 5: The four spatial boundary curves bounding the surface patch in isolation, showing the continuous perimeter curves that define the edge of the membrane.

Mathematics of the Tensor-Product Surface

A bicubic Bézier surface patch $\mathbf{S}(u, v)$ is parameterized by a continuous two-dimensional domain $(u, v) \in [0, 1] \times [0, 1]$ over a characteristic control net of sixteen spatial points $\mathbf{P}_{i,j}$:

$$\mathbf{S}(u, v) = \sum_{i=0}^3 \sum_{j=0}^3 B_{i,3}(u) B_{j,3}(v) \mathbf{P}_{i,j}$$

where $B_{i,3}(t)$ are the cubic Bernstein basis polynomials:

$$B_{0,3}(t) = (1-t)^3, \quad B_{1,3}(t) = 3t(1-t)^2, \quad B_{2,3}(t) = 3t^2(1-t), \quad B_{3,3}(t) = t^3$$

The differential properties of the surface—its tangent planes, unit normal field $\mathbf{N}(u, v)$, and Gaussian curvature $K = \kappa_1 \kappa_2$—govern how the surface resists deformation. An anticlastic saddle surface ($K < 0$, as drawn in Plate 4) possesses negative Gaussian curvature everywhere: at every point on the membrane, the principal curvature centers lie on opposite sides of the surface, creating an inherently self-bracing structural form favored by master builders from Félix Candela to Frei Otto.

Interactive Drafting Engine

The interactive canvas above implements both the analytical tensor-product evaluation and the discrete compass-subdivision steps shown in the plates:

• Subdivision Passes (0 through 5): Step the slider from Pass 0 (the coarse spatial frame of Plate 1) through Pass 1 (compass bisection arcs), Pass 2 (bowing perimeter), and Pass 4 (the converged Plate 4 saddle), up to a dense 32×32 surface.
• Architectural Drafting Aesthetic: Renders circular compass arcs, junction crosshair ticks (+), dashed interior diagonal chords, and tangent projection overshoots directly in 3D.
• Plate 5 Boundary View: Toggle the Boundary Curves mode to inspect the four perimeter 3D Bézier space curves in isolation.
• 3D Spatial Manipulation: Drag control points directly in screen space; hold Alt or Shift (or use the arrow keys) to adjust elevation $Z$, dropping a dashed plumb line with a live coordinate readout down to the ground plane.
• Curated Architectural Presets: Explore the 1974 Cooper Union Hand-Drawn Saddle, Félix Candela's Hyperbolic Paraboloid, Frei Otto's Tensile Tent Membrane, a Synclastic Vault ($K > 0$), and an Inflected S-Wave.
• Vector & 3D Export: Export crisp high-resolution PNGs, 2D vector SVGs with drafting line weights, or 3D Wavefront .obj meshes for SketchUp, Rhino, and Blender.

Plain HTML5 canvas and vanilla JavaScript ES modules, zero external libraries, with automatic light and dark mode synchronization to match the site.

References

• Chaikin, G. M. (1974). An algorithm for high-speed curve generation. Computer Graphics and Image Processing, 3(4), 346–349.
• Bézier, P. (1972). Numerical Code for the Machine Tool: Numerical Control and Curves/Surfaces. Proceedings of the Royal Society of London.
• de Casteljau, P. (1959). Outillage des méthodes de calcul. Technical report, Citroën.
• Farin, G. (2002). Curves and Surfaces for CAGD: A Practical Guide (5th ed.). Morgan Kaufmann.
• Bacus, J. (2021). Digital Sketching: Computer-Aided Conceptual Design. John Wiley & Sons.
• Otto, F., & Rasch, B. (1995). Finding Form: Towards an Architecture of the Minimal. Axel Menges.