Stack Overflow
Stack Overflow

Questions tagged [cubic-bezier]

74 questions
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
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
13
votes
2 answers

Subdivision of Four-Sided, 2D Shape

I'm looking for an approach to splitting a four sided shape into a grid. For example: Ultimately I need to be able to convert the resulting shapes to SVG, but I'm happy to handle conversion to/from another library or coordinate system. What I'm…
Undistraction
  • 42,754
  • 56
  • 195
  • 331
8
votes
2 answers

Cubic bezier curves - get Y for given X - special case where X of control points is increasing

I've read a few discussions regarding finding Y at X for a cubic Bezier curve, and have also read this article regarding the matter. My case is more constrained than the general one, and I wonder if there's a better solution than the general ones…
Jake
  • 292
  • 2
  • 10
7
votes
3 answers

Is it possible to express "t" variable from Cubic Bezier Curve equation?

I want draw bezier curve only by fragment shader to connect nodes in my editor. I know all 4 points that define Bezier Curve. And Fragment Shader is called for every pixel, so i can just check: if "t" for gl_Coord.x is between 0 and 1 then set…
Ryan Kane
  • 93
  • 1
  • 6
5
votes
1 answer

how to draw smooth curve using native Javascript code without ctx.bezierCurveTo?

I need to draw and get coordinates of bezier curves of each steps with native Javascript without ctx.bezierCurveTo method. I tried below method but it was not worked properly.Here I attached my code and output curve. const accuracy = 0.01; let temp…
Randima Lahiru
  • 355
  • 1
  • 10
5
votes
1 answer

MPAndroidChart: LineChart with cubic bezier displays wrong (spikes and loops)

I am trying to make a LineChart with a cubic plot. The result is like in the screenshot below: the cubic bezier displays wrong and has "spikes". Can someone help me make it appear correctly? This is my config : LineDataSet lineDataSet = new…
Malcom
  • 283
  • 3
  • 11
4
votes
1 answer

How do I find the control points for a Bezier curve?

I need to implement connections in the form of curved lines in C# (Unity). I would like to get the result as similar as possible to the implementation in Miro.com (see screenshot). After attaching the curve, I calculate the path of the cubic Bezier…
g0dzZz1lla
  • 59
  • 1
  • 4
4
votes
2 answers

Algorithm behind Inkscape's auto-smooth nodes

I am generating smooth curves by interpolating (lots of) points. I want to have local support (i.e. only few points determine the smooth curve locally), so I do not want to use a classical interpolation spline. Bezier curves to me would be a natural…
Franz
  • 340
  • 1
  • 10
4
votes
2 answers

Express SVG arc as series of curves

I'm trying to accurately express an SVG Path as a UIBezierPath however sadly the addArc on UIBezierPath does not account for ellipses, only circles (only 1 value for radius). bezierPath.addArc(withCenter:CGPoint radius:CGFloat startAngle:CGFloat…
Magoo
  • 2,552
  • 1
  • 23
  • 43
4
votes
2 answers

B-Spline Curves coefficients - division by zero (code in DELPHI)

I was trying to implement the following recursive formula to my code but to my surprise it turns out that after implementing this to DELPHI, I get an error due to division by zero. I am 98% sure that my knot vector is correctly calculated, which in…
skrat
  • 648
  • 2
  • 10
  • 27
3
votes
0 answers

Cubic bezier function for finding progress given time and two control points

I am trying to find a JS algorithm to find the ypos of a cubic bezier given the xpos. the first and last control points will be (0,0) and (1,1) and it should throw an error if any of the inputted control points' xpos is less than 0 or greater than…
user15518831
3
votes
1 answer

Calculate a curve that goes through all the points

I having trouble building a curve that goes through all the points but not outside of those points as the bezier curve does in SVG. I have tried Bezier Curve, Quadratic Curve, Smooth Curve, and Casteljau Here is a link to my example…
user1730289
  • 273
  • 4
  • 15
3
votes
0 answers

How do I Calculate Control Point/Handle X-Position for a Cubic Bezier Curve if I have the Formula?

I have a curve that adheres to the bezier formula, and then I have to back-calculate the handle positions. We know that the Po or Poy are [493.33970441 486.78826487 497.69599613 489.07543952] for Po, P1, P2, P3, through least squares interpolation.…
njho
  • 2,023
  • 4
  • 22
  • 37
3
votes
3 answers

How can I create a 3D cubic-bezier curved triangle from 3D points in Three.js?

Following this topic, I am trying to generate a 3D curved triangle as a NURBS surface, but I don't understand how to set up my 3D points to do that. Here is the current implementation : var edges = this.getEdges(), // An edge is a line following 4…
Tot
  • 873
  • 2
  • 13
  • 30
1
2 3 4 5