1

I have been searching for an answer to this question for weeks now and I simply can not figure this one out. I've asked a question about it on SO once already, and another question in Mathematics, and it seams that nobody is able to solve this. It seems like such a simple issue, and one that's been solved many times before, but I just can't seem to find a solid answer or anything that I can comprehend or understand.

I simply need to be able to pass in a cubic bezier curve (both anchor points and both control points) and an X position inside that curve, and have some equation spit out the corresponding Y position for the X position that I passed in. Could someone please explain this to me a bit? I've seen countless questions asking this same exact question, and I can not find a single comprehensible answer. I even read through source code and searched Apple docs and CSS docs and every example I can. I spent 20 minutes churning around each answer inside my head to see if I could glean anything off it, and I simply can't solve this. If you have some information to share with me or anything you could tell me to help me hone in on an answer it's greatly appreciated!

I've tried to accomplish something similar to this using t, so I can pass in all the x or y values of a cubic bezier along with a value t which is between 0 and 1 and have it spit out a corresponding X or Y value... But this simply doesn't give me the results that I expect, nor the results that I need. I read that it may be a good solution to try to solve for t given an X position, but I have absolutely no idea how I would go about converting t to X at all, and there are no decent recourses for this anywhere on the web.

I even read through the code of some websites which are used for creating cubic beziers to see how they solve it and they simply don't. They just use CSS' built-in transitions, and I can't find the source code for those anywhere on the internet.

I'm really desperate here. It's been days of non-stop research, and I initially started trying to solve this problem over a month ago. If I ever come to a conclusive answer I've promised myself that I'll publish a small article explaining how this is done and providing others with this information that seems to be so hard to find. I'm sorry that this question seems so lengthy and off-topic, but currently I'm just desperate for information. I will post a much more long-term-friendly version of this question to make sure that it remains "wiki-like", but for now I really just need an answer!

(If you provide an answer which includes any code, feel free to write the code in any language you'd like. It's the equation that I'm after, so I will simply re-write it in the language I need and that won't be a problem.)

OOPS Studio
  • 732
  • 1
  • 8
  • 25
  • What were you searcing for? Because I've had https://pomax.github.io/bezierinfo/#yforx up for _quite_ a while now, and it's not hard to find using Google...? – Mike 'Pomax' Kamermans Apr 11 '21 at 03:39
  • Ah, thank you. I will certainly give that a read (have already started!). I hope that this will be very helpful to me, I appreciate you sharing. As for what I've been searching for, my searches were mostly along the lines of "calculate y position on cubic bezier using given x" or "how to find y on bezier when given x position" or "how to convert x position on cubic bezier into time" etc. I searched about 30-40 times with things along these lines and opened the first 4-5 results each time, I never came across your page. I'm not sure why though. – OOPS Studio Apr 11 '21 at 03:53
  • Sorry if this sounds like a stupid question, but what exactly does the `getRoots()` function do in your code snippet on your site? I read the whole section twice and did a quick search through the whole page to see if it was explained elsewhere, but it doesn't seem to be. I understood everything (for the most part!) until that one line where you `getRoots()` all the x coordinates and take the 0th item that it returns. I can't seem to figure out what is happening there and it's preventing me from creating something that performs similarly. – OOPS Studio Apr 11 '21 at 04:03
  • What is `p`? It appears that you're writing to `p.x` while reading from `p[index]` which confuses my brain because, as a JS programmer, that would be non-working code. I assume that this is simply a language that I'm not familiar with, but it's so foreign to me that I can't seem to figure out what `p` contains or where it's declared. To me it seams that `foreach p in xcoord` is essentially saying "for every value in xcoord array, subtract x from its `.x` property" but then you access `p` later as if it's an array, when it appeared that you just used it as an iterator. I'm very confused, sorry. – OOPS Studio Apr 11 '21 at 04:13
  • getRoots is explained in [the section on root finding](https://pomax.github.io/bezierinfo/#extremities). Also as a fellow JS programmer: yeah that code is confusing and can do with a cleanup. https://github.com/Pomax/BezierInfo-2/issues/305 should better explain it for now. – Mike 'Pomax' Kamermans Apr 11 '21 at 05:27
  • Okay, so I've typed up your function in JavaScript, but in doing so I ran into this: `crt(x) = x < 0 ? -pow(-x, 1f/3f) : pow(x, 1f/3f);` in your answer here: (https://stackoverflow.com/questions/51879836/cubic-bezier-curves-get-y-for-given-x-special-case-where-x-of-control-points) In this snippet, what are `1f` and `3f`? You don't mention them at all up until this moment, and I can't figure out what I should put in their places. Once I get this one last thing solved I can run some tests through it and see if I did everything right. >.< Fingers crossed. – OOPS Studio Apr 11 '21 at 08:19
  • Standard floating point number notation, used in many programming languages (C, C++, Java, etc.). So just remove the `f` if you're using JS, since the JS `Number` type is already a floating point number there. – Mike 'Pomax' Kamermans Apr 11 '21 at 16:11
  • there are already quite a few very good QAs about this topic in here on SE/SO for example see: [Is it possible to express “t” variable from Cubic Bezier Curve equation?](https://stackoverflow.com/a/60113617/2521214) just search what you need ... – Spektre Apr 11 '21 at 18:31
  • Thanks a ton Mike. I can't believe I didn't think of that honestly. I literally learned that when I was learning Java and I know that Processing is built on Java so I really should have figured that one out, but somehow it stumped me all the way up until this moment. Thanks for your help, I now have it running and will test it as much as I can to see if it will do what I need! (I will try to not comment here so much, I just felt it was important to acknowledge you/thank you for your time.) – OOPS Studio Apr 11 '21 at 21:47
  • Alright, so everything is working great. I get a linear animation when I use `(0,100,33,66,66,33,100,0)` as my bezier and increment `x` by 1 each frame from 0 to 100, and that's great! However, if I reduce my bezier to `(0,1,0.33,0.66,0.66,0.33,1,0)` and increment `x` by 0.01 each frame from 0 to 1, suddenly everything stops working. I assume this is to be expected, as some part of your code probably filters out cases like this and/or rounds or something similar, however for me this is a big deal since 100% of the beziers I'm working with are 1x1. Is there any way to fix this? – OOPS Studio Apr 11 '21 at 22:11
  • Emm. I answered you [there](https://stackoverflow.com/questions/66774792/given-a-cubic-bezier-curve-with-fixed-endpoints-how-can-i-find-the-x-position-o), deduced coefficient of cubic equation, gave link to cubic equation solution. What were wrong? – MBo Apr 12 '21 at 04:37
  • @MBo I'm not smart enough to figure that out, lol. Even now knowing the solution (and having working code implementing the solution) going back and reading over your answer I still can't figure out what it means. My brain just can't wrap around it. I remember spending hours trying to work it out when you posted it and I just couldn't get it. (And still can't. >.<) – OOPS Studio Apr 12 '21 at 05:51
  • Probably still worth closing this as a duplicate of [Given a cubic Bezier curve with fixed endpoints, how can I find the x position of a point along it when given a y position to check?](https://stackoverflow.com/questions/66774792/given-a-cubic-bezier-curve-with-fixed-endpoints-how-can-i-find-the-x-position-o) – Mike 'Pomax' Kamermans Apr 12 '21 at 21:03
  • No, I don't find them to be duplicates, given that one of the answers solved my problem and one of them didn't. I can mark it as a dupe if you think it will help future users find what they're looking for, but from my perspective I don't see them to be similar. (I'm basing this on the fact that both ask similar questions, but only one generates an answer which solves the problem, which this may be flawed logic I'm not certain.) – OOPS Studio Apr 12 '21 at 21:10
  • 1
    Note that this one doesn't have an answer, it only has comments. If the _questions_ are the same, and they seem to be, then this would be a duplicate. If you don't understand MBo's answer, then ask them to explain it in comments on that answer, but you said "This is a great answer, thank you" so clearly at the time you understood it just fine? I'd definitely consider this a duplicate, and I'd urge you to accept MBo's answer on your other post, if you still think it's a great answer. If not: time to comment there =) – Mike 'Pomax' Kamermans Apr 13 '21 at 18:38
  • Alrighty, will do. Thanks for the suggestions! And nah, I didn't understand it at the time, I just knew that it was well-written and I didn't want to just ignore it since I very much appreciated his time. Will go mark it as accepted! – OOPS Studio Apr 13 '21 at 19:17
  • 1
    @Mike'Pomax'Kamermans I was going to say you should promote your comments to an Answer, then expanded the comments and saw it was a possible duplicate. Still might be worth it, as your comments address other resources to solve the problem - like your book. Which is great, btw, just made a donation. – John C Mar 15 '22 at 17:27

0 Answers0