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: https://thecodingtrain.com/challenges...

p5.js Web Editor Sketches:
🕹️ Basic Example: https://editor.p5js.org/codingtrain/s...
🕹️ Editor by Simon Tiger: https://editor.p5js.org/codingtrain/s...
🕹️ bezierVertex Demo: https://editor.p5js.org/codingtrain/s...
🕹️ Time Table Cardioid with Bézier: https://editor.p5js.org/codingtrain/s...
🕹️ Quadratic Bézier Curve: https://editor.p5js.org/codingtrain/s...
🕹️ Cubic Bézier Curve: https://editor.p5js.org/codingtrain/s...
🕹️ Bézier Curve with Formula: https://editor.p5js.org/codingtrain/s...

🎥 Previous video:    • Coding Challenge 162: Self-Avoiding Walk  
🎥 Next video:    • Coding Challenge 164: Bending Time Sl...  
🎥 All videos:    • Coding Challenges  

Links discussed:
💰 #SupportP5 2020: https://discourse.processing.org/t/su...
💾 Jason Oswald (GitHub): https://github.com/gajoswald
💾 Processing Foundation: https://processingfoundation.org/
💾 bezier() - p5.js Reference: https://p5js.org/reference/#/p5/bezier
🗄 Bézier curve (Wikipedia): https://en.wikipedia.org/wiki/B%C3%A9...
💢 Custom Shapes: https://www.programmingdesignsystems....
💾 lerp() - p5.js Reference: https://p5js.org/reference/#/p5/lerp

Videos discussed:
🎥 Self Avoiding Walk - Coding Challenge 162:    • Coding Challenge 162: Self-Avoiding Walk  

Related Coding Challenges:
🚂 81 Circle Morphing:    • Coding Challenge #81.1: Circle Morphi...  
🚂 133 Times Tables Cardioid Visualization:    • Coding Challenge #133: Times Tables C...  

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: http://thecodingtrain.com/
👾 Share Your Creation! https://thecodingtrain.com/guides/pas...
🚩 Suggest Topics: https://github.com/CodingTrain/Sugges...
💡 GitHub: https://github.com/CodingTrain
💬 Discord:   / discord  
💖 Membership: http://youtube.com/thecodingtrain/join
🛒 Store: https://standard.tv/codingtrain
🖋️ Twitter:   / thecodingtrain  
📸 Instagram:   / the.coding.train  

🎥 Coding Challenges:    • Coding Challenges  
🎥 Intro to Programming:    • Start learning here!  

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

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

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

#beginners #beziercurves #lerp #javascript #p5js