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/163-bezier-curves
p5.js Web Editor Sketches:
?️ Basic Example: https://editor.p5js.org/codingtrain/sketches/Z53a719cQ
?️ Editor by Simon Tiger: https://editor.p5js.org/codingtrain/sketches/_R7RgtGfA
?️ bezierVertex Demo: https://editor.p5js.org/codingtrain/sketches/O3_cLiOaw
?️ Time Table Cardioid with Bézier: https://editor.p5js.org/codingtrain/sketches/kZ8dpklQg
?️ Quadratic Bézier Curve: https://editor.p5js.org/codingtrain/sketches/fJIMDmHcE
?️ Cubic Bézier Curve: https://editor.p5js.org/codingtrain/sketches/S1Pt8lol1
?️ Bézier Curve with Formula: https://editor.p5js.org/codingtrain/sketches/0XOLNHbvC
? Previous video: https://youtu.be/m6-cm6GZ1iw?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
? Next video: https://youtu.be/hckvHFDGiJk?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
? All videos: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
Links discussed:
? #SupportP5 2020: https://discourse.processing.org/t/supportp5-2020-processing-foundation-fundraiser/26077
? 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%A9zier_curve
? Custom Shapes: https://www.programmingdesignsystems.com/shape/custom-shapes/index.html#custom-shapes-pANLh0l
? lerp() - p5.js Reference: https://p5js.org/reference/#/p5/lerp
Videos discussed:
? Self Avoiding Walk - Coding Challenge 162: https://youtu.be/m6-cm6GZ1iw
Related Coding Challenges:
? 81 Circle Morphing: https://youtu.be/u2D4sxh3MTs
? 133 Times Tables Cardioid Visualization: https://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: http://thecodingtrain.com/
? Share Your Creation! https://thecodingtrain.com/guides/passenger-showcase-guide
? Suggest Topics: https://github.com/CodingTrain/Suggestion-Box
? GitHub: https://github.com/CodingTrain
? Discord: https://discord.gg/hPuGy2g
? Membership: http://youtube.com/thecodingtrain/join
? Store: https://standard.tv/codingtrain
?️ Twitter: https://twitter.com/thecodingtrain
? Instagram: https://www.instagram.com/the.coding.train/
? Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
? Intro to Programming: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
? 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-of-Conduct
This description was auto-generated. If you see a problem, please open an issue: https://github.com/CodingTrain/thecodingtrain.com/issues/new
#beginners #beziercurves #lerp #javascript #p5js