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
28
votes
5 answers

Find the tangent of a point on a cubic bezier curve

For a cubic Bézier curve, with the usual four points a, b, c and d, for a given value t, how to most elegantly find the tangent at that point?
Fattie
  • 27,874
  • 70
  • 431
  • 719
28
votes
1 answer

TrueType Font's glyph are made of quadratic Bezier. Why do more than one consecutive off-curve points appear in glyph outline?

I'm writing a TTF parser. For a better understanding of the TTF format, I used TTX to extract the ".notdef" glyph data of C:\Windows\calibri.ttf as follow.
lzl124631x
  • 4,485
  • 2
  • 30
  • 49
27
votes
1 answer

SVG animate path's d attribute

Is it possible to use SVG to animate the d attribute of ? I can draw both a diamond and a circle as a path made of eight bezier curves:
rampion
  • 87,131
  • 49
  • 199
  • 315
26
votes
6 answers

Cheap way of calculating cubic bezier length

An analytical solution for cubic bezier length seems not to exist, but it does not mean that coding a cheap solution does not exist. By cheap I mean something like in the range of 50-100 ns (or less). Does someone know anything like that? Maybe in…
user2214913
  • 1,441
  • 2
  • 19
  • 29
26
votes
2 answers

Understanding cubic-bezier transition property in CSS

I have a div which contains a some slides and menu. #wrap { position: relative; top: 0; transition: top 1.4s cubic-bezier(.49,.22,.52,1.35); }
Can anyone explain to me what the transition property does…
UnderTaker
  • 853
  • 3
  • 13
  • 22
25
votes
7 answers

drawing centered arcs in raphael js

I need to draw concentric arcs of various sizes using raphael.js. I tried to understand the code behind http://raphaeljs.com/polar-clock.html, which is very similar to what I want, but, whithout comments, it is quite difficult to fathom. Ideally, I…
user592699
  • 481
  • 1
  • 7
  • 15
24
votes
2 answers

Cubic bezier curves - get Y for given X

I have a cubic bezier curve where the first and last points are given (namely P0(0,0) and P3(1,1)). The other two points are defined like this: cubic-bezier(0.25, 0.1, 0.25, 1.0) (X1, Y1, X2, Y2, also those values must not be smaller or larger than…
Peter W.
  • 2,323
  • 4
  • 22
  • 42
24
votes
3 answers

Create random shape/contour using matplotlib

I am trying to generate an image of a random contour using python but I couldn't find an easy way to do it. Here is an example sort of what I want: Initially I tought of doing it using matplotlib and gaussian functions, but I could not even get…
klaus
  • 1,187
  • 2
  • 9
  • 19
24
votes
8 answers

An algorithm to find bounding box of closed bezier curves?

I'm looking for an algorithm to find bounding box (max/min points) of a closed quadratic bezier curve in Cartesian axis: input: C (a closed bezier curve) output: A B C D points Image http://www.imagechicken.com/uploads/1270586513022388700.jpg Note:…
sorush-r
  • 10,490
  • 17
  • 89
  • 173
23
votes
1 answer

Finding curvature from a noisy set of data points using 2d/3dsplines? (C++)

I am trying to extract the curvature of a pulse along its profile (see the picture below). The pulse is calculated on a grid of length and height: 150 x 100 cells by using Finite Differences, implemented in C++. I extracted all the points with the…
JannaJ
  • 251
  • 2
  • 6
22
votes
4 answers

How to approximate a half-cosine curve with bezier paths in SVG?

Suppose I want to approximate a half-cosine curve in SVG using bezier paths. The half cosine should look like this: and runs from [x0,y0] (the left-hand control point) to [x1,y1] (the right-hand one). How can I find an acceptable set of…
janesconference
  • 6,333
  • 8
  • 55
  • 73
22
votes
2 answers

Animate a bezier path drawn in drawRect() Swift

I have this shape that i draw in drawRect() var rectanglePath = UIBezierPath() override func drawRect(rect: CGRect) { rectanglePath = UIBezierPath(rect: self.bounds) rectanglePath.fillWithBlendMode(kCGBlendModeMultiply, alpha: 0.7) …
Dănuț Mihai Florian
  • 3,075
  • 3
  • 26
  • 44
19
votes
2 answers

Find bezier control-points for curve passing through N points

Considering the following nice solution for finding cubic Bézier control points for a curve passing through 4 points: How to find control points for a BezierSegment given Start, End, and 2 Intersection Pts in C# - AKA Cubic Bezier 4-point…
jwin68
  • 191
  • 1
  • 1
  • 4
19
votes
4 answers

Calculating control points for a shorthand/smooth SVG path Bezier curve

Link: Official SVG Reference Hello men and women, I am having some trouble with shorthand (defined by S or s in pathdata) bezier curves defined as SVG paths. Specifically, how to calculate the first control point. Say we have one curveto command…
Adam S
  • 8,945
  • 17
  • 67
  • 103
19
votes
4 answers

Android: digital signature using Bezier

I am trying two draw digital signature using Bezier as show in above image.when i touch and try to draw line then the result is dot line but not getting continuous line. Simple signature done by using simple signature but I want to create more a…
kyogs
  • 6,766
  • 1
  • 34
  • 50
1
2
3
85 86