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
13
votes
1 answer

IOS : Animate transformation from a line to a bezier curve

I would like to animate a straight line curving into a bezier curve (from "_" to "n"), is there a library somewhere that can help me to do it ? I know how to draw a Bezier curve with UIBezierPath, I could redraw rapidly and progressively do the…
Nicolas Henin
  • 3,244
  • 2
  • 21
  • 42
13
votes
6 answers

How to find out Y coordinate of specific point in bezier curve in canvas?

I need to find out Y coordinate of specific point of bezier curve in canvas. Do you know, how to find it out? Thank you
Jan Kožušník
  • 683
  • 3
  • 16
  • 30
13
votes
6 answers

Drawing a bezier curve between a set of given points

What is the best way to draw a bezier curve, in iOS application, that passes through a set of given points
user462455
  • 12,838
  • 18
  • 65
  • 96
13
votes
5 answers

Which JavaScript library can do boolean operations with bezier curves?

Does a Javascript library exist which can perform boolean operations on paths (bezier curves)? I know about Paper.js and Raphael.js, but both cannot perform these actions now.
philipp
  • 15,947
  • 15
  • 61
  • 106
13
votes
5 answers

Finding Y given X on a Cubic Bezier Curve?

I need a method that allows me to find the Y-coordinate on a Cubic Bezier Curve, given an x-coordinate. I've come across lots of places telling me to treat it as a cubic function then attempt to find the roots, which I understand. HOWEVER the…
Captain Awesome
  • 141
  • 1
  • 4
12
votes
5 answers

convert bezier curve to polygonal chain?

I want to split a bezier curve into a polygonal chain with n straight lines. The number of lines being dependent on a maximum allowed angle between 2 connecting lines. I'm looking for an algorithm to find the most optimal solution (ie to reduce as…
dr jerry
  • 9,768
  • 24
  • 79
  • 122
12
votes
3 answers

Splitting a bezier curve

I'm working on a game for iPhone which creates a path after your character as you move (movement is similar to snake but curvy in terms of steering). The way im doing it now is by just keeping all the vertices the player has been on in an array and…
Jonathan
  • 2,968
  • 3
  • 24
  • 36
12
votes
1 answer

How can I draw seamless curve using android graphics ?

I want to draw seamless curve using Android graphics using like followings canvas.quadTo(.....); Android reference said that this method using Bezier curve but this method don't support drawing curve which have more than three points P1 , P2 , P3…
Jindong Jung
  • 457
  • 1
  • 6
  • 19
11
votes
6 answers

Move an object on on a Bézier curve path

I want to move my image on a Bézier curve path from top to bottom but I can't get how can I calculate x/y points and slope from this path. The path looks like the following image: I have start points, end points and two control points. Path path =…
Sunny
  • 14,522
  • 15
  • 84
  • 129
11
votes
7 answers

How to calculate the nearest point of a line and curve? .. or curve and curve?

Given the points of a line and a quadratic bezier curve, how do you calculate their nearest point?
Robin Rodricks
  • 110,798
  • 141
  • 398
  • 607
11
votes
4 answers

y coordinate for a given x cubic bezier

This question is very similar to: Quadratic bezier curve: Y coordinate for a given X?. But this one is cubic... I'm using the getBezier function to calculate the Y coordinates of a bezier curve. The bezier curve starts always at (0,0) and ends…
bopjesvla
  • 755
  • 4
  • 15
  • 22
11
votes
4 answers

Algorithm to add Color in Bezier curves

I'm playing with GD library for a while and more particuraly with Bezier curves atm. I used some existant class which I modified a little (seriously eval()...). I found out it was a generic algorithm used in and convert for GD. Now I want to take it…
Shikiryu
  • 10,180
  • 8
  • 49
  • 75
11
votes
3 answers

Svg polygon rounding

I am working on an application that is using svg move/rotate/zoom functionalities. I'm programming the back-end in Laravel and the front-end is using html/css/javascript. I've seen on the web that is possible for a polyline to have some sort of…
John doe
  • 113
  • 1
  • 1
  • 4
11
votes
3 answers

NV_path_rendering alternative

I just watched a very impressive presentation from Siggraph 2012: http://nvidia.fullviewmedia.com/siggraph2012/ondemand/SS106.html My question is, this being a proprietary Nvidia extension, what are the other possibilities to quickly renderer Bezier…
Ecir Hana
  • 10,864
  • 13
  • 67
  • 117
11
votes
1 answer

How to draw a Bezier curve programmatically in WPF?

I need to write a simple WPF program to draw a Bezier curve, but I have to draw it programmatically since I need to allow user to modify the shape interactively. Any code sample to do this task is highly appreciated! Thanks, Mike
mike