2

My cubic-bezier function is defined by [0.1,0.8,0.2,1] where [x1,y1,x2,y2].

I am rotating element 720deg in a duration of 1200ms. How to calculate t for every 60 degrees? ie., I need to trigger JavaScript event when the object has turned 60, 120, 180, 240, 300, 360, 420, 480, 540, 600, 660, 720 degrees.

If I am not mistaken, I need to get every x value where y is (60/720), (60/720)*2, (60/720)*3, (60/720)*4, (60/720)*5, (60/720)*6, (60/720)*7, (60/720)*8, (60/720)*9, (60/720)*10, (60/720)*11, (60/720)*12 and then multiply x*duration (1200ms).

I've looked at the http://blog.greweb.fr/2012/02/bezier-curve-based-easing-functions-from-concept-to-implementation/ as well as https://github.com/arian/cubic-bezier implementations.

If everything so far is correct, how do I get the x value for y?

Gajus
  • 69,002
  • 70
  • 275
  • 438
  • A cubic bezier curve is not defined by four numbers, but rather four points (unless `[0,0]` and `[1,1]` are implied) – John Dvorak Jan 22 '13 at 17:56
  • It is defined by two points, which I have given as `[x1, y1]` and `[x2, y2]`. `[0,0]` and `[1,1]` as you have pointed out are implied. – Gajus Jan 22 '13 at 17:58
  • So, you want the inverse for a cubic function defined by four points? – John Dvorak Jan 22 '13 at 17:58
  • @JanDvorak It sounds like it. – Gajus Jan 22 '13 at 17:59
  • Finding the cubic's coefficients from the keys should be easy. To find a zero of a cubic function, you can use an exact formula or Newton's iterative algorithm. – John Dvorak Jan 22 '13 at 18:03
  • Possible duplicates: [Transform 2d spline function f(t) into f(x)](http://stackoverflow.com/q/11518054/1468366) and [How to find intersecting Y values along a bezier spline?](http://stackoverflow.com/q/8953931/1468366). – MvG Jan 25 '13 at 11:11

1 Answers1

1

First of all, what you have is not Bezier spline, but an easing curve: the special case of cubic Bezier spline with starting point in (0.0,0.0) and ending point (1.0,1.0) used to produce animations.

Then your animation will look better, if you use equal time intervals rather than equal angle rotation intervals. t is essentially a time parameter, so the curve is given by

y(t) = 3*(1-t)^2*t*y1 + 3*(1-t)*t^2*y2 + t^3.

where t belongs to interval [0.0,1.0].

Then the actual angle will be

α(t) = 720 * y(T/1200)
     = 720 * (2.4*(1-T/1200)^2*(T/1200) + 3*(1-T/1200)*(T/1200)^2 + (/1200)^3)

where T is time in milliseconds.

divanov
  • 6,173
  • 3
  • 32
  • 51