Questions tagged [bezier]

A Bézier curve is a parametric curve frequently used in computer graphics and related fields. Generalizations of Bézier curves to higher dimensions are called Bézier surfaces, of which the Bézier triangle is a special case.

A Bézier curve is a parametric curve frequently used in computer graphics and related fields. Generalizations of Bézier curves to higher dimensions are called Bézier surfaces, of which the Bézier triangle is a special case.

In vector graphics, Bézier curves are used to model smooth curves that can be scaled indefinitely. "Paths," as they are commonly referred to in image manipulation programs, are combinations of linked Bézier curves. Paths are not bound by the limits of rasterized images and are intuitive to modify. Bézier curves are also used in animation as a tool to control motion.

Bézier curves are widely used in computer graphics to model smooth curves. As the curve is completely contained within the convex hull of its control points, the points can be graphically displayed and used to manipulate the curve intuitively. Affine transformations such as translation, and rotation can be applied on the curve by applying the respective transform on the control points of the curve. Furthermore, the convex hull of the control points acts as a bounding region for quick visibility tests; if the convex hull is not visible, then the Bézier curve is also not.

Quadratic and cubic Bézier curves are most common; higher degree curves are more expensive to evaluate. When more complex shapes are needed, low order Bézier curves are connected together. This is commonly referred to as a "path" in vector graphics standards (like SVG) and vector graphics programs (like Adobe Illustrator and Inkscape). To guarantee smoothness, the control point at which two curves meet must be on the line between the two control points on either side.

Bézier curves can be Linear (order 1), Quadratic (order 2), Cubic (order 3, the most common form in drawing and graphics software), and of higher order (more than 3).

Important Links:

1289 questions
172
votes
14 answers

how to draw smooth curve through N points using javascript HTML5 canvas?

For a drawing application, I'm saving the mouse movement coordinates to an array then drawing them with lineTo. The resulting line is not smooth. How can I produce a single curve between all the gathered points? I've googled but I have only…
Homan
  • 25,618
  • 22
  • 70
  • 107
139
votes
10 answers

How to create circle with Bézier curves?

We have a start point (x, y) and a circle radius. There also exists an engine that can create a path from Bézier curve points. How can I create a circle using Bézier curves?
Rella
  • 65,003
  • 109
  • 363
  • 636
92
votes
1 answer

Why is UIBezierPath faster than Core Graphics path?

I was playing around with drawing paths, and I noticed that in at least some cases, UIBezierPath outperforms what I thought would be a Core Graphics equivalent. The -drawRect: method below creates two paths: one UIBezierPath, and one CGPath. The…
Caleb
  • 124,013
  • 19
  • 183
  • 272
75
votes
10 answers

How to convert a 3D point into 2D perspective projection?

I am currently working with using Bezier curves and surfaces to draw the famous Utah teapot. Using Bezier patches of 16 control points, I have been able to draw the teapot and display it using a 'world to camera' function which gives the ability to…
Zachary Wright
  • 23,480
  • 10
  • 42
  • 56
60
votes
12 answers

Drawing Smooth Curves - Methods Needed

How do you smooth a set of points in an iOS drawing app WHILE MOVING? I have tried UIBezierpaths but all I get are jagged ends where they intersect, when I just shift the points 1,2,3,4 - 2,3,4,5. I have heard of spline curves and all the other…
BDGapps
  • 3,318
  • 10
  • 56
  • 75
52
votes
6 answers

Closest point on a cubic Bezier curve?

How can I find the point B(t) along a cubic Bezier curve that is closest to an arbitrary point P in the plane?
Adrian Lopez
  • 1,695
  • 1
  • 16
  • 22
45
votes
3 answers

Convert a quadratic bezier to a cubic one

What is the algorithm to convert a quadratic bezier (with 3 points) to a cubic one (with 4 points)?
jmasterx
  • 52,639
  • 96
  • 311
  • 557
42
votes
2 answers

What is the difference between cubic bezier and quadratic bezier and their use cases?

I have been playing around with canvas recently and have been drawing several shapes (tear drops, flower petals, clouds, rocks) using methods associated with these curves. With that said, I can't seem to figure out the difference between the use…
Conqueror
  • 4,265
  • 7
  • 35
  • 41
41
votes
8 answers

Checking if two cubic Bézier curves intersect

For a personal project, I'd need to find out if two cubic Bézier curves intersect. I don't need to know where: I just need to know if they do. However, I'd need to do it fast. I've been scavenging the place and I found several resources. Mostly,…
zneak
  • 134,922
  • 42
  • 253
  • 328
37
votes
8 answers

Drawing a Topographical Map

I've been working on a visualization project for 2-dimensional continuous data. It's the kind of thing you could use to study elevation data or temperature patterns on a 2D map. At its core, it's really a way of flattening 3-dimensions into…
35
votes
4 answers

Draw a quadratic Bézier curve through three given points

I have three points in 2D and I want to draw a quadratic Bézier curve passing through them. How do I calculate the middle control point (x1 and y1 as in quadTo)? I know linear algebra from college but need some simple help on this. How can I…
Alex
  • 353
  • 1
  • 3
  • 4
35
votes
5 answers

How can I fit a Bézier curve to a set of data?

I have a set of data points (which I can thin out) that I need to fit with a Bézier curve. I need speed over accuracy, but the fit should be decent enough to be recognizable. I'm also looking for an algorithm I can use that doesn't make much use of…
user791684
  • 386
  • 1
  • 3
  • 6
32
votes
4 answers

How to offset a cubic bezier curve?

I'm trying to create a "parrallel" bezier curve. In my attempts I've gotten close but no cigar. I'm trying to keep a solid 1px offset between the 2 curves (red,blue). My main goal is use a edge offseting algorythm to expand/shrink a svg…
Sean Thayne
  • 863
  • 1
  • 7
  • 9
31
votes
6 answers

Smoothing a hand-drawn curve

I've got a program that allows users to draw curves. But these curves don't look nice - they look wobbly and hand-drawn. So I want an algorithm that will automatically smooth them. I know there are inherent ambiguities in the smoothing process, so…
thund
  • 1,842
  • 2
  • 21
  • 31
31
votes
11 answers

How to draw a vector path progressively? (Raphael.js)

How to animate a vector path like it's being drawn, progressively? In other words, slowly show the path pixel by pixel. I'm using Raphaël.js, but if your answer is not library specific—like maybe there's some general programming pattern for doing…
Anton Strogonoff
  • 32,294
  • 8
  • 53
  • 61
1
2 3
85 86