Programming & Using Splines - Part#1

Splines, in this case Catmull-Rom splines, offer a simple way to have curves in your applications. This video explores the programming to use spline paths and loops that go through all control points yielding an effective way to have more natural NPC AI behaviour.
Github: github.com/One...
Blog: www.onelonecode...

[@F-Andre]

when i see you programming, it always looks soo easy...

[@weirdconstructor2165]

This tutorial finally connected all the dots I collected when researching the usage of splines for my voxel drawing engine. Thanks for the nice and graphical explanation, especially also the note about the gradients of the spline.

[@javidx9]

Hey thanks and no problem Weird Constructor - I'll let the connecting the dots pun slide this time :D

[@prank855]

this is a hidden gem of a channel, keep it up c:

[@javidx9]

Cheers prankster, I will!

[@BrianMendoza93]

That gradient concept is what I needed to recap my calculus! Thank you for amazing video.

[@javidx9]

no problem Brian!

[@Cons-Cat]

To this day, this is one of my very favorite programming tutorials.

[@bonafide9085]

I was looking for this algorithm for my application! Overlapping the control points to make smooth closed path is smart! Thanks a million!

[@SegoliaFlak]

Fantastic vid and I love your way of explaining things, answers the question of a younger me who always wondered how the homing laser from raiden fighters would have been implemented

[@javidx9]

Thanks Segolia!

[@_g_r_m_]

Well, i spent a few days making a crazy algorithm that splitted my paths in such a way that a bezier curve could closely pass through all the points, just to find out about splines. Your explaination was really helpfull, specially translating all the intimidating math from I found on the wikipedia to code and doing the gradient rotation.

[@dovedozen]

I've been beating my head against ren'py's implementation of splines for like a month because I couldn't find any resources that Actually explained what a control node even is & I have finally run out of other stuff to do instead of figuring it out so I can actually animate with splines & this video was SO HELPFUL, THANK YOU

[@Godzilla7302]

Thank you so much for a great tutorial. Finally, I learned how to program splines. I am not a c ++ programmer but still understood the math so now I have programmed my first spline routine in assembler for an old computer that was popular in the 80/90s. Uploaded the routine to my KZbin channel.

[@balorprice]

This is lovely and clear! 12:30 for where the magic happens.

[@javidx9]

Cheers Balor!

[@acatisfinetoo3018]

I just discovered this channel and i have to say it's a true treasure trove of knowledge 😉

[@124mun]

Theres a thing in the android API called PathDashPathEffect that helps you stamp a path along another. Now i understand how its underlying code works. Brilliant 👏.

[@procactus9109]

I guess I will have to watch part 1&2 a 3rd time.

[@Pedozzi]

this is gold, you programmers are geniuses

[@AlexTuduran]

To access a "negative" index, you can just add the length and do the modulus on that: left_i = (i - 1 + length) % length; Doing this will get you rid of the ternary operator and you can go as much as you want in the negative axis.

[@teucay7374]

This video is useful and amazing, I really love your content. Great job!

[@MrSerozka]

Great explanation, thank you (and you still have 0 dislikes, wow)

[@javidx9]

Thanks MrSerozka!

[@vaflov]

Marvelous explanation! Thank you! This has been very useful to me.

[@ArnaudMEURET]

I heart your work. From what I could gather from watching your great videos, I am quite surprised that you prefer Catmull-Rom splines over Béziers curves. I find the absolute elegance of Béziers curves (especially when used through quads) and the superior control they give you, very satisfying. As for the rasterization, check out the Casteljau algorithm. Not optimal but so beautifully simple to implement. The « point-on-path » argument for CR splines becomes a non-issue with just a tiny bit of implementation abstraction (which you’ll need anyway as soon as _things get real_).

[@aeolinferjunnoz2099]

I just found your channel, awesome Videos man. I just started learning c++ and your videos helped alot.

[@javidx9]

Hi Flo, that's great, thanks! Good luck with your study and remember to keep it fun!

[@aeolinferjunnoz2099]

Thank you, i'll remember to keep it fun ^^

[@GNARGNARHEAD]

*writes down "straight line is NOT curve"*

[@redpug5042]

this triggers my ptsd in math class lmao

[@xxlabratxx01]

Actually is a curve in some sense

[@BrekMartin]

I’ve seen the apparent quality of a vector contour map product improved this way. It takes a grater of authentic sample points to make a curved line. If the map data is preprocessed so more points can be added, the apparent quality is improved, but it would depend on probability to do with the way mountains form, as to whether the result better represented the real terrain or not.

[@javidx9]

That's quite cool - the earth is having an effect on the efficiency of an algorithm?! The splines I use here are processor costly because I want to twiddle with them, but you can pre-process a lot of it if they remain static.

[@BrekMartin]

Yes it’s done before the GPS unit (or even the consumer) sees the map data. You don’t have to make the GPS unit draw differently (even if you could), the only overall cost is the map data becomes larger with extra points to trace around curves.

[@hago7568]

04:00 "....we would just get a straight line which you don't need me to tell you isn't a curve" - rofl - really like your videos please keep going!!

[@humanistreason]

Thanks for the video. Very informative. A suggestion for future video: show us how to smooth a set of values z(x,y) as a continuous color map for visualization, much like altitude maps

[@javidx9]

Hmm, OK Elvis, I'll add it to my list!

[@GregoryTheGr8ster]

May I offer a nifty suggestion? At 22:00, you show how you can use the atan2() function to get the angle for the gradient. But you know what? You can just use gl.x and gl.y directly for this. They already are your gradient! You don't need to use r = atan2(-gl.y, gl.x), cuz you are then using sin(r) and cos(r) to recalc gl.x and gl.y. Just be sure to normalize gl.x, gl.y.

[@maxymvoytovych1196]

How can i make first point connected to second and last to the one before it? Great video btw, helped me so much

[@zink2584]

Can anyone explain how he got the equations q1 to q4 at around 12:52?

[@sonulohani]

Thanks, man. I needed this tutorial

[@javidx9]

No problem Sonu, man splines are so useful...

[@bubuDev]

pure gold !! thanks for this !!

[@moagnor]

Thank you for learning me new words like "orthogonal"...

[@OJASCKI]

Great video, thanks for the knowledge!

[@POGRetroModernGaming]

I ❤ your contents 😊

[@javidx9]

Aww thanks POG! 😄

[@seditt5146]

Am I correct in assuming this is the means through which they made the creature creator in Spore? It would be cool to know the basics to how they made that because its relevant to something I wish to do.

[@whmlprod]

Its crazy how I can fail grade 12 math twice but I can watch 1 video of yours and learn the basics of parabolas in minutes... I blame the teacher lmfao

[@andremendoncabastos5103]

I just don't quite understand where do you get these equations: q1 = -ttt* 2+tt - t, etc.?

[@cjgstudio]

hello - im a young programmer (23) been in the industry since i was 16 and clueless about so much. Thinking of going for a phd next year so i have time to really get nice and personal with some concepts. Do you have any advice for programmers or a previous video related to impostor syndrome? Or literally started out. There seems so much to learn and not enough time

[@massmenon]

Great video. A helpful thing would be to use word wrap, so that you wouldn't have to scroll left and right. (Alt+Z on vscode)

[@brunojani7968]

that is vs studio not vs code. they are quite different.

[@bluescanfly1981]

It takes some spine to use a spline! Just found your channel and now i am hooked. I've been coding for over 15 years, and your videos got me back to writing code for fun. Console reminds me of mode 13h and the hours spent drawing gouraud shaded triangles or trying to anyways . I wanted to fork it to and port it ncurses for the *nix and OSX crowd. Thoughts?

[@javidx9]

Lol bluescan thats great! Thanks! The community developed a portable version that uses SDL as a back end for linux. Though we've not many mac testers.

[@bluescanfly1981]

@@javidx9 Cool! Is the SDL version somewhere in your Repo?

[@javidx9]

It is. You need the image file that goes with it. On the whole ive moved to olcPixelGameEngine.h its exactly the same but doesn't use the terminal and is natively cross platform.

[@bluescanfly1981]

@@javidx9 just found the video about it thanks :)

[@patrickstival6179]

How does the gradient help you find the angle that is orthogonal to the path? Where can I find more info about that?

[@TheLazy657]

Some how this does not make sense to me. Why does 13:08 work? isnt points[p0] a force from 0/0 to p0 witch is scaled by q1? And not, how intedet, a force from p0 to p1 witch is scaled... Sorry for the horrible gramma, its late and i am majorly confused.

[@timh.6872]

I wonder if it would be possible to do some kind of depth-first iteration for the spline drawing that divides the t increment by 2 until the pixel to be painted next is the same as the pixel that was just painted, and then move back up. This should have a runtime equal to the path length (best case scenario) and a memory usage equal to the log_2 of the path length. For guaranteeing filled in spline segments of any distance without any tricky issues of cusps and discrete derivatives, I think that's pretty good.

[@javidx9]

Sounds like its worth trying Tim, give it a go!

[@timh.6872]

@@javidx9 Will do. I got sucked into the rabbit hole of centripetal parameterizatioms and their unreasonable effectiveness after this, so I've got way too much math floating around in my head right now.

[@juancarlostensolsona9107]

Amazing channel!

[@WavePlayz]

This is gold

[@AfterHoursEngineering]

Excellent!

[@javidx9]

Hey Thanks William.

[@francescopiazza4882]

great stuff!

[@repeaterlanes8024]

Dont think thisll get answered considering its been 5 years but im wondering if by changing the equations used for the influence each points have on one point, i can change the way curves are formed? the way im seeing it its like gravity between objects. the stronger the bias each control point has on the point, the more the curves turns towards it. hard to explain what im thinking but from what im seeing it might even be able to do gravitational physics in a way-

[@javidx9]

Altering the coefficients will affect the trajectory. Don't forget there's infinity correct solutions for joining 2 points, so you're choosing one which is the most aesthetic for your needs

[@CarstenMeyer]

Well done

[@javidx9]

Thanks Carsten.

[@helderfilho4724]

Thank you!

[@zohan008]

when you take out the -3.0f from path.points.size - 3.0f. it makes the struct sSpline be out of index for me. Say i have 10 points. at T = 7 it will be fine but once it goes to t=8 it will have p0 = 7 , p1 = 8, p2 = 9, p3 = 10 which is out of index since its 0,1,2,3,4,5,6,7,8,9. any idea why that is? like it wont draw from the first point to the second point and from the second last one to the last one, and i been stuck on this.

[@DetectivePoofPoof]

Well this is super late, but I had issues with index out of range for non-looped paths but I fixed by adding this before setting the points ( only for the non/looped bit ): t = (int)t > Points.Count -4 ? Points.Count-4 : t ;

[@poorman-trending]

20:47 Hunger

[@Ncyphen]

How do you create a perfect 90 degree turn with a cubic spline?

[@official-obama]

This is why compound beziers are frequently used

[@windgod9442]

which programming language was used here

[@javidx9]

C++

[@charactername263]

Would you make an explanation on how to find the cubic curve that has a gradient of 0 at 2 given control points?

[@javidx9]

Differentiate the curve, and then solve for when dY=0. If its cubic, when you differentiate it, you'll have a quadratic, which can be solved using the well known quadratic formula. If you know your two control points, then start with that quadratic equation, and then integrate it to form the cubic.

[@yairkatz6223]

What about bezier curves?

[@tydie1212]

Can you explain why p1 is 0, but to calculate it you take the floor + 1? Why is the +1 necessary if p1 should be 0?

[@thebigmacd]

p1 isn't always 0 in the general case. When you start adding segments, t becomes larger than 1. When 1

[@JustinMayfield]

#3:43 Giggity giggity!

[@yadt]

But how do you reticulate them‽

[@nightwintertooth9502]

Am working on this too. Need to parameterize via calculating derivatives, with hematite curves its the second order for curvature in terms of the magnitude which is the square root of the distance between p0, p1, to reticulate the curve evenly. You can't do it the way he's doin, I was able to accomplish via one loop.

[@richardeadon6396]

Accidental swastika at the beginning there edit: or was that the joke with "mind of its own"? 😄

[@vogelpapafinn8156]

My curve isnt visible...

[@openroomxyz]

Does this work in 3d?

[@javidx9]

It does! Very easy too, just follow the pattern and add a z term.

[@openroomxyz]

@@javidx9 Thanks!

[@danielharty1157]

​@@javidx9 Great video! I'm learning a lot. But I think you are oversimplfying a little bit when you say it all carries over to 3D just by adding a Z-term, haha. In 3D it becomes obvious that we don't really care much about the gradient/normal. It is very unstable, an agent following the gradient in 3D will hardly seem to point in the direction of the path, frequently changing direction suddenly or turning around slowly over the course of a section of the curve. At first I thought I was finding the gradient/normal wrong, but that's just how normals are. For some reason, this isn't so noticeable in 2D. Right now I'm trying to implement "rotationally minimalized frames". Basically you set the orientation of the first plot point and then calculate each next points rotation using the prior. Obviously this must be recomputed each time the control points are moved. Search terms for anyone looking for a solution to the 3D normals problem: "getting consistent normals along a 3D (Bezier) curve" (math stack exchange) "rotationally minimized frames" (paper on microsoft)

[@javidx9]

An easy method is to sample two points along the spline, the difference is the gradient, the normal is now a plane defined by the rear point and the gradient unit vector. Where you sample circumferentially in that plane is up to you, but yeah you tend to care about gradient more than normal, and gradient is trivially computable.

[@iProgramInCpp]

How do you get the Windows 7 title bar on Photoshop in Windows 10??

[@user-jp1qt8ut3s]

Next: collision with splines

[@Adomas_B]

Is there a difference between using splines and bezier curves?

[@javidx9]

A Bezier curve is a type of spline, so no, no difference.

[@wi2rd]

0:43 hmmmm

[@coolgroyper]

LOL

[@guzzodavenport3263]

3:42 not my proudest fap

[@Zildawolf]

I have no use for this. Absolutely none. Still gonna watch it though