Alex Bustos | Bézier Curve and Surface Explorer

Bézier Curve and Surface Explorer

Posted 04/28/2023

Project Page

Overview

This was a project I did for a graduate class, ME 6104: Computer Aided Design, which primarily focused on understanding some of the fundamental building blocks of modern parametric CAD software and implementing some of these concepts (like Bézier curves and surfaces) with Python.

For the course’s final project, I worked with a classmate to build a simple web app (displayed above) with Svelte, Three.js / Threlte, TailwindCSS, and DaisyUI. The app is designed with the intent of giving some intuition to the way Bézier curves and surfaces work by allowing users to interact with curves and surfaces in a 3D environment and visualize how each of the control points of the curve affect the value of the curve (shown by enabling the Indicator) at a given point.

Context

I won’t go into a ton of detail about Bézier curves and surfaces here (there’s some great explanations out there already, like this one by Freya Holmér). For a bit of context though, Bézier curves are made up of some number of control points, and any point along the curve is defined entirely by the values of these control points. Essentially, if you know the values of each of the control points, you also know the equation of the Bézier curve composed of those points, which is given by the following equation.

\bm{p}(u) = \sum_{i=0}^n f_i(u) \bm{p}_i

Here, $f_i(u)$ represent basis functions evaluated at $u$ , which, in the case of Bézier curves are Bernstein polynomials, defined by the following equation.

B_{i,n}(u) = \begin{pmatrix} n \\ i \end{pmatrix} u^i (1-u)^{n-i}

In this equation, variables have the following significance:

$0 \leq u \leq 1$ represents the relative distance between the start and end point of the Bézier curve (it’s $1$ at the end of the curve and $0$ at the end).
$i$ is an integer that represents the index of the control point, (the starting point of the Bézier curve would have $i = 0$ , the second point of the curve would have $i = 1$ , and so on).
$n$ is an integer that represents the order of the Bézier curve and is simply equal to the number of control points in the curve - 1 (a curve with 4 control points would have $n=3$ , for example).

The app evaluates the value of the user-editable Bézier curve displayed in the 3D window at the $u$ value of the Indicator. It also preserves the values of each of the basis functions used to compute the value of the curve at that point. These values are displayed in the bar graph on the right, which is intended to show how any point along the curve (with the exception of the start and end points) is influenced in some part by each of the control points that define the curve (i.e., any $u$ value except $u=0$ or $u=1$ will yield non-zero basis functions at every control point).