How to generate curves- a fun introduction to Bézier Curves

The Math behind how your computer generates curves

8 min readJun 17, 2024

In this article, we will be talking about Bézier Curves, which are used in topics like-

Visualizing Data to help you catch some patterns or trends that might be hidden by standard statistical measures. Too many teams rely on statistical tests to compare different data distributions. There is nothing wrong with that, but if you rely only on them, you will miss a much larger picture. Unless I’m hallucinating, the 12 distributions below are wildly different. However, their summary statistics are extremely similar. Thus, using only their summary stats and not their distribution would make you think these distributions are very similar, leading to faulty decision-making. Bezier Curves help us a lot with visualizing data.

When Statistics Lie. Anscombe’s Quartet [Math Mondays]

On a similar note, visualizing your systems can help you with problem solving, algorithmic robustness, and much more- making it one of the most powerful problem solving techniques out there.
Bézie rCurves are used in computer Fonts. How would you maximize shareholder value without that amazing MS Office Subscription?
Bézier curves enable robots to move gracefully and efficiently. They are used to plan smooth paths, avoid obstacles, and control the precise movements of robotic manipulators. Applications range from industrial automation to self-driving cars and medical robots, making Bézier curves a cornerstone of modern robotics.

Path planning algorithms are used in known environments to find the shortest, smooth and optimal way without collision from the starting point to the target point. However, excessive nodes and pointed spiking points that occur during this path planning process pose problems. Bezier curves offer highly effective possibilities for path forming problems. In this article, a new approach based on Bezier curves is proposed for solving such problems. First, grid maps are used to model the environment Second, a path is found between the start and endpoints using traditional algorithms. Third, the excess knots are discarded by pruning based on Bezier curves. Finally, the spikes are smoothed using Bezier curves to ensure smoothness and continuity. Looking at the results from the proposed approach, it has proven that its effectiveness in obtaining an optimum path between the starting and target points in known environments.
-A new approach based on Bezier curves to solve path planning problems for mobile robots

Most importantly, without Bézier Curves, we would not have a lot of digital art/animation. Can you imagine a world w/o the breathtaking art of Vagabond, anime, or the GOAT Lloyd Frontera (if you haven’t already, do yourself a favor and read The Greatest Estate Developer. One of the funniest stories I’ve ever read). Bezier curves (and similar techniques) enable a lot of that.

In a nutshell, Bézier Curves are awesome, and super worth learning about. So let’s get into them.

Bézier curves are also used in the time domain, particularly in animation,[4][note 2] user interface design and smoothing cursor trajectory in eye gaze controlled interfaces.[5] For example, a Bézier curve can be used to specify the velocity over time of an object such as an icon moving from A to B, rather than simply moving at a fixed number of pixels per step. When animators or interface designers talk about the “physics” or “feel” of an operation, they may be referring to the particular Bézier curve used to control the velocity over time of the move in question.
-Wikipedia

Join 150K+ tech leaders and get insights on the most important ideas in AI straight to your inbox through my free newsletter- AI Made Simple

What are Bézier Curves?

Bézier curves are parametric curves widely used in computer graphics and design. They are defined by a set of control points, which guide the shape of the curve. The curve itself doesn’t necessarily pass through all the control points; instead, the control points act like magnets, pulling the curve towards them. This makes Bézier curves incredibly versatile for creating smooth, organic shapes.

What Problem do Bézier Curves solve?

Bézier curves solve the challenge of representing complex curves mathematically. Here’s why they are valuable:

Smoothness: Bézier curves inherently create smooth, continuous shapes, unlike straight lines that create jagged edges. It’s easy to define curves if you know the function before hand (plot a cosine curve). However, most art/visualizations involve complex shapes, that our minds envision without explicitly defining the math functions for.

*Abstract composition of cubic Bézier curves ray-traced in 3D. Ray intersection with swept volumes along curves is calculated with Phantom Ray-Hair Intersector algorithm.*

Flexibility: You can easily adjust the curve’s shape by moving the control points.
Easy to rescale: Bézier curves can be scaled up or down without losing their smooth appearance.
Compact Representation: A small set of control points can define a very complex curve.

Let’s now discuss how they work.

How Bézier Curves work

At its core, the construction of a Bézier curve is a series of linear interpolations, a fancy way of saying “finding points along a line.” Here’s the step-by-step process:

Control Points: You start with a set of control points (P0, P1, P2,… Pn). The first and last points (P0 and Pn) are the endpoints of the curve.
Linear Interpolation: Imagine lines connecting consecutive control points (P0 to P1, P1 to P2, etc.). Then, choose a value ‘t’ between 0 and 1. When t = 0, the point you find will be the first control point (P0). When t = 1, the point you find will be the last control point (Pn). For each line segment, find a point that’s ‘t’ of the way along the segment.For values of t between 0 and 1, you’ll find points that smoothly transition between the start and end, influenced by the positions of the intermediate control points.

Repeat: Connect these new interpolated points with lines and repeat step 2, again choosing a value ‘t’.
The Curve: As you keep repeating this process, the points you find will converge towards a single point. This point lies on the Bézier curve for the chosen value of ‘t’.
Varying ‘t’: By varying ‘t’ from 0 to 1, you trace out the entire Bézier curve.

Mathematically, we can compute the Bezier Curves with the following formula-

Looking at this formula might make reveal a limitation of these curves to you. If you need more hints, here is the Python Code for generating Bezier Curves (you can find the Github here). See if you can estimate the time complexity-

"""
Bezier Curves written for Tech Made Simple by Devansh
Attribute code to Devansh- https://artificialintelligencemadesimple.substack.com/
"""

import numpy as np
import matplotlib.pyplot as plt

def bezier_curve(control_points, num_points=100):
    """Calculates a Bezier curve from a set of control points."""
    n = len(control_points) - 1

    t = np.linspace(0, 1, num_points)
    curve = np.zeros((num_points, 2))

    for i in range(num_points):
        for j in range(n + 1):
            curve[i] += (
                control_points[j]
                * (
                    np.math.factorial(n)
                    / (np.math.factorial(j) * np.math.factorial(n - j))
                )
                * t[i] ** j
                * (1 - t[i]) ** (n - j)
            )
    return curve

# Example control points
control_points = np.array([[0, 0], [1, 2], [3, 1], [4, 0]])
curve = bezier_curve(control_points)

plt.plot(curve[:, 0], curve[:, 1])  # Plot the curve
plt.scatter(control_points[:, 0], control_points[:, 1])  # Plot control points
plt.show()

Limitations of Bézier Curves:

Higher-order curves offer more flexibility in shape but are computationally more intensive. This is a huge problem, b/c generating curves fitting a large number of points would be computationally infeasible. We get around this issue by building on the ideas of these curves to create techniques like B-Splines. Unlike Bezier curves, B-splines, overcome the limitations of high-degree Bézier curves by stitching together multiple lower-degree polynomial segments. Think of B-splines as a chain of interconnected, flexible links. Each link is a simple polynomial curve, but together they form a smooth, adaptable chain that can accommodate numerous data points without becoming unwieldy or expensive.

This is why, Kolmogorov–Arnold Networks (which we recently covered in our sister publication AI Made Simple) rely on B-Splines to approximate these activation functions-

B-splines are very cool because they are Camavinga-esque in their flexibility. If you want a very smooth curve, you would use a higher-degree B-spline. If you need more flexibility and control over the curve’s shape, you can adjust the locations of the knots. This makes B-splines incredibly versatile for representing a wide variety of functions. So the next time one of you “men of culture” (men being gender-neutral here) finds yourself thirsting over your favorite animated, AI, or even photoshopped model- make sure you thank the God of B Splines.
-Understanding Kolmogorov–Arnold Networks: Possible Successors to MLPs?

That being said, Bezier Curves are still very cool. In case you need more convincing, here is an amazing video on them-

Ready to simplify your tech journey? Subscribe to Technology Made Simple and get clear, actionable insights to boost your tech skills and career. Forget wasting time on endless tutorials — find everything you need in one place.

Special Offer: Save 20% on your first year! Here’s what you get:

Monthly Plan: 640 INR (8 USD) [Originally 800 INR]
Yearly Plan: 6400 INR (80 USD) [Originally 8000 INR]

Still hesitant? Try risk-free with our 6-month money-back guarantee. If you’re not satisfied, get a full refund, no questions asked! All you have to do is message me.