title

Bézier curves (Coding Challenge 163)

description

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

detail

{'title': 'Bézier curves (Coding Challenge 163)', 'heatmap': [{'end': 539.871, 'start': 516.773, 'weight': 0.81}, {'end': 896.434, 'start': 885.632, 'weight': 1}], 'summary': 'A part of the support p5 2020 campaign, aiming to raise money for the processing foundation, and covers the bézier function, bezier curves, and its application in p5.js, providing insights into creating elaborate shapes, custom visual effects, and the relationship between bezier and lerp functions in p5.', 'chapters': [{'end': 42.685, 'segs': [{'end': 42.685, 'src': 'embed', 'start': 0.79, 'weight': 0, 'content': [{'end': 4.253, 'text': 'Hello, and welcome to a very special Coding Challenge video.', 'start': 0.79, 'duration': 3.463}, {'end': 8.076, 'text': 'This video is part of Support P5 2020.', 'start': 4.273, 'duration': 3.803}, {'end': 13.521, 'text': "I know it's 2021, but part of the campaign to raise money for the Processing Foundation in 2020,", 'start': 8.076, 'duration': 5.445}, {'end': 18.105, 'text': 'one of the rewards for making a donation was request a topic for a Coding Train video.', 'start': 13.521, 'duration': 4.584}, {'end': 22.289, 'text': "And I'm here finally in the summer of 2021 to fulfill these requests.", 'start': 18.365, 'duration': 3.924}, {'end': 29.455, 'text': 'This video is thanks to the generous donation from Jason Oswald, Chair of the Computer Science at Germantown Academy.', 'start': 22.669, 'duration': 6.786}, {'end': 35.56, 'text': "If you're not familiar with the Processing Foundation, it is the organization that maintains p5.js, processing.", 'start': 29.755, 'duration': 5.805}, {'end': 42.685, 'text': "You can learn all about the Processing Foundation at the Processing Foundation website, and that's where you too can also make a donation.", 'start': 35.801, 'duration': 6.884}], 'summary': 'This video fulfills requests from support p5 2020 campaign, thanks to a generous donation from jason oswald, chair of the computer science at germantown academy.', 'duration': 41.895, 'max_score': 0.79, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g790.jpg'}], 'start': 0.79, 'title': 'Raising money for the processing foundation', 'summary': 'Discusses a special coding challenge video as part of the support p5 2020 campaign, aiming to raise money for the processing foundation in 2020 and fulfilling requests from donors, including a generous donation from jason oswald, chair of the computer science at germantown academy.', 'chapters': [{'end': 42.685, 'start': 0.79, 'title': 'Support p5 2020 campaign', 'summary': 'Discusses the special coding challenge video as part of the support p5 2020 campaign, which aims to raise money for the processing foundation in 2020 and fulfills requests from donors, including a generous donation from jason oswald, chair of the computer science at germantown academy.', 'duration': 41.895, 'highlights': ['The video is part of Support P5 2020 campaign to raise money for the Processing Foundation in 2020, fulfilling requests from donors.', 'Jason Oswald, Chair of the Computer Science at Germantown Academy, made a generous donation for this video.', 'The Processing Foundation maintains p5.js, processing, and encourages donations through its website.']}], 'duration': 41.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g790.jpg', 'highlights': ['The video is part of Support P5 2020 campaign to raise money for the Processing Foundation in 2020, fulfilling requests from donors.', 'Jason Oswald, Chair of the Computer Science at Germantown Academy, made a generous donation for this video.', 'The Processing Foundation maintains p5.js, processing, and encourages donations through its website.']}, {'end': 255.481, 'segs': [{'end': 90.88, 'src': 'embed', 'start': 65.078, 'weight': 0, 'content': [{'end': 72.365, 'text': 'The Bézier function draws a Bézier curve named for the French engineer Pierre Bézier, who was working on, I think,', 'start': 65.078, 'duration': 7.287}, {'end': 76.428, 'text': 'modeling Renault cars in the 1960s and developed this curve.', 'start': 72.365, 'duration': 4.063}, {'end': 84.735, 'text': 'So in this video, I both want to demonstrate the Bézier function itself as it exists in p5.js, as well as the math behind it.', 'start': 76.528, 'duration': 8.207}, {'end': 86.416, 'text': "What if you didn't have that function?", 'start': 84.955, 'duration': 1.461}, {'end': 90.88, 'text': 'Could you get that curve on the screen just through your own calculations?', 'start': 86.696, 'duration': 4.184}], 'summary': 'The bézier function in p5.js is demonstrated, along with its mathematical background.', 'duration': 25.802, 'max_score': 65.078, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g65078.jpg'}, {'end': 151.247, 'src': 'embed', 'start': 127.691, 'weight': 1, 'content': [{'end': 135.298, 'text': "There's such thing as a linear Bezier curve, which is really just a line, a quadratic Bezier curve, and a cubic Bezier curve.", 'start': 127.691, 'duration': 7.607}, {'end': 142.542, 'text': "The Bezier function in P5 itself is the cubic Bezier curve, and that's what you usually find in things like Adobe Illustrator as well.", 'start': 135.458, 'duration': 7.084}, {'end': 145.884, 'text': 'A Bezier curve always has two anchor points.', 'start': 143.102, 'duration': 2.782}, {'end': 151.247, 'text': 'A linear Bezier curve is just a line between those two points.', 'start': 147.685, 'duration': 3.562}], 'summary': 'Bezier curves include linear, quadratic, and cubic types with two anchor points.', 'duration': 23.556, 'max_score': 127.691, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g127691.jpg'}, {'end': 235.677, 'src': 'embed', 'start': 206.742, 'weight': 2, 'content': [{'end': 217.933, 'text': 'By adding more control points along a sequence, we can create continuous geometry that bends according to a sequence of Bezier vertices.', 'start': 206.742, 'duration': 11.191}, {'end': 219.455, 'text': "But I'm getting ahead of myself.", 'start': 218.313, 'duration': 1.142}, {'end': 222.922, 'text': "Let's start by exploring the Bezier function in P5.", 'start': 219.916, 'duration': 3.006}, {'end': 234.316, 'text': 'Before I write the Bezier function, I just want to lay out where I imagine the anchor points and control points to be.', 'start': 229.073, 'duration': 5.243}, {'end': 235.677, 'text': "So I'm going to draw four points.", 'start': 234.416, 'duration': 1.261}], 'summary': 'Using bezier function in p5 to create continuous geometry with four points', 'duration': 28.935, 'max_score': 206.742, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g206742.jpg'}], 'start': 43.285, 'title': 'Bezier functions in p5.js', 'summary': 'Explores the bézier function, bezier curves, and its application in p5.js, covering the math behind the curve, types of bezier curves, its components, and the creation of continuous geometry and enclosed shapes with the bezier function.', 'chapters': [{'end': 107.493, 'start': 43.285, 'title': 'Exploring the bézier function', 'summary': "Explores the bézier function in p5.js, highlighting the importance of the processing foundation's support and community, the history and math behind the bézier curve, and references to further learning resources.", 'duration': 64.208, 'highlights': ["The Processing Foundation's support and community are crucial for The Coding Train's work and would not be possible without them.", 'The Bézier function, named after Pierre Bézier, is essential for drawing Bézier curves and was developed in the 1960s.', 'Learning about the Bézier curve involves understanding its mathematical concepts and exploring its designs and shapes in p5.js.', "Rune Madsen's Programming Design Systems book is recommended as a valuable resource for understanding the Bezier curve and its applications."]}, {'end': 206.222, 'start': 107.614, 'title': 'Understanding bezier curves', 'summary': 'Explains the concept of bezier curves, including the types and components such as anchor points and control points, with a focus on cubic bezier curves and their unique features.', 'duration': 98.608, 'highlights': ['A cubic Bezier curve is the most commonly referred type, found in tools like P5 and Adobe Illustrator, and consists of two anchor points and two control points.', 'The concept of Bezier curves includes linear, quadratic, and cubic types, distinguished by the number of control points, with the cubic Bezier curve having two control points.', "The middle point in a quadratic Bezier curve serves as the control point, influencing the curve's shape, while a cubic Bezier curve involves two control points that collectively shape the curve.", "A Bezier curve always consists of two anchor points, and in addition to these, there are control points which play a crucial role in determining the curve's shape and curvature."]}, {'end': 255.481, 'start': 206.742, 'title': 'Bezier function in p5', 'summary': 'Explores the bezier function in p5, demonstrating the creation of continuous geometry through control points and anchor points, and the use of the bezier function to create enclosed shapes with a fill.', 'duration': 48.739, 'highlights': ['The Bezier function in P5 uses four pairs of xy points - anchor, control, control, anchor - to create continuous geometry. The Bezier function takes eight arguments, four pairs of xy points - anchor, control, control, anchor - to create continuous geometry.', 'The Bezier function natively tries to create an enclosed shape with a fill. The Bezier function natively attempts to create an enclosed shape with a fill.', 'The chapter starts by exploring the Bezier function in P5 and laying out the anchor points and control points before writing the Bezier function. The chapter begins by exploring the Bezier function in P5 and laying out the anchor points and control points before writing the Bezier function.']}], 'duration': 212.196, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g43285.jpg', 'highlights': ['The Bézier function, named after Pierre Bézier, is essential for drawing Bézier curves and was developed in the 1960s.', 'A cubic Bezier curve is the most commonly referred type, found in tools like P5 and Adobe Illustrator, and consists of two anchor points and two control points.', 'The Bezier function in P5 uses four pairs of xy points - anchor, control, control, anchor - to create continuous geometry.']}, {'end': 435.89, 'segs': [{'end': 323.79, 'src': 'embed', 'start': 284.815, 'weight': 0, 'content': [{'end': 288.717, 'text': 'One thing you might notice now is that these lines are tangent to the curve.', 'start': 284.815, 'duration': 3.902}, {'end': 291.978, 'text': "That's an important mathematical principle here in the Bézier curve.", 'start': 288.897, 'duration': 3.081}, {'end': 298.021, 'text': 'As an exercise, I might suggest can you make your own Bézier curve tool, but you can move all the points around individually?', 'start': 292.338, 'duration': 5.683}, {'end': 306.865, 'text': "Now, before I move on to the math behind the Bézier curve, I think it's worth exploring what the Bézier vertex function does in p5.js as well.", 'start': 298.321, 'duration': 8.544}, {'end': 318.685, 'text': 'Here we can see with beginShape and endShape, we can set single vertices.', 'start': 313.7, 'duration': 4.985}, {'end': 323.79, 'text': 'So if there are only two vertices, then I have a line that connects those two vertices.', 'start': 319.125, 'duration': 4.665}], 'summary': 'Introduction to bézier curve and p5.js, exploring vertices and lines.', 'duration': 38.975, 'max_score': 284.815, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g284815.jpg'}, {'end': 435.89, 'src': 'embed', 'start': 392.992, 'weight': 1, 'content': [{'end': 398.413, 'text': 'And remember, with a custom shape like this, you can also include a fill.', 'start': 392.992, 'duration': 5.421}, {'end': 400.934, 'text': 'This alone should give you plenty to explore.', 'start': 398.773, 'duration': 2.161}, {'end': 406.876, 'text': 'Just having the Bezier function and the Bezier vertex function right there in P5 opens up so many visual possibilities.', 'start': 400.994, 'duration': 5.882}, {'end': 413.399, 'text': 'I recently did a coding challenge about a self-avoiding walk, which connects a whole set of points with line segments.', 'start': 407.256, 'duration': 6.143}, {'end': 421.582, 'text': 'And just adding the variation of connecting all these points with Bezier vertices creates a very different visual quality to the output.', 'start': 413.679, 'duration': 7.903}, {'end': 428.566, 'text': 'So maybe just trying to sketch where you put a lot of lines and vertices in and try using Bezier curves instead.', 'start': 422.122, 'duration': 6.444}, {'end': 429.846, 'text': 'But we are limited here.', 'start': 428.786, 'duration': 1.06}, {'end': 435.89, 'text': "Because we're using the Bezier function in p5 directly, we don't have access to all the points along the way.", 'start': 429.986, 'duration': 5.904}], 'summary': 'Using bezier functions in p5 opens up many visual possibilities, as seen in a recent coding challenge on self-avoiding walk, emphasizing the potential for creating different visual qualities.', 'duration': 42.898, 'max_score': 392.992, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g392992.jpg'}], 'start': 256, 'title': 'Understanding bézier curves in p5.js', 'summary': 'Explores the principles and applications of bézier curves in p5.js, including the mathematical basis, control points, and visual possibilities, offering insights into creating elaborate shapes and custom visual effects.', 'chapters': [{'end': 435.89, 'start': 256, 'title': 'Understanding bézier curves in p5.js', 'summary': 'Explores the principles and applications of bézier curves in p5.js, including the mathematical basis, control points, and visual possibilities, offering insights into creating elaborate shapes and custom visual effects.', 'duration': 179.89, 'highlights': ['The Bézier curve responds as the control point is moved, maintaining tangency with the curve, illustrating an important mathematical principle in Bézier curves.', 'The Bézier vertex function in p5.js allows for specifying control points and anchor points to create more elaborate shapes, offering many visual possibilities.', 'The usage of Bézier vertices in creating custom shapes in p5.js opens up various visual possibilities, as demonstrated by the example of a self-avoiding walk coding challenge.', 'The limitations of using the Bezier function in p5 directly restrict access to all the points along the way, influencing the creation of visual outputs.']}], 'duration': 179.89, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g256000.jpg', 'highlights': ['The Bézier vertex function in p5.js allows for specifying control points and anchor points to create more elaborate shapes, offering many visual possibilities.', 'The usage of Bézier vertices in creating custom shapes in p5.js opens up various visual possibilities, as demonstrated by the example of a self-avoiding walk coding challenge.', 'The Bézier curve responds as the control point is moved, maintaining tangency with the curve, illustrating an important mathematical principle in Bézier curves.', 'The limitations of using the Bezier function in p5 directly restrict access to all the points along the way, influencing the creation of visual outputs.']}, {'end': 948.412, 'segs': [{'end': 493.115, 'src': 'embed', 'start': 457.902, 'weight': 0, 'content': [{'end': 463.505, 'text': "Let's go back to a simple linear Bezier curve, or just a line between two points.", 'start': 457.902, 'duration': 5.603}, {'end': 466.026, 'text': "I'm going to call this x0 and this one x1.", 'start': 463.525, 'duration': 2.501}, {'end': 483.127, 'text': 'The lerp function takes two values and returns back to you a value in between those two values, some percentage along the way, between 0 and 100%.', 'start': 473.68, 'duration': 9.447}, {'end': 489.252, 'text': 'In this case, 0.5 would give me the value 50% of the way there.', 'start': 483.127, 'duration': 6.125}, {'end': 493.115, 'text': 'This value is often represented with the letter T.', 'start': 489.672, 'duration': 3.443}], 'summary': 'Introduction to linear bezier curve and lerp function for interpolation, using x0 and x1 as examples.', 'duration': 35.213, 'max_score': 457.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g457902.jpg'}, {'end': 539.871, 'src': 'heatmap', 'start': 516.773, 'weight': 0.81, 'content': [{'end': 526.531, 'text': 'So start at x0 and add 20% of the distance, which is x1 minus x0 times 0.2.', 'start': 516.773, 'duration': 9.758}, {'end': 527.873, 'text': 'linear interpolation.', 'start': 526.531, 'duration': 1.342}, {'end': 531.378, 'text': "Coming back to the Wikipedia page, you'll notice something interesting.", 'start': 528.454, 'duration': 2.924}, {'end': 534.944, 'text': 'Look at that formula right there under linear Bezier curve.', 'start': 531.719, 'duration': 3.225}, {'end': 536.846, 'text': 'Exactly this formula.', 'start': 535.464, 'duration': 1.382}, {'end': 539.871, 'text': "Let's implement this in a code example.", 'start': 537.888, 'duration': 1.983}], 'summary': 'Implement linear interpolation using bezier curve formula in code example.', 'duration': 23.098, 'max_score': 516.773, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g516773.jpg'}, {'end': 686.585, 'src': 'embed', 'start': 610.334, 'weight': 2, 'content': [{'end': 617.215, 'text': "Now, while I've put in here the raw math for linear interpolation, p5 has the lerp function.", 'start': 610.334, 'duration': 6.881}, {'end': 623.796, 'text': 'So I believe I could get my code to be easier to read without the raw math there with just the lerp function itself.', 'start': 617.495, 'duration': 6.301}, {'end': 630.137, 'text': 'And there we go.', 'start': 629.477, 'duration': 0.66}, {'end': 633.818, 'text': 'Now I have that line drawn with the lerp function.', 'start': 630.477, 'duration': 3.341}, {'end': 642.092, 'text': "Because I'm using p5 vector, I could actually use the p5 vector lerp function, which would allow me to sort of consolidate the xy together.", 'start': 635.526, 'duration': 6.566}, {'end': 647.756, 'text': "But just to make everything really clear and for me to be able to follow it, I'm going to keep it as separate xy's for right now.", 'start': 642.312, 'duration': 5.444}, {'end': 651.099, 'text': "When I'm making a Bezier curve, this is just a line.", 'start': 647.997, 'duration': 3.102}, {'end': 654.402, 'text': 'Lerp works for linear interpolation, lines.', 'start': 652.06, 'duration': 2.342}, {'end': 670.327, 'text': 'How do I make a quadratic Bezier from three points and lerp? Remember, a quadratic Bezier has two anchor points and one control point.', 'start': 655.083, 'duration': 15.244}, {'end': 673.09, 'text': 'Probably ends up something like this.', 'start': 671.308, 'duration': 1.782}, {'end': 680.998, 'text': 'Well, what if I wanted to do linear interpolation between x0 and x1? It would look like this.', 'start': 674.011, 'duration': 6.987}, {'end': 686.585, 'text': 'What if I wanted to do linear interpolation between x1 and x2? It would look like this.', 'start': 681.799, 'duration': 4.786}], 'summary': "Using p5's lerp function to simplify linear interpolation for lines and bezier curves.", 'duration': 76.251, 'max_score': 610.334, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g610334.jpg'}, {'end': 896.434, 'src': 'heatmap', 'start': 849.695, 'weight': 5, 'content': [{'end': 851.136, 'text': 'I could call that the delta maybe.', 'start': 849.695, 'duration': 1.441}, {'end': 859.663, 'text': "If delta were 0.5, you can see I'm just basically getting one point in between.", 'start': 853.942, 'duration': 5.721}, {'end': 865.144, 'text': 'A very small delta would be calculating lots of little points.', 'start': 859.683, 'duration': 5.461}, {'end': 867.945, 'text': 'In a way, I want to go back to drawing those points.', 'start': 865.965, 'duration': 1.98}, {'end': 881.048, 'text': 'And, incidentally, what happens then if I connect x1 and y1 with x2 and y2 with a line?', 'start': 873.766, 'duration': 7.282}, {'end': 886.212, 'text': 'Look at that!.', 'start': 885.632, 'duration': 0.58}, {'end': 896.434, 'text': 'Remember the string art on the Wikipedia page?', 'start': 894.434, 'duration': 2}], 'summary': 'Discussing the impact of different delta values on the number of calculated points and exploring the idea of connecting points with lines.', 'duration': 46.739, 'max_score': 849.695, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g849695.jpg'}], 'start': 436.15, 'title': 'Bezier and lerp functions in p5', 'summary': 'Explores the relationship between bezier and lerp functions, demonstrating their use in calculating points along linear and quadratic bezier curves in p5, with a focus on simplifying code, mathematical formulas, and visual representations. it also highlights the control of point calculation with a delta of 0.1, resulting in a rainbow-colored bézier curve.', 'chapters': [{'end': 609.854, 'start': 436.15, 'title': 'Bezier curve and lerp function', 'summary': 'Explores the relationship between the bezier function and the lerp function, demonstrating how the lerp function can be used to calculate points along a linear bezier curve with the formula for linear interpolation, and implementing it in a code example.', 'duration': 173.704, 'highlights': ['The lerp function is introduced as a bonus in the video, allowing the calculation of a value between two given points, represented with the letter T and often used to determine the percentage of the way between the two points, e.g., 0.5 giving the value 50% of the way there.', 'The chapter explains the concept of linear interpolation using the lerp function, illustrating how the value of T can be used to calculate the point along a line between two points, with the example of T=0.2 resulting in moving 20% of the distance from x0 to x1.', 'The relationship between the lerp function and the Bezier function is highlighted, as the formula for linear interpolation used by the lerp function is also found under the linear Bezier curve on the Wikipedia page, leading to the implementation of this formula in a code example to draw points along a straight line between two anchor points.']}, {'end': 738.965, 'start': 610.334, 'title': 'Understanding linear interpolation in p5', 'summary': 'Explores the use of linear interpolation (lerp) function in p5 to simplify code and create linear interpolations and bezier curves, demonstrating the concept with mathematical formulas and visual representations.', 'duration': 128.631, 'highlights': ['The lerp function in p5 is utilized to simplify the code and create linear interpolations and Bezier curves, enhancing code readability and consolidating xy vector usage.', 'The process of creating a quadratic Bezier curve from three points and utilizing lerp is explained, demonstrating the application of linear interpolation between points x0 and x1, and x1 and x2.', "The concept of 'Lerpception' is introduced, illustrating the combination of linear interpolation between two points with the application of linear interpolation to a third point, involving a mathematical formula and reference to the Wikipedia page for further understanding."]}, {'end': 948.412, 'start': 739.405, 'title': 'Quadratic bezier and lerp function', 'summary': 'Explores the implementation of quadratic bezier curve using lerp function in p5 code, with an emphasis on layering lines and controlling the calculation of points with a delta of 0.1, resulting in a rainbow-colored bézier curve.', 'duration': 209.007, 'highlights': ['The implementation of quadratic Bezier curve using lerp function in p5 code The chapter covers the implementation of quadratic Bezier curve using the lerp function in p5 code, showcasing the layering of lines and rainbow-colored Bézier curve.', 'Controlling the calculation of points with a delta of 0.1 The concept of controlling the calculation of points with a delta of 0.1 is highlighted, showcasing the impact of delta values on the number of calculated points.', 'Layering lines to create a rainbow-colored Bézier curve The technique of layering lines to create a rainbow-colored Bézier curve is demonstrated, emphasizing the visual effect of separate lines forming the Bézier curve.']}], 'duration': 512.262, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g436150.jpg', 'highlights': ['The lerp function is introduced as a bonus in the video, allowing the calculation of a value between two given points, represented with the letter T and often used to determine the percentage of the way between the two points, e.g., 0.5 giving the value 50% of the way there.', 'The chapter explains the concept of linear interpolation using the lerp function, illustrating how the value of T can be used to calculate the point along a line between two points, with the example of T=0.2 resulting in moving 20% of the distance from x0 to x1.', 'The lerp function in p5 is utilized to simplify the code and create linear interpolations and Bezier curves, enhancing code readability and consolidating xy vector usage.', 'The process of creating a quadratic Bezier curve from three points and utilizing lerp is explained, demonstrating the application of linear interpolation between points x0 and x1, and x1 and x2.', 'The implementation of quadratic Bezier curve using lerp function in p5 code The chapter covers the implementation of quadratic Bezier curve using the lerp function in p5 code, showcasing the layering of lines and rainbow-colored Bézier curve.', 'Controlling the calculation of points with a delta of 0.1 The concept of controlling the calculation of points with a delta of 0.1 is highlighted, showcasing the impact of delta values on the number of calculated points.']}, {'end': 1368.546, 'segs': [{'end': 1125.829, 'src': 'embed', 'start': 1014.409, 'weight': 0, 'content': [{'end': 1031.534, 'text': 'Now, what if I were to say v1 is the quadratic from p0 to p1 to p2? and V2 is the quadratic from P1, P2 to P3,', 'start': 1014.409, 'duration': 17.125}, {'end': 1036.517, 'text': 'then I could just say that X is lerp V1, right?', 'start': 1031.534, 'duration': 4.983}, {'end': 1038.818, 'text': 'I need to lerp both quadratics.', 'start': 1036.537, 'duration': 2.281}, {'end': 1050.764, 'text': 'Are you with me? If quadratic is lerping two lerps, then cubic is lerping two quadratics.', 'start': 1041.159, 'duration': 9.605}, {'end': 1057.088, 'text': 'Find the quadratic Bezier between these three points.', 'start': 1053.766, 'duration': 3.322}, {'end': 1061.189, 'text': 'Find the quadratic Bezier between these three points.', 'start': 1057.728, 'duration': 3.461}, {'end': 1062.71, 'text': 'I totally numbered them wrong.', 'start': 1061.43, 'duration': 1.28}, {'end': 1065.031, 'text': 'X1, X2, X3.', 'start': 1063.15, 'duration': 1.881}, {'end': 1069.453, 'text': 'And then lerp those two curves together.', 'start': 1066.492, 'duration': 2.961}, {'end': 1076.436, 'text': "I've messed something up here.", 'start': 1075.096, 'duration': 1.34}, {'end': 1081.058, 'text': 'What did I mess up? Oh, oh, oh my goodness.', 'start': 1076.977, 'duration': 4.081}, {'end': 1084.59, 'text': 'What am I doing? There we go.', 'start': 1081.319, 'duration': 3.271}, {'end': 1085.551, 'text': 'Sorry for that.', 'start': 1084.87, 'duration': 0.681}, {'end': 1091.474, 'text': "So this is correct in the sense that I've taken two quadratic curves and lurped between them.", 'start': 1085.811, 'duration': 5.663}, {'end': 1103.06, 'text': 'I think it would be advisable for me to put all of this into a function called cubic, which takes all the points.', 'start': 1091.734, 'duration': 11.326}, {'end': 1116.783, 'text': 'then does the quadratic between the first three and the second three, calculates the xy and returns that as a vector.', 'start': 1103.06, 'duration': 13.723}, {'end': 1122.227, 'text': 'So quadratic is lerping two line segments, p0, p1, p1, p2.', 'start': 1117.443, 'duration': 4.784}, {'end': 1125.829, 'text': 'Cubic is lerping two quadratics.', 'start': 1122.767, 'duration': 3.062}], 'summary': 'Discussing quadratic and cubic bezier curves, and lerp operations to manipulate them.', 'duration': 111.42, 'max_score': 1014.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g1014409.jpg'}, {'end': 1188.669, 'src': 'embed', 'start': 1158.895, 'weight': 1, 'content': [{'end': 1161.597, 'text': "And now let's just draw lines connecting various points.", 'start': 1158.895, 'duration': 2.702}, {'end': 1168.378, 'text': 'So what if here in cubic I connect v1 to v2? Ooh, look at that.', 'start': 1162.237, 'duration': 6.141}, {'end': 1174.526, 'text': 'And I can see the Bezier curve there as the sort of tangents of all of these lines mixed together.', 'start': 1168.718, 'duration': 5.808}, {'end': 1180.033, 'text': 'But I could make this really crazy, and I could also draw all those quadratic connections.', 'start': 1174.546, 'duration': 5.487}, {'end': 1185.267, 'text': 'Whoa, I did something wrong here.', 'start': 1183.166, 'duration': 2.101}, {'end': 1188.669, 'text': 'X1, Y1, X2, Y2.', 'start': 1186.008, 'duration': 2.661}], 'summary': 'Demonstrating drawing lines and curves with various connections and tangents.', 'duration': 29.774, 'max_score': 1158.895, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g1158895.jpg'}, {'end': 1255.869, 'src': 'embed', 'start': 1226.502, 'weight': 4, 'content': [{'end': 1235.284, 'text': 'So very quickly, I just made a class called particle that both has an XY as well as a DX and DY, or X speed and Y speed, I could have called them.', 'start': 1226.502, 'duration': 8.782}, {'end': 1239.986, 'text': 'The XYs move around, and if it hits the edges, the direction is reversed.', 'start': 1235.885, 'duration': 4.101}, {'end': 1244.267, 'text': 'So all of these are particles now.', 'start': 1242.786, 'duration': 1.481}, {'end': 1251.566, 'text': "adding particle.js to index.html, and I've got the exact same sketch.", 'start': 1246.522, 'duration': 5.044}, {'end': 1255.869, 'text': 'The difference is now that these are all particle objects.', 'start': 1252.086, 'duration': 3.783}], 'summary': 'Created a particle class with xy and speed properties, added to index.html, resulting in multiple particle objects.', 'duration': 29.367, 'max_score': 1226.502, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g1226502.jpg'}, {'end': 1306.799, 'src': 'embed', 'start': 1280.377, 'weight': 2, 'content': [{'end': 1287.161, 'text': "I don't know what I've made here, but hopefully I've opened up a door to a lot of creative possibilities that you could explore from this code.", 'start': 1280.377, 'duration': 6.784}, {'end': 1294.668, 'text': "I should say that I'm not so convinced that this implementation of the Bezier curve, as this kind of nested calls to the lerp function,", 'start': 1287.561, 'duration': 7.107}, {'end': 1302.755, 'text': 'is particularly efficient, but it does provide all of the data involved in the creation of the curve,', 'start': 1294.668, 'duration': 8.087}, {'end': 1306.799, 'text': 'so that you can draw all sorts of visualizations of all of the properties.', 'start': 1302.755, 'duration': 4.044}], 'summary': 'Code opens door to creative possibilities, provides all data for visualizations.', 'duration': 26.422, 'max_score': 1280.377, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g1280377.jpg'}, {'end': 1366.424, 'src': 'embed', 'start': 1321.203, 'weight': 7, 'content': [{'end': 1330.721, 'text': "Well, I think that's everything you could possibly want to know about the Bezier function, the Bezier vertex, quadratic vertex,", 'start': 1321.203, 'duration': 9.518}, {'end': 1332.982, 'text': 'how to do all this stuff without those functions?', 'start': 1330.721, 'duration': 2.261}, {'end': 1335.283, 'text': 'Play with this, make your own variation of it.', 'start': 1333.202, 'duration': 2.081}, {'end': 1338.144, 'text': 'Share it with me at thecodingtrain.com.', 'start': 1335.823, 'duration': 2.321}, {'end': 1339.985, 'text': "There's instructions there for how to do so.", 'start': 1338.324, 'duration': 1.661}, {'end': 1343.687, 'text': 'I will take a look at some and feature them in a future live stream.', 'start': 1340.005, 'duration': 3.682}, {'end': 1346.488, 'text': 'Really, though, What I should be doing next right?', 'start': 1343.767, 'duration': 2.721}, {'end': 1351.252, 'text': "I've got like three more hours is, try it, one more level in right?", 'start': 1346.528, 'duration': 4.724}, {'end': 1354.275, 'text': 'What if, instead of four points, I now had five?', 'start': 1351.472, 'duration': 2.803}, {'end': 1358.418, 'text': 'I think that would be a quartic bezier.', 'start': 1354.895, 'duration': 3.523}, {'end': 1362.321, 'text': 'Lerp the cubics, which lerp the quadratics.', 'start': 1359.799, 'duration': 2.522}, {'end': 1363.182, 'text': "I'll leave that to you.", 'start': 1362.481, 'duration': 0.701}, {'end': 1363.942, 'text': 'Please do that.', 'start': 1363.322, 'duration': 0.62}, {'end': 1365.363, 'text': 'Let me know how it goes in the comments.', 'start': 1364.002, 'duration': 1.361}, {'end': 1366.424, 'text': "Can't wait to see.", 'start': 1365.604, 'duration': 0.82}], 'summary': 'Explanation of bezier function and vertex, invitation for variations, and call for feedback.', 'duration': 45.221, 'max_score': 1321.203, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g1321203.jpg'}], 'start': 948.532, 'title': 'Bezier curve applications', 'summary': 'Covers quadratic bezier math with three points, lerps, and cubic bezier curves. it also explores implementing bezier curves for particle animation, introducing a particle class. additionally, it encourages code implementation, efficiency, and experimentation, concluding with a challenge to create a quartic bezier curve.', 'chapters': [{'end': 1091.474, 'start': 948.532, 'title': 'Quadratic bezier math', 'summary': 'Discusses the process of creating a quadratic bezier curve by utilizing three points and developing a function to handle the quadratic bezier math, with a brief mention of using lerps and cubic bezier curves.', 'duration': 142.942, 'highlights': ['A function called quadratic is created to handle the quadratic Bezier math, which receives three points and returns the result as a vector.', 'The process of utilizing lerps to manipulate two quadratic Bezier curves is discussed, with the introduction of the concept of cubic Bezier curves.', 'The speaker identifies an error in numbering the points and corrects it during the demonstration.']}, {'end': 1255.869, 'start': 1091.734, 'title': 'Bezier curve and particle animation', 'summary': 'Discusses implementing bezier curves and quadratic connections in a function called cubic, resulting in a sequence of vertices drawn as a bezier curve with rainbow colors. additionally, it introduces a class called particle for particle animation with random bouncing ball logic.', 'duration': 164.135, 'highlights': ['The chapter discusses implementing Bezier curves and quadratic connections in a function called cubic, resulting in a sequence of vertices drawn as a Bezier curve with rainbow colors.', 'The introduction of a class called particle for particle animation with random bouncing ball logic and the addition of particle objects to the sketch.']}, {'end': 1368.546, 'start': 1255.869, 'title': 'Exploring bezier curves in code', 'summary': 'Explores the implementation of bezier curves in code, discussing their properties and efficiency, and encourages viewers to experiment and share their variations, ending with a challenge to create a quartic bezier curve.', 'duration': 112.677, 'highlights': ['The chapter discusses the implementation of Bezier curves in code, exploring their properties and efficiency, and encourages viewers to experiment and share their variations.', 'The speaker mentions that the current implementation of the Bezier curve, with nested calls to the lerp function, may not be particularly efficient but provides all data for visualization.', 'Encourages viewers to experiment and share their variations of the code, with the possibility of being featured in a future live stream.', 'Challenges viewers to create a quartic Bezier curve by adding an additional point and lerp the cubics, and invites them to share their results in the comments.']}], 'duration': 420.014, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/enNfb6p3j_g/pics/enNfb6p3j_g948532.jpg', 'highlights': ['A function called quadratic is created to handle the quadratic Bezier math, which receives three points and returns the result as a vector.', 'The chapter discusses implementing Bezier curves and quadratic connections in a function called cubic, resulting in a sequence of vertices drawn as a Bezier curve with rainbow colors.', 'The chapter discusses the implementation of Bezier curves in code, exploring their properties and efficiency, and encourages viewers to experiment and share their variations.', 'The process of utilizing lerps to manipulate two quadratic Bezier curves is discussed, with the introduction of the concept of cubic Bezier curves.', 'The introduction of a class called particle for particle animation with random bouncing ball logic and the addition of particle objects to the sketch.', 'The speaker identifies an error in numbering the points and corrects it during the demonstration.', 'The speaker mentions that the current implementation of the Bezier curve, with nested calls to the lerp function, may not be particularly efficient but provides all data for visualization.', 'Encourages viewers to experiment and share their variations of the code, with the possibility of being featured in a future live stream.', 'Challenges viewers to create a quartic Bezier curve by adding an additional point and lerp the cubics, and invites them to share their results in the comments.']}], 'highlights': ['The Bézier function, named after Pierre Bézier, is essential for drawing Bézier curves and was developed in the 1960s.', 'The lerp function is introduced as a bonus in the video, allowing the calculation of a value between two given points, represented with the letter T and often used to determine the percentage of the way between the two points, e.g., 0.5 giving the value 50% of the way there.', 'The Bézier vertex function in p5.js allows for specifying control points and anchor points to create more elaborate shapes, offering many visual possibilities.', 'The process of creating a quadratic Bezier curve from three points and utilizing lerp is explained, demonstrating the application of linear interpolation between points x0 and x1, and x1 and x2.', 'A function called quadratic is created to handle the quadratic Bezier math, which receives three points and returns the result as a vector.']}