Devlog #60 – Wave 40: Bézier Curves, Hall Effect & Catenary

Release Stats

New Simulations

Bézier Curves

Bézier curves are the backbone of vector graphics, font rendering, animation paths, and CAD design. Unlike interpolating splines that pass through each control point, a Bézier curve is defined by the convex hull of its control points and passes only through the first and last. The degree-n Bézier is a polynomial of degree n in the parameter t ∈ [0, 1].

The De Casteljau algorithm evaluates this polynomial geometrically: at each level of the recursion, consecutive pairs of points are linearly interpolated at the current t. For a cubic (degree 3) with four control points P₀–P₃, three rounds of lerps produce a single point on the curve. The simulator draws each intermediate polygon in a distinct colour, so you can trace exactly how the final curve point is constructed.

Technical details

• Recursive De Casteljau via deCasteljau(pts, t) returning the intermediate point array at each level, rendered in a per-level colour map.
• B-spline comparison uses the Cox–de Boor algorithm with a uniform clamped knot vector, drawn as a dashed overlay.
• Pointer API for drag: pointerdown/pointermove/pointerup with setPointerCapture for reliable cross-device input.
• Animate mode increments t by 0.003 per frame (60 fps), looping 0→1→0 with a smooth bounce.

Hall Effect

When a current-carrying conductor is placed in a magnetic field perpendicular to the current, charge carriers are deflected sideways by the Lorentz force F = qv×B. This builds up a transverse electric field until the electrostatic force exactly balances the magnetic deflection. The resulting transverse voltage is the Hall voltage:

VH = IB / (nqd)

where n is the carrier density, q the carrier charge, and d the conductor thickness. The sign of V_H depends on the carrier type: electrons (n-type) deflect opposite to holes (p-type), so the Hall voltage polarity directly identifies the dominant carrier. This is the basis of Hall sensors, which are used everywhere from brushless motor controllers to touchless position encoders and smartphone compasses.

Simulation details

• 40 particles initialised with random positions. Each frame, the drift velocity v_d = I / (n · q · A) (A = conductor cross-section) moves each carrier along the current axis.
• The Lorentz transverse displacement grows as Δy = q · v_d · B · dt / m, capped at saturation (representing the build-up of the Hall field).
• n-type carriers (electrons, blue, –q) deflect opposite to p-type holes (red, +q), matching experimental sign conventions.
• Background B-field is visualised as a grid of ⊙ (into page) or ⊗ (out of page) symbols that updates when B = 0 (off).

Catenary

Galileo claimed that the shape of a hanging chain is a parabola. In 1691, Leibniz, Huygens, and Johann Bernoulli independently derived the correct answer: the hyperbolic cosine, now called the catenary (from Latin catena, chain). The equation is y = a⋅cosh(x/a), where the parameter a = T₀/(wg) encodes the ratio of horizontal tension to weight per unit length.

The simulator accepts two anchor points at arbitrary heights and solves for a numerically. Given horizontal span d and desired arc length L, the constraint is:

2a · sinh(d / (2a)) = L

This transcendental equation has no closed-form solution, so the simulator runs Newton’s method for up to 80 iterations until |Δa| < 10⁻⁶. The resulting a typically converges in 15–25 iterations.

Technical details

• The catenary is sampled at N = 300 equally-spaced x-values via a · cosh((x − cx) / a) + C, where cx is the midpoint and C is the vertical offset.
• The parabola overlay uses the same sag depth as the catenary but fitted with a quadratic A(x − cx)² + apex, making the difference visually obvious near the anchors.
• Tension vectors are scaled proportionally to T(x) = wa · cosh(x/a), showing how tension is minimum at the lowest point and increases toward the supports.
• The “Density” slider effectively scales L relative to the anchor span, controlling sag depth without moving the anchors.

Technical Notes

All three simulations are zero-dependency HTML5/Canvas 2D files. The De Casteljau recursion is computed at every animation frame without pre-caching, keeping the code simple while staying well within the 16 ms frame budget for up to degree-5 curves. The Hall effect simulation uses an O(n) particle loop (40 particles) updated via requestAnimationFrame. The catenary Newton solver runs deterministically in the draw() call, completing in under 0.1 ms.

Tags

Computer Graphics Bézier Curves De Casteljau B-Spline Parametric Curves Hall Effect Lorentz Force Semiconductor Hall Voltage Electromagnetism Catenary Hanging Chain Hyperbolic Cosine Newton’s Method Wave 40