What are Bézier curves in computer graphics?

0

Bézier curves can do a lot of things. You can use them to draw shapes and design patterns, to name just one example. They can also be used mathematically, instead of a linear representation of change, gradually and subtly moving from one keyframe or value to another later.

You might recognize this application from animation programs like Adobe Animate, but the use of Bézier curves goes far beyond the art world.

In this simple explainer, we’ll put digital analysis aside in favor of something a little more relevant to our own purposes, like using Bézier curves in creative applications like Photoshop and After Effects. What makes them so great, anyway?


What is a Bézier curve?

Bézier curves, based on a mathematical concept called the Bernstein polynomial, were invented by a French engineer named Pierre Bézier. Since his day, Bézier curves have become the preferred solution for designers who need a way to get from point A to point B in the most aesthetically pleasing way possible.

Bézier curves are generated by means of an algorithm governed by a sequence of control points, expressed as n + 1. This algorithm is particularly suitable for subdividing the intermediate space, evaluating and differentiating each progressive point in the desired graduated curve .

Bezier curves are vectors by nature. Unlike rasterized bitmap curves, they are scalable, meaning they retain certain properties as you scale them up or down.

USE VIDEO OF THE DAY

Where can I find Bézier curves?

Bézier curves are not only rife in the Adobe suite (in creative applications such as Premiere, Photoshop, and After Effects), but you’ll find them in just about any type of creative application.

Visual media creation applications are probably the first that come to mind, but let’s not forget audio engineering applications like Pro Tools, where Bezier curves can be used to modify assets by parameter or in the time.

Some common examples of Bézier curves in nature:

  • the pen tool in photoshop and vector design programs Like Adobe Illustrator (and just about every other creative app, in the Adobe suite and elsewhere).
  • Any application that uses Easy In / Easy Out keyframe curvessuch as Side effects​​​​​​.
  • Every time you deal with NURBSalso known as B-splines, in an animation or 3D modeling application such as Maya Where Blenderyou are working with bulk bezier curves.
  • CAD applicationsor any other digital tool used for designing, also use bezier curves for many things.


Bézier curves are hiding everywhere, all around us. How do these things do exactly what they do?

Related: How to Create or Edit a Pattern in Adobe Illustrator

How do Bézier curves work?


A Bezier curve in Photoshop.

When creating a new Bézier curve vector on your canvas in an application like Illustrator, you usually start by giving the program two points to work with; the first point, and the second, with the curve threaded between the two.

A quadratic Bézier curve is any Bézier curve created using only these two initial points – cubic Bézier curves consist of three, and so on. For now, we’ll focus on the first; the simplest possible bezier curves you can create in any of the types of software we’ve mentioned.

You’ll usually tell the application to create a Bézier curve instead of a linear vector by holding down the mouse and dragging the curve into place before releasing the second point; after releasing, you will have two interpolation handles for each point making up the curve, including any additional points you added afterwards.

What are all the things that determine the final appearance of your Bézier curve?

  • The placement of your two points, including their “altitude” relative to each other and the distance between them.
  • The interpolation of the handles found at each point – you use these handles to “steer” the curve, bending it into place.
  • Checkpoints; “imaginary” points found on top of a linear interpretation of the position and integral height of your start point and end point (this part has more to do with math than bezier curves in a sense practical and creative, but still very real)

What do these checkpoints look like?

Imagine two straight lines drawn towards each other from either end point, just looking at the outer edge on either side of the curve. The point where these two lines intersect in the middle will be the “control point”, mathematically of any quadratic Bezier curve, despite the fact that no set of interpolation handles necessarily connect directly to it.


the

Related: How to Vectorize an Image in Adobe Illustrator

Once you already have a curve drawn in front of you, you can use your handles to modify its trajectory at will. Bézier curves are linked by definition, which is why they can be used to join any two points on a finished field elegantly and in perfect balance.

The action of creating a Bézier curve is simple and intuitive; it’s so easy to see how this type of tool has achieved the ubiquity it currently enjoys.


highway probably designed with a Bézier curve

Bézier curves can be used to create your own original designs or to trace existing shapes, images and compositions. They are often used prominently in 2D vector animation, for example, as part of the cleaning process.

While artists around the world have certainly taken this concept and used it, its mathematical roots also make it extraordinarily useful in a number of other professions and disciplines.

A few other applications for Bézier curves outside of art and design include:

  • Architecture and construction, as in the design of highways.
  • Industrial design, including toy, furniture and automobile design.
  • Robotics – Bézier curves can aid in computer-aided locomotion and mapping.
  • 3D scanning in a biomedical context, where a digital object is created from many 2D cross-sections of the real thing (things like CT scans, to name one specific example).

This is to say nothing of the value of Bezier curves on an intellectual level, as they sit among the rest of what mankind knows about mathematics and the true nature of reality in a general sense. It’s hardcore and, at times, absolutely terrifying.

Related: Illustrator vs Photoshop: What’s the difference?

Math is fun: enjoy it with Bézier curves

Now that you know a little more about how Bezier curves work, we invite you to take these curves and put them to work. No matter where your next project takes you, Béziers guarantees a smooth and continuous progression from here to there, both literally and figuratively.


A pattern.
How to Create a Pattern in Adobe Illustrator

Looking to incorporate a pattern into your design? Learn how to easily create a pattern in Adobe Illustrator.

Read more


About the Author

Share.

Comments are closed.