Parametric Drawing for Bézier Curves

Drawing or plotting 2D graphs using a parameter t (such as for Bézier curves) is called parametric plotting. Instead of expressing y as a function of x, both x and y are expressed as functions of t, which typically ranges from 0 to 1 for Bézier curves.

How Parametric Plotting Works

• A 2D curve is represented by a formula: x = f(t) and y = g(t)
• As t moves from 0 to 1, you calculate points (x,y) for each t value.
• You plot each (x,y) point in order to form the continuous curve.

Base Bézier curve formula

A Bernstein polynomial of degree n is:

Bernstein polynomal for degree n

Given control points *P0, P1, …, Pn*, a Bézier curve is a weighted average** of these points, using the Bernstein polynomials as weights:

Usage of Bernstein polynomal function for calculating Bézier curves

Given control points P0, P1, …, Pn (where each Pk is a vector), the full derived formula for the Bézier curve is:

Bézier Curve Example

For a cubic Bézier curve with control points P0, P1, P2, P3, the formula is:

Bézier curve formula for the degree of 3. Note that the dimension of Bézier curve is one lower than the number of control points.

Where B(t) gives both x and y for the curve at a parameter value* t* *(hence Px are vectors that contain 2D coordinates, in our example x and y***)

Plotting Process

• Start with t=0 (beginning): the curve starts at P0.
• Step t from 0 to 1 in small increments (e.g., 0.01).
• For each t, calculate the corresponding (x,y) coordinates using the Bézier formula.
• Connect these points in sequence: this traces the entire curve smoothly.

Why Use Parameter t?

• The parameter t is not a spatial coordinate; it’s a “travel” or “timer” from the start (0) to the end (1) of the curve.
• This approach works for complex curves, closed shapes, and animations, letting you animate or draw by sliding t from 0 to 1.

Summary Table

This is the classic way mathematical curves like Bézier are plotted in 2D graphics and design tools. Plotting 2D graphs with a parameter t (as used in Bézier curves) involves expressing both x and y as functions of t, instead of y as a function of x. As t increases from 0 to 1, you evaluate the formulas for x(t) and y(t), and plot the resulting (x,y) points to trace out the curve on your graph.

How Parametric Drawing Works

• Each value of t produces a unique point (x,y) on the curve.
• For Bézier, the curve always starts at the first control point (t=0), ends at the last (t=1), and all intermediate t values fill in the smooth arc between.
• You loop through values of t (say, in steps of 0.01), calculate (x,y) with the Bézier formulas, and draw a line or place a marker at each point.

What This Provides

• It gives full control: you can animate, plot, or visually build the curve as t goes from start to finish.
• This approach is used for all parametric curves — Bézier, circles, ellipses, etc. — in mathematical plotting and computer graphics.

In short, the parameter tt lets you “travel” along the curve, plotting each point to produce the shape mathematically and visually.

Code Demo

To see a demo of **Bézier **curves, check out the site below. You can download the page and have fun with it on your own:

[embed]Bézier Curve Editor: 1-5 Points Number of control points: Reset Points Randomize Drag a colored circle to move the control points and change the curve…mihastele.github.io

Alternatively, here is the code on GitHub:

[embed]mihastele.github.io/bezier.html at main · mihastele/mihastele.github.io Contribute to mihastele/mihastele.github.io development by creating an account on GitHub.github.com