Bézier curves (Coding Challenge 163)

Have you ever wanted to know more about bézier curves in p5.js? Thanks to a generous donation from Jason Oswald, I do a deep dive exploring the bézier curve function and the math behind the algorithm? Code: thecodingtrain.com/challenges...
p5.js Web Editor Sketches:
🕹️ Basic Example: editor.p5js.org/codingtrain/s...
🕹️ Editor by Simon Tiger: editor.p5js.org/codingtrain/s...
🕹️ bezierVertex Demo: editor.p5js.org/codingtrain/s...
🕹️ Time Table Cardioid with Bézier: editor.p5js.org/codingtrain/s...
🕹️ Quadratic Bézier Curve: editor.p5js.org/codingtrain/s...
🕹️ Cubic Bézier Curve: editor.p5js.org/codingtrain/s...
🕹️ Bézier Curve with Formula: editor.p5js.org/codingtrain/s...
🎥 Previous video: • Coding Challenge 162: ...
🎥 Next video: • Coding Challenge 164: ...
🎥 All videos: • Coding Challenges
Links discussed:
💰 #SupportP5 2020: discourse.processing.org/t/su...
💾 Jason Oswald (GitHub): github.com/gajoswald
💾 Processing Foundation: processingfoundation.org/
💾 bezier() - p5.js Reference: p5js.org/reference/#/p5/bezier
🗄 Bézier curve (Wikipedia): en.wikipedia.org/wiki/B%C3%A9...
💢 Custom Shapes: www.programmingdesignsystems....
💾 lerp() - p5.js Reference: p5js.org/reference/#/p5/lerp
Videos discussed:
🎥 Self Avoiding Walk - Coding Challenge 162: • Coding Challenge 162: ...
Related Coding Challenges:
🚂 81 Circle Morphing: • Coding Challenge #81.1...
🚂 133 Times Tables Cardioid Visualization: • Coding Challenge #133:...
Timestamps:
0:00 Welcome! Thanks Jason!
1:03 Explain! What is the bezier() function?
2:02 Explain! The difference between linear, quadratic, and cubic bezier curves?
2:34 Explain! What is a control point?
3:42 Code! Let's try the bezier() function!
5:02 Code! Now we can explore bezierVertex()!
7:13 But wait! How can we go farther?
7:39 Explain! How is lerp() related to bezier()?
9:09 Code! How can we draw a straight line with vertex()?
10:59 Explain! Lerpception!!
13:21 Code! Quadratic bezier!
14:47 Code! What if we connect the points from the two lerps?
16:02 Code! Cubic bezier.
19:21 Code! Let's bring back the rainbow!
20:17 Code! Moving points based on bouncing ball.
21:40 Wrap up. What will you create?
Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound
🚂 Website: thecodingtrain.com/
👾 Share Your Creation! thecodingtrain.com/guides/pas...
🚩 Suggest Topics: github.com/CodingTrain/Sugges...
💡 GitHub: github.com/CodingTrain
💬 Discord: / discord
💖 Membership: kzread.infojoin
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: / thecodingtrain
📸 Instagram: / the.coding.train
🎥 Coding Challenges: • Coding Challenges
🎥 Intro to Programming: • Start learning here!
🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org/
🔗 Processing: processing.org
📄 Code of Conduct: github.com/CodingTrain/Code-o...
This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecod...
#beginners #beziercurves #lerp #javascript #p5js

Пікірлер: 322

  • @numberstationscartoon2689
    @numberstationscartoon26892 жыл бұрын

    This guy has such a talent for breaking down complex topics into digestible information. I am so grateful for this channel.

  • @icecrack4579
    @icecrack45792 жыл бұрын

    Hey, inspired by you, I downloaded processing, and is now learning about data types. Thanks for your wholesomeness, and positivity.

  • @KyleNally
    @KyleNally2 жыл бұрын

    "I don't know what I've made here..." Why, you've made an old Windows screensaver, of course. I can't possibly be the only one who remembers this one!

  • @cipher3966

    @cipher3966

    2 жыл бұрын

    Not the only one. I am from the 90s too.

  • @reyariass

    @reyariass

    2 жыл бұрын

    He should remake the pipes ones

  • @Bunny99s

    @Bunny99s

    2 жыл бұрын

    Well, you probably think of the old win95 mystify screensaver: kzread.info/dash/bejne/omGc0dmGmKnLk7Q.html#t=8s It still existed in win XP: kzread.info/dash/bejne/p46F1I-geNy_dqw.html This is the classic one. However there's a newer version called Mystify in win10: kzread.info/dash/bejne/q3lnpLaNpLOxcpc.html The old one just draws 2 quadrilateral where the 4 points are bouncy balls. Each of the two quadrilaterals have a certain amount of "history". So each frame the bouncy balls advance and a new shape is drawn, but the old ones still remain. so if a shape has a history of 12, there are always the last 12 copies of the shape on screen. When a bouncy ball was reflected it got a random velocity to add more dynamic to it. It was a very simply screensaver. The Win 10 version actually draws "curves". It's hard to tell because they added a lot of blur and glow and it fades out rather quickly. Though it may just be a leading vertex that moves around and drags the other control points behind by some constraints. While the general idea is similar, it works a bit different. They most likely just use a render buffer and never clear it as usual but simply let that buffer fade to black all the time. So the newly drawn shapes are bright while everything else is constantly fading away.

  • @windubitably
    @windubitably2 жыл бұрын

    I really enjoyed seeing the code for that one screensaver from the 90s.

  • @gabeapger1846
    @gabeapger18462 жыл бұрын

    After years scratching my head about cubic splines, your explanation was the the most intuitive and clear. I will never forget this. Thank you for this great tutorial!

  • @martingregson7136
    @martingregson7136 Жыл бұрын

    Once again, this guy has blown my mind with his simple, helpful, humerus interpretation and implementation of what would normally be a complex coding nightmare. Bravo, bravo... keep it up Dan...

  • @danielalvesaarte
    @danielalvesaarte2 жыл бұрын

    I haven't watched the whole video, but I'm so happy that this exists and that you exists. Your work is incredible, and always makes me fell so happy. Also, I'm a visual artist and a programmer, your channel is perfect for me

  • @Phi1618033
    @Phi16180332 жыл бұрын

    I'm not saying I'm watching this while on mushrooms. I'm just saying if I _were_ watching this, there's _a chance_ I'm watching it while on mushrooms.

  • @wouf_

    @wouf_

    Ай бұрын

    I’m not saying that I don’t care but there is an high chance I do not care

  • @HritikRC
    @HritikRC2 жыл бұрын

    The cool thing about this channel is that it literally covers almost every aspect of programming, even the JavaScript libraries. Keep it up!

  • @JBFFSK18
    @JBFFSK182 жыл бұрын

    wow, that was a great video. all those details, the video itself, the use of timestamps, the way it's cut/presented, just... everything

  • @__Junioor__
    @__Junioor__2 жыл бұрын

    the bouncing particles at the end really reminded me of the dvd thing hitting the corner of the screen

  • @ninjaasmoke
    @ninjaasmoke2 жыл бұрын

    I started watching the coding challenge series a weeks ago. For me it's been a week or 2, but for David it's been years! I'm inspired to see the love and enthusiasm he still has!

  • @cassiofbs

    @cassiofbs

    2 жыл бұрын

    I love it too, but who is david?

  • @thejintent2770
    @thejintent27702 жыл бұрын

    Absolutely one of your best videos yet! Keep up the great work!

  • @SteveRowe
    @SteveRowe2 жыл бұрын

    Daniel, I love the work you're doing. Thanks for teaching!

  • @qwwongs33
    @qwwongs332 жыл бұрын

    Very nice content! I've implemented this algorithm before and used it frequently , especially bezier animation! I hope you can continue this series because i am very interested in understanding these type of algorithms. You are the man who brings me to the world of computer graphics, thanks man

  • @MichaelJamesActually
    @MichaelJamesActually2 жыл бұрын

    I really enjoyed that! You made your very own Windows 95 Screen Saver!

  • @Amr-Ibrahim-AI
    @Amr-Ibrahim-AI2 жыл бұрын

    I love your passion! Thanks for the great tutorials and coding challenges :)

  • @sumanthhegde5148
    @sumanthhegde51482 жыл бұрын

    It's so sad to see you getting old. Love you Daniel! You are amazing. :):

  • @aurelia448
    @aurelia4482 жыл бұрын

    currently learning some stuff for programming as i intend to study it in some years , the biggest thing about your channels is that you explain it in a really easy way , step by step and even the math behind it! the way you teach , explain and show is so funny and enjoyable! so much talent and so much passion for your channel i love it!

  • @rikfomiharbi6077
    @rikfomiharbi60772 жыл бұрын

    I love your videos, especially coding challenges so informative :)

  • @HIHIQY1
    @HIHIQY12 жыл бұрын

    woah, bézier lines make sense now!

  • @artistpw
    @artistpw2 жыл бұрын

    I love watching these videos. These really are just amazing. With all of the lines, these absolutely resemble "shade sails".

  • @oluwatomisinbabatunde8426
    @oluwatomisinbabatunde84262 жыл бұрын

    I've had a rough couple of weeks but this does put a smile on my face and I don't know how. Thank You.

  • @peterklenner2563
    @peterklenner25632 жыл бұрын

    The Bezier function was explained in such a casual and easy way. Just beautiful to watch!

  • @tnczm
    @tnczm2 жыл бұрын

    Just want to say the production is on another level now! I've been a fan for a while, and love your clear explanations!

  • @TheCodingTrain

    @TheCodingTrain

    2 жыл бұрын

    Thank you, glad to hear that! (Especially given I had some audio issues with this one)

  • @juliankollatajmoves7860

    @juliankollatajmoves7860

    2 жыл бұрын

    @@TheCodingTrain Yes, I love the way the production quality has evolved over the past 6 years that I've been watching! :D

  • @eduardo_messias
    @eduardo_messias2 жыл бұрын

    Another mind-blowing video. Congrats!

  • @rossikatti1788
    @rossikatti17882 жыл бұрын

    You read the minds of artists/programmers: all your tutorials are gold!

  • @anonymousvevo8697
    @anonymousvevo86972 жыл бұрын

    like usual , always stunning ! thank you , love it

  • @RobinFoxie
    @RobinFoxie Жыл бұрын

    This is phenomenally useful and such a good breakdown. I've been clueless all morning; now 20 minutes later I'm sorted. Such a great video!

  • @jmckinney0040
    @jmckinney00402 жыл бұрын

    I have always wanted to know how this works! Also I've used a function similar to lurp before and I always wondered how it could do that. Thanks for breaking it down for all of us. Keep up the awesome work!!

  • @andrewmackenzie2638
    @andrewmackenzie2638 Жыл бұрын

    Congratulations you made the old Windows Bezier screen saver! This is awesome.

  • @Sabecontar
    @Sabecontar2 жыл бұрын

    Nice. I've been following you for a hort time but already love your videos so much, that I started making my own videos inspired by you. Thanks

  • @doctorbearphd
    @doctorbearphd2 жыл бұрын

    Entertaining and educational as always! Love ya, man!

  • @azyfloof
    @azyfloof2 жыл бұрын

    14:46 This was the penny drop moment for me! The way the bezier was calculated, and the reason the curve doesn't come close to the control point, suddenly made clear 😮😀

  • @Forjugadname
    @Forjugadname2 жыл бұрын

    Really awesome vid. I've been using Bezier curves in Unity for a while even converted bezier code into DOT's code but I didn't understand the underlying bezier code, that is until now thanks to you.

  • @victoriaceliacesarferreira5766
    @victoriaceliacesarferreira57669 ай бұрын

    You're so passionate about teaching and coding, thank u so much all this free information

  • @thechargeblade
    @thechargeblade2 жыл бұрын

    Thanks so much for the video, when you explain it, it is very intuitive and very easy to understand.

  • @youreale
    @youreale2 жыл бұрын

    Dan, you are a force of the nature. Thank you man!

  • @tf2player943
    @tf2player9432 жыл бұрын

    Used this to draw tubing for a project but didn't know the math behind it. Very interesting to see, thank you

  • @kken8766
    @kken87662 жыл бұрын

    love your videos! its practical, unique, challenging, and informative =)

  • @wanderwithdaniel
    @wanderwithdaniel2 жыл бұрын

    I love your work man !

  • @avinash5651
    @avinash56512 жыл бұрын

    That's only one channel all over the KZread which I like a lot I love to learn with u that's awesome moment

  • @DogwafflDan
    @DogwafflDan2 жыл бұрын

    Thanks for this video. I've been trying to come to grip with curves for decades

  • @SridharGajendran
    @SridharGajendran2 жыл бұрын

    A topic I always wanted to learn.. Thanks Dan..

  • @rituchandra6325
    @rituchandra63252 жыл бұрын

    Amazing explanation for bezier curves! This explanation was so good that I probably will not forget how bezier curves are drawn, not after having heard the term "lerpception" XD. Once again, awesome explanation!

  • @velvetrock9933
    @velvetrock99332 жыл бұрын

    Right in the moment when i neede it! Thank you for a great content!

  • @sshawarma
    @sshawarma2 жыл бұрын

    This is so cool! I love it!

  • @Digiur
    @Digiur2 жыл бұрын

    Congrats! You made a screensaver from windows 98! Beautiful!

  • @KyleNally

    @KyleNally

    2 жыл бұрын

    Damn, and here I was scrolling through and feeling smug that nobody had mentioned it yet. Sigh.

  • @sps014
    @sps0142 жыл бұрын

    Great explanation, finally these equations make sense

  • @afzalmahmudd8365
    @afzalmahmudd83652 жыл бұрын

    the explanation of the white bord.just wow! . thank you sir.

  • @keremyaellandman5407
    @keremyaellandman54072 жыл бұрын

    Inspiring stuff, as always

  • @sinom
    @sinom2 жыл бұрын

    Freya Holmér just made a great video about bezier curves a few days ago

  • @TheCodingTrain

    @TheCodingTrain

    2 жыл бұрын

    I know!! It is so beautiful

  • @gownerjones
    @gownerjones Жыл бұрын

    This might just be the best programing channel on the entire internet

  • @rosslahive
    @rosslahive Жыл бұрын

    Another great video, thanks so much.

  • @itsjmmariano
    @itsjmmariano2 жыл бұрын

    This is complex to me but the initial explanation made my understanding of this concept clearer. Thank you for this wonderful content!

  • @wimjongman
    @wimjongman2 жыл бұрын

    Awesome. I enjoyed that very much.

  • @sauliustb
    @sauliustb2 жыл бұрын

    liking the post editing. great vid :)

  • @sofia.eris.bauhaus
    @sofia.eris.bauhaus2 жыл бұрын

    i've done a fair bit of drawing with bezier curves and i wrote a lerp fuction once, but i had no idea that a bezier is just a lerp of a lerp. that is so cool! :D

  • @reyariass

    @reyariass

    2 жыл бұрын

    Same! That is just mind blowing to me!

  • @cmyk8964

    @cmyk8964

    2 жыл бұрын

    The cubic Bézier curve we love is a lerp of a lerp of a lerp!

  • @sofia.eris.bauhaus

    @sofia.eris.bauhaus

    2 жыл бұрын

    @@cmyk8964 or a lerp of two lerps, that's how i like to think of it.

  • @marcodierenfeldt9061
    @marcodierenfeldt90612 жыл бұрын

    This has been great fun!

  • @SrinivasMangipudi
    @SrinivasMangipudi2 жыл бұрын

    Its amazing you never fail to entertain!! :D

  • @JasimGamer
    @JasimGamer2 жыл бұрын

    The master of inspiration I never understood what is lerp function Now its soo clear ❤

  • @THEN0RTH
    @THEN0RTH2 жыл бұрын

    This is underrated!

  • @brunesi
    @brunesi Жыл бұрын

    Oh man... you and your pineapple shirt... you brought a smile to my face already at 4:30... you got the gift of teaching... One would never snooze at your presentations.... very well done.

  • @kristianwichmann9996
    @kristianwichmann99962 жыл бұрын

    Very lucid :-) For those interested, the mathematical process of finding a curve tangent to a family of lines (or curves) is known as an envelope.

  • @richardlowenthal2366
    @richardlowenthal23662 жыл бұрын

    Thank you! This is a great tutorial.

  • @ashaygoli3014
    @ashaygoli30142 жыл бұрын

    Very well done video!!... Congrats you made a bezeir screensaver😆

  • @mjaisi5346
    @mjaisi5346 Жыл бұрын

    great work thank you!

  • @onebeartoe
    @onebeartoe Жыл бұрын

    I love this video! I wish I had seen in High school; the '90s.

  • @HermanWillems
    @HermanWillems2 жыл бұрын

    Amazingly explained. I don't have to say more. :) Bezier Curves are amazing.

  • @GroterRonald
    @GroterRonald2 жыл бұрын

    Heel erg mooi, dank u voor de video J. Oswald

  • @nightcoder5k
    @nightcoder5k Жыл бұрын

    I had a chance to write some dancing graphics with splines in X11 on a SunOS back in college. Great video on how splines work. Thanks!

  • @AkshatRamanathan
    @AkshatRamanathan2 жыл бұрын

    Ive been following this channel for the last 5 years and I went from someone who hated web dev to a working frontend developer. but the best part is I still subconsciously learn more about math than programming and i fucking love that.

  • @crewrangergaming9582
    @crewrangergaming9582 Жыл бұрын

    A developer for 10 years now, and watching this channel makes me love coding again.

  • @Gazaze
    @Gazaze2 жыл бұрын

    i'll probably remember bezier curve as LERPCEPTION forever xD thank you so much for such a simple but great explanation!

  • @luianthony1328
    @luianthony1328 Жыл бұрын

    This should be renamed “How to create a nostalgic screen saver”

  • @Nocfairy
    @Nocfairy2 жыл бұрын

    Fantastic!

  • @JohnnyDub08
    @JohnnyDub082 жыл бұрын

    Thanks, very informative and entertaining.

  • @JesterUGA
    @JesterUGA5 ай бұрын

    You made a screensaver, and it is awesome!

  • @MrJCraft
    @MrJCraft2 жыл бұрын

    Tips for beginners: you can imagine a bezier curve like this. you are bob and your friend jane is across the road she is walking to the end of the road in a straight line. but you dont know where she is going, so you look directly at jane and walk forward, as she moves down the road you stay facing toward jane, and continuously walk forward until you meet her at the end of the road. as you walked across the road your foot prints would be a bezier curve. that's how I accidentally discovered bezier curves while trying to make a curve generator in a video game lol. I hope that my explanation will help anyone confused.

  • @htoo-dev
    @htoo-dev2 жыл бұрын

    Thank you sir, I've learned a lot from this vid.

  • @Simone-xe9cw
    @Simone-xe9cw Жыл бұрын

    Nobody seems to underline WHY Bezier curves are so wonderful, they changed the way we can mathematically/practically describe very complex curves without using "classic" expressions. The whole mathematic model of a Bezier curve is a set of modules really (I had to calculate them manually for a couple of exams at university back in the day). It's not just "a curve", it's a way to recursively describe a whole range of shapes that would take an insane amount of mathematical tinkering if done differently (nevertheless they allow for much more precise industrial calc for design and manufacturing). Edit: I am no mathematician sorry for my sloppy explanation but I hope you get the idea, feel free to correct me if something is too sketchy ^^

  • @zipnone1996
    @zipnone19962 жыл бұрын

    This is a good one! 🥳🤩

  • @roygalaasen

    @roygalaasen

    2 жыл бұрын

    Then you should look up Freya Holmér’s video on the subject released two days ago or something.

  • @pw7225
    @pw72252 жыл бұрын

    A few years back I left a comment underneath a Coding Train video. It was critical because the content was too playful to me and too time-inefficient. I wanted to quickly learn what I had opened the video for. Now, I want to apologise for my arrogance. I think what you have done with Coding Train is nothing short of amazing. I hope many kids will be inspired by you to learn maths, computer science and create art. Never stop.

  • @flwi
    @flwi2 жыл бұрын

    That is an awesome explanation! Thanks for that! Got stuck on bezier curves a while back while trying to solve the Mars lander challenge on codingame. Maybe I'll give it another go, since I now know that bezier curves are not that mystical.

  • @rodakdev
    @rodakdev2 жыл бұрын

    Very well made video

  • @ninjaasmoke
    @ninjaasmoke2 жыл бұрын

    I was soo happy to see processing update their website to a react webapp!

  • @eointolster
    @eointolster2 жыл бұрын

    When I get a job I'll donate again. Thank you for your work. Helped me get my last job

  • @joweber7492
    @joweber74922 жыл бұрын

    Great video. Certainly demystifies the inner workings of Bezier curves. I also wanted to say that the coloured boxes that you draw around snippets of text really help to understand what you trying to point out. Keep up the great work!

  • @RahulRaj-pd7gi
    @RahulRaj-pd7gi2 жыл бұрын

    Loved it

  • @TheGrenvil
    @TheGrenvil2 жыл бұрын

    I remember when I was a kid and discovered that you can make a curve with straight lines and I started drawing a bunch of those curves messing with all sorts of parameters, apparently young had just rediscovered bezier curves, that's really cool

  • @Scotty-vs4lf

    @Scotty-vs4lf

    2 жыл бұрын

    i actually used to do the same thing, when I saw the string art i was like wait what

  • @mmilerngruppe
    @mmilerngruppe2 жыл бұрын

    thank you!

  • @hrishikeshjha4544
    @hrishikeshjha45442 жыл бұрын

    great video

  • @geetanjalitripathi3234
    @geetanjalitripathi32342 жыл бұрын

    Very useful!

  • @metalhead2476
    @metalhead2476Ай бұрын

    Now I know how kuka's robot spline function works! Thank you

  • @amatiasq
    @amatiasq2 жыл бұрын

    Thanks! just... wow

  • @oghry
    @oghry2 жыл бұрын

    Lerperfect video!

  • @lizardperson780
    @lizardperson7802 жыл бұрын

    That visual at the end looks like my blanket when I'm trying to find the long side at 3AM

  • @hamidbakhtiari3986
    @hamidbakhtiari39862 жыл бұрын

    Is this the first video with this new type of editing? IT IS AWESOME!!! I really liked it!

  • @gamesvrtech6666
    @gamesvrtech66662 жыл бұрын

    You are the Hans Zimmer of P5 😎 Great video, funny as always (🎺BBBRRRRRR) 😄👍🏻

  • @TheJas-vr2vr
    @TheJas-vr2vr2 жыл бұрын

    Seeing cubic calling quadratic brings to mind the possibility of a quintic bezier, or even a recursive function that can go even further...