Uploaded August 2021 | Updated September 2026, 1 week ago

---

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/163-bezier-curves

p5.js Web Editor Sketches:
🕹️ Basic Example: editor.p5js.org/codingtrain/sketches/Z53a719cQ
🕹️ Editor by Simon Tiger: editor.p5js.org/codingtrain/sketches/_R7RgtGfA
🕹️ bezierVertex Demo: editor.p5js.org/codingtrain/sketches/O3_cLiOaw
🕹️ Time Table Cardioid with Bézier: editor.p5js.org/codingtrain/sketches/kZ8dpklQg
🕹️ Quadratic Bézier Curve: editor.p5js.org/codingtrain/sketches/fJIMDmHcE
🕹️ Cubic Bézier Curve: editor.p5js.org/codingtrain/sketches/S1Pt8lol1
🕹️ Bézier Curve with Formula: editor.p5js.org/codingtrain/sketches/0XOLNHbvC

🎥 Previous video: youtu.be/m6-cm6GZ1iw?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Next video: youtu.be/hckvHFDGiJk?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 All videos: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH

Links discussed:
💰 #SupportP5 2020: discourse.processing.org/t/supportp5-2020-processing-foundation-fundraiser/26077
💾 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%A9zier_curve
💢 Custom Shapes: programmingdesignsystems.com/shape/custom-shapes/index.html#custom-shapes-pANLh0l
💾 lerp() - p5.js Reference: p5js.org/reference/#/p5/lerp

Videos discussed:
🎥 Self Avoiding Walk - Coding Challenge 162: youtu.be/m6-cm6GZ1iw

Related Coding Challenges:
🚂 81 Circle Morphing: youtu.be/u2D4sxh3MTs
🚂 133 Times Tables Cardioid Visualization: youtu.be/bl3nc_a1nvs

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/passenger-showcase-guide
🚩 Suggest Topics: github.com/CodingTrain/Suggestion-Box
💡 GitHub: github.com/CodingTrain
💬 Discord: discord.gg/hPuGy2g
💖 Membership: youtube.com/thecodingtrain/join
🛒 Store: standard.tv/codingtrain
🖋️ Twitter: twitter.com/thecodingtrain
📸 Instagram: instagram.com/the.coding.train

🎥 Coding Challenges: youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
🎥 Intro to Programming: youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA

🔗 p5.js: p5js.org
🔗 p5.js Web Editor: editor.p5js.org
🔗 Processing: processing.org

📄 Code of Conduct: github.com/CodingTrain/Code-of-Conduct

This description was auto-generated. If you see a problem, please open an issue: github.com/CodingTrain/thecodingtrain.com/issues/new

#beginners #beziercurves #lerp #javascript #p5js