Programming & Using Splines - Part#1

Sdílet
Vložit
  • čas přidán 5. 08. 2017
  • 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/OneLoneCoder/Javid...
    Blog: www.onelonecoder.com

Komentáře • 105

  • @F-Andre
    @F-Andre Před 4 lety +29

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

  • @weirdconstructor2165
    @weirdconstructor2165 Před 6 lety +35

    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
      @javidx9  Před 6 lety +12

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

  • @bonafide9085
    @bonafide9085 Před 4 lety +3

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

  • @prank855
    @prank855 Před 5 lety +42

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

    • @javidx9
      @javidx9  Před 5 lety +6

      Cheers prankster, I will!

  • @Cons-Cat
    @Cons-Cat Před 3 lety +1

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

  • @BrianMendoza93
    @BrianMendoza93 Před 5 lety +8

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

  • @Godzilla7302
    @Godzilla7302 Před 3 lety +1

    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 CZcams channel.

  • @_g_r_m_
    @_g_r_m_ Před 2 lety

    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.

  • @acatisfinetoo3018
    @acatisfinetoo3018 Před 2 lety

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

  • @SegoliaFlak
    @SegoliaFlak Před 4 lety +2

    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

  • @vaflov
    @vaflov Před 5 lety +1

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

  • @teucay7374
    @teucay7374 Před 4 lety +1

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

  • @dovedozen
    @dovedozen Před 2 lety

    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

  • @124mun
    @124mun Před 3 lety

    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 👏.

  • @balorprice
    @balorprice Před 5 lety +3

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

  • @AlexTuduran
    @AlexTuduran Před 2 lety +1

    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.

  • @OJASCKI
    @OJASCKI Před 3 lety

    Great video, thanks for the knowledge!

  • @procactus9109
    @procactus9109 Před 6 lety +13

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

  • @Pedozzi
    @Pedozzi Před 4 lety +3

    this is gold, you programmers are geniuses

  • @aeolinferjunnoz2099
    @aeolinferjunnoz2099 Před 6 lety +2

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

    • @javidx9
      @javidx9  Před 6 lety +1

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

    • @aeolinferjunnoz2099
      @aeolinferjunnoz2099 Před 6 lety +1

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

  • @sonulohani
    @sonulohani Před 6 lety +1

    Thanks, man. I needed this tutorial

    • @javidx9
      @javidx9  Před 6 lety +1

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

  • @bubuDev
    @bubuDev Před 4 lety

    pure gold !!
    thanks for this !!

  • @seditt5146
    @seditt5146 Před 6 lety +1

    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.

  • @juancarlostensolsona9107

    Amazing channel!

  • @MrSerozka
    @MrSerozka Před 5 lety +6

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

  • @ArnaudMEURET
    @ArnaudMEURET Před 4 lety

    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_).

  • @moagnor
    @moagnor Před 5 lety +1

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

  • @francescopiazza4882
    @francescopiazza4882 Před 4 lety

    great stuff!

  • @zink2584
    @zink2584 Před 2 lety +1

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

  • @cjgstudio
    @cjgstudio Před 4 lety +1

    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

  • @patrickstival6179
    @patrickstival6179 Před 2 lety

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

  • @maxymvoytovych1196
    @maxymvoytovych1196 Před 2 lety +1

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

  • @BrekMartin
    @BrekMartin Před 7 lety +1

    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
      @javidx9  Před 7 lety

      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
      @BrekMartin Před 7 lety

      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.

  • @GregoryTheGr8ster
    @GregoryTheGr8ster Před 4 lety +2

    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.

  • @hago7568
    @hago7568 Před 6 lety

    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!!

  • @AfterHoursEngineering
    @AfterHoursEngineering Před 7 lety +1

    Excellent!

  • @GNARGNARHEAD
    @GNARGNARHEAD Před 5 lety +41

    *writes down "straight line is NOT curve"*

    • @redpug5042
      @redpug5042 Před 3 lety

      this triggers my ptsd in math class lmao

    • @xxlabratxx01
      @xxlabratxx01 Před 3 lety +2

      Actually is a curve in some sense

  • @yairkatz6223
    @yairkatz6223 Před 4 lety

    What about bezier curves?

  • @humanistreason
    @humanistreason Před 5 lety +2

    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
      @javidx9  Před 5 lety

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

  • @helderfilho4724
    @helderfilho4724 Před 5 lety

    Thank you!

  • @CarstenMeyer
    @CarstenMeyer Před 7 lety +1

    Well done

  • @andremendoncabastos5103
    @andremendoncabastos5103 Před 4 měsíci

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

  • @POGRetroModernGaming
    @POGRetroModernGaming Před 2 měsíci +1

    I ❤ your contents 😊

    • @javidx9
      @javidx9  Před 2 měsíci

      Aww thanks POG! 😄

  • @zohan008
    @zohan008 Před 5 lety

    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
      @DetectivePoofPoof Před 3 lety

      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 ;

  • @WavePlayz
    @WavePlayz Před 4 lety

    This is gold

  • @Ncyphen
    @Ncyphen Před 4 lety

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

    • @official-obama
      @official-obama Před 2 lety +1

      This is why compound beziers are frequently used

  • @repeaterlanes8024
    @repeaterlanes8024 Před 2 lety

    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
      @javidx9  Před 2 lety +2

      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

  • @timh.6872
    @timh.6872 Před 3 lety +1

    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
      @javidx9  Před 3 lety

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

    • @timh.6872
      @timh.6872 Před 3 lety

      @@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.

  • @charactername263
    @charactername263 Před 6 lety +1

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

    • @javidx9
      @javidx9  Před 6 lety +2

      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.

  • @bluescanfly1981
    @bluescanfly1981 Před 5 lety

    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
      @javidx9  Před 5 lety

      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
      @bluescanfly1981 Před 5 lety

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

    • @javidx9
      @javidx9  Před 5 lety

      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
      @bluescanfly1981 Před 5 lety

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

  • @TheLazy657
    @TheLazy657 Před 2 lety

    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.

  • @vogelpapafinn8156
    @vogelpapafinn8156 Před 4 lety

    My curve isnt visible...

  • @windgod9442
    @windgod9442 Před rokem

    which programming language was used here

  • @whmlprod
    @whmlprod Před 4 lety +2

    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

  • @yadt
    @yadt Před 2 lety

    But how do you reticulate them‽

    • @nightwintertooth9502
      @nightwintertooth9502 Před rokem

      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.

  • @massmenon
    @massmenon Před 3 lety +1

    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
      @brunojani7968 Před 3 lety

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

  • @poorman-trending
    @poorman-trending Před 3 lety +1

    20:47 Hunger

  • @JustinMayfield
    @JustinMayfield Před rokem

    #3:43 Giggity giggity!

  • @openroomxyz
    @openroomxyz Před 3 lety

    Does this work in 3d?

    • @javidx9
      @javidx9  Před 3 lety +1

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

    • @openroomxyz
      @openroomxyz Před 3 lety

      @@javidx9 Thanks!

    • @danielharty1157
      @danielharty1157 Před 2 lety

      ​@@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
      @javidx9  Před 2 lety

      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
    @iProgramInCpp Před 4 lety

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

  • @tydie1212
    @tydie1212 Před 4 lety +1

    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
      @thebigmacd Před 2 lety

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

  • @user-jp1qt8ut3s
    @user-jp1qt8ut3s Před rokem

    Next: collision with splines

  • @Adomas_B
    @Adomas_B Před 4 lety

    Is there a difference between using splines and bezier curves?

    • @javidx9
      @javidx9  Před 4 lety

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

  • @richardeadon6396
    @richardeadon6396 Před 4 lety +5

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

  • @wi2rd
    @wi2rd Před 3 lety +1

    0:43 hmmmm

  • @guzzodavenport3263
    @guzzodavenport3263 Před 3 lety

    3:42 not my proudest fap

  • @Zildawolf
    @Zildawolf Před 3 lety

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