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?
Topics
- 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?
Community Contributions
- Complete N point/degree Bezier Curve Editor by Ayush Koul (Source Code)
- Bezier Arch Synthwave Animation by Chris Sears (Source Code)
- Bezier Curve Road Editor by David Snyder (Source Code)
- Bezier Curve LERP Animations (2-10 points) by I L M Narayana (Source Code)
- Bezier Curve Art by Larry Campfire (Source Code)
- Quartic Bezier Curve by Codefish (Source Code)
- animated n control point Bézier curve by Alex Hunter (Source Code)
- Moving on an Infinite Loop made with Bézier curves by jaipack17 (Source Code)
- animated n control point Bézier curve by Monique GOBRIAL (Source Code)
- Bezier Flowers by Denisovich (Source Code)
- Bezier Curve by Mavyfaby by Maverick G. Fabroa (Source Code)
- 3D Beziercurves by Chenne Bicken (Source Code)
- N Control Points Bézier With Draggable points by Tushar Upadhyay (Source Code)
- P5.js N Point Bézier Curve showing auxiliar Lines by Cássio Souza (Source Code)
You can also add your own version! (See how)
Links discussed in this coding challenge
Videos discussed in this coding challenge
- Self Avoiding Walk - Coding Challenge 162 by The Coding Train
- Time Table Cardioid - Coding Challenge 133 by The Coding Train