title

9.22: Custom Shapes - p5.js Tutorial

description

In this video, I look at how to draw "custom" shapes in p5.js, using beginShape(), endShape(), vertex(), and curveVertex(). Special thanks to Rune Madsen's Programming Design Systems!
https://programmingdesignsystems.com/shape/custom-shapes/index.html#custom-shapes-pANLh0l
Support this channel on Patreon: https://patreon.com/codingtrain
To buy Coding Train merchandise: https://www.designbyhumans.com/shop/codingtrain/
To Support the Processing Foundation: https://processingfoundation.org/support
Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics
Contact:
Twitter: https://twitter.com/shiffman
The Coding Train website: http://thecodingtrain.com/
Links discussed in this video:
Polar to Cartesian: https://www.youtube.com/watch?v=N633bLi_YCw
Catmull-Rom on wikipedia: https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline
Rune Madsen's Programming Design Systems: https://programmingdesignsystems.com/introduction/
Source Code for the all Video Lessons: https://github.com/CodingTrain/Rainbow-Code
p5.js: https://p5js.org/
Processing: https://processing.org
For an Intro to Programming using p5.js: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA
For Coding Challenges: https://www.youtube.com/playlist?list=PLRqwX-V7Uu6ZiZxtDDRCi6uhfTH4FilpH
Help us caption & translate this video!
https://amara.org/v/awze/
ðŸ“„ Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail

{'title': '9.22: Custom Shapes - p5.js Tutorial', 'heatmap': [{'end': 411.069, 'start': 383.091, 'weight': 0.927}, {'end': 530.941, 'start': 499.743, 'weight': 0.875}, {'end': 881.152, 'start': 816.675, 'weight': 0.788}], 'summary': "Delve into rune madsen's book 'programming design systems' to understand custom shapes and vertices, create polygons and arbitrary shapes in p5 using beginshape and endshape functions, and explore curve vertices and control points for dynamic shape control and curve calculations.", 'chapters': [{'end': 39.989, 'segs': [{'end': 39.989, 'src': 'embed', 'start': 1.357, 'weight': 0, 'content': [{'end': 5.419, 'text': 'Hello This is a video tutorial about custom shapes.', 'start': 1.357, 'duration': 4.062}, {'end': 11.401, 'text': 'And I am showing you on this web page a much better explanation about custom shapes than I will give you.', 'start': 5.859, 'duration': 5.542}, {'end': 15.583, 'text': "This is actually Rune Madsen's online book called Programming Design Systems.", 'start': 11.641, 'duration': 3.942}, {'end': 17.284, 'text': 'I think I might have referenced this before.', 'start': 15.943, 'duration': 1.341}, {'end': 19.805, 'text': "It's got an excellent chapter on color.", 'start': 17.324, 'duration': 2.481}, {'end': 22.385, 'text': 'at Rune Madsen on Twitter.', 'start': 20.925, 'duration': 1.46}, {'end': 27.147, 'text': 'Rune is amazing, does lots of really interesting stuff with graphic design and code for graphic design.', 'start': 22.806, 'duration': 4.341}, {'end': 35.628, 'text': 'And so this webpage really will walk you through this idea of how you can think about a shape as having different vertices.', 'start': 27.647, 'duration': 7.981}, {'end': 39.989, 'text': "Again, this is not my work, this is Rune Madsen's work, but this is what I want to cover.", 'start': 35.688, 'duration': 4.301}], 'summary': 'Tutorial on custom shapes by rune madsen for graphic design and code.', 'duration': 38.632, 'max_score': 1.357, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/76fiD5DvzeQ/pics/76fiD5DvzeQ1357.jpg'}], 'start': 1.357, 'title': 'Custom shapes tutorial', 'summary': "Delves into rune madsen's online book 'programming design systems', providing an in-depth explanation of custom shapes and their vertices, offering a comprehensive understanding of graphic design and code.", 'chapters': [{'end': 39.989, 'start': 1.357, 'title': 'Custom shapes tutorial', 'summary': "Delves into rune madsen's online book 'programming design systems', providing an in-depth explanation of custom shapes and their vertices, offering a comprehensive understanding of graphic design and code.", 'duration': 38.632, 'highlights': ["Rune Madsen's online book 'Programming Design Systems' provides a much better explanation about custom shapes than the tutorial.", 'The webpage walks through the concept of thinking about a shape as having different vertices, offering valuable insights into graphic design and code.', 'Rune Madsen is known for his amazing work in graphic design and code, and the chapter references his excellent content on color.']}], 'duration': 38.632, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/76fiD5DvzeQ/pics/76fiD5DvzeQ1357.jpg', 'highlights': ["Rune Madsen's online book 'Programming Design Systems' provides a much better explanation about custom shapes than the tutorial.", 'The webpage walks through the concept of thinking about a shape as having different vertices, offering valuable insights into graphic design and code.', 'Rune Madsen is known for his amazing work in graphic design and code, and the chapter references his excellent content on color.']}, {'end': 579.594, 'segs': [{'end': 155.927, 'src': 'embed', 'start': 100.323, 'weight': 0, 'content': [{'end': 106.147, 'text': 'And a polygon can be defined by its vertices, the vertices being each of these points that connects the sides.', 'start': 100.323, 'duration': 5.824}, {'end': 109.168, 'text': 'And this is actually 1, 2, 3, 4, 5.', 'start': 106.448, 'duration': 2.72}, {'end': 116.454, 'text': 'So actually, if you have a polygon with four arbitrary sides, like this, you can actually do this with the quad function.', 'start': 109.17, 'duration': 7.284}, {'end': 124.098, 'text': 'The quad function in P5, or processing, all this code is for processing or P5, allows you to specify four points.', 'start': 117.134, 'duration': 6.964}, {'end': 126.919, 'text': 'But what I want to do is make a custom shape.', 'start': 124.818, 'duration': 2.101}, {'end': 131.742, 'text': 'So the only way for me to do this, that I know of at least, is to use a function called beginShape.', 'start': 127.16, 'duration': 4.582}, {'end': 137.425, 'text': 'And use a function called nShape.', 'start': 135.684, 'duration': 1.741}, {'end': 148.804, 'text': 'So if I use these functions beginShape and endShape, what I can do is in between begin and end, I can set any number of arbitrary vertices.', 'start': 138.919, 'duration': 9.885}, {'end': 150.945, 'text': 'So I can say vertex.', 'start': 149.804, 'duration': 1.141}, {'end': 155.927, 'text': 'vertex over and over again.', 'start': 154.346, 'duration': 1.581}], 'summary': 'A polygon with four arbitrary sides can be created using quad function in p5, or processing, and custom shapes can be made using beginshape and endshape functions.', 'duration': 55.604, 'max_score': 100.323, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/76fiD5DvzeQ/pics/76fiD5DvzeQ100323.jpg'}, {'end': 411.069, 'src': 'heatmap', 'start': 383.091, 'weight': 0.927, 'content': [{'end': 396.896, 'text': "And then I'm going to say vertex, and I have a reason why I'm doing this actually.", 'start': 383.091, 'duration': 13.805}, {'end': 398.602, 'text': "I'm going to say vertex xy.", 'start': 396.916, 'duration': 1.686}, {'end': 400.603, 'text': "Let's just see what happens.", 'start': 399.622, 'duration': 0.981}, {'end': 402.424, 'text': 'Yeah, I got something crazy.', 'start': 401.343, 'duration': 1.081}, {'end': 404.645, 'text': 'I set all these vertices all over the place.', 'start': 403.304, 'duration': 1.341}, {'end': 408.267, 'text': "So what I'm actually doing is something called polar Cartesian quarter transformation.", 'start': 404.845, 'duration': 3.422}, {'end': 411.069, 'text': "I'll link to a video that goes over it in more detail.", 'start': 408.287, 'duration': 2.782}], 'summary': 'Discussion about polar cartesian quarter transformation and video link provided.', 'duration': 27.978, 'max_score': 383.091, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/76fiD5DvzeQ/pics/76fiD5DvzeQ383091.jpg'}, {'end': 530.941, 'src': 'heatmap', 'start': 499.743, 'weight': 0.875, 'content': [{'end': 512.751, 'text': 'Let spacing equal map mouseX, which goes between 0 and width to between 5 degrees and 100 degrees.', 'start': 499.743, 'duration': 13.008}, {'end': 515.134, 'text': "So let's at least see this work.", 'start': 513.832, 'duration': 1.302}, {'end': 519.998, 'text': 'Whoa Oh, I forgot to draw the background in here.', 'start': 516.615, 'duration': 3.383}, {'end': 521.679, 'text': 'So let me put the background in draw.', 'start': 520.018, 'duration': 1.661}, {'end': 528.581, 'text': "So you can see I'm changing that angle.", 'start': 523.359, 'duration': 5.222}, {'end': 530.941, 'text': "So I'm slowly increasing the resolution of the circle.", 'start': 528.621, 'duration': 2.32}], 'summary': 'Mapping mousex from 0 to width to 5Â° to 100Â°, gradually increasing circle resolution.', 'duration': 31.198, 'max_score': 499.743, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/76fiD5DvzeQ/pics/76fiD5DvzeQ499743.jpg'}, {'end': 557.015, 'src': 'embed', 'start': 530.981, 'weight': 2, 'content': [{'end': 536.363, 'text': 'So the point that I wanted to show this to you is not because this is some beautiful pattern that you should use,', 'start': 530.981, 'duration': 5.382}, {'end': 542.345, 'text': 'but the reason why you might use custom shapes and set vertices is actually to have an algorithm define those vertices.', 'start': 536.363, 'duration': 5.982}, {'end': 544.646, 'text': 'So what if you wanted to make a bubble, a cloud?', 'start': 542.685, 'duration': 1.961}, {'end': 552.051, 'text': "So I actually have a Coding Train community project about making a cloud, which I'll also link to in here, which this could form the basis.", 'start': 544.947, 'duration': 7.104}, {'end': 557.015, 'text': "I think I've done stuff with a Perlin Noise Blob coding challenge at one point that this also relates to.", 'start': 552.412, 'duration': 4.603}], 'summary': 'Custom shapes and vertices can be algorithmically defined for creating patterns like bubbles and clouds.', 'duration': 26.034, 'max_score': 530.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/76fiD5DvzeQ/pics/76fiD5DvzeQ530981.jpg'}, {'end': 585.923, 'src': 'embed', 'start': 558.496, 'weight': 3, 'content': [{'end': 564.88, 'text': "And what I was going to do was use a sine wave to have this feel like it's breathing back and forth, back and forth.", 'start': 558.496, 'duration': 6.384}, {'end': 569.243, 'text': "So that's maybe something that you should try as an exercise after this video.", 'start': 564.9, 'duration': 4.343}, {'end': 572.065, 'text': "So what I want to do, I'm going to leave this here.", 'start': 569.263, 'duration': 2.802}, {'end': 576.41, 'text': "But I'm going to comment this out again, and I want to just talk about one other thing.", 'start': 572.905, 'duration': 3.505}, {'end': 579.594, 'text': 'So here we go.', 'start': 578.232, 'duration': 1.362}, {'end': 585.923, 'text': 'Remember this weird shape that I created? is a polygon that has a set of vertices.', 'start': 579.614, 'duration': 6.309}], 'summary': 'Using a sine wave to create a breathing effect and discussing polygon vertices.', 'duration': 27.427, 'max_score': 558.496, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/76fiD5DvzeQ/pics/76fiD5DvzeQ558496.jpg'}], 'start': 40.449, 'title': 'Creating custom shapes and vertices in p5', 'summary': 'Discusses how to create custom shapes in p5 using the beginshape and endshape functions, allowing for the creation of arbitrary vertices and polygons, such as a quad and a custom polygon with four sides. it also introduces the concept of custom shapes and vertices in programming using processing, demonstrating how to define and manipulate vertices to create custom shapes, and explores potential applications such as creating patterns and simulating natural movements.', 'chapters': [{'end': 175.74, 'start': 40.449, 'title': 'Custom shapes in p5', 'summary': 'Discusses creating custom shapes in p5 using the beginshape and endshape functions, allowing for the creation of arbitrary vertices and polygons, such as a quad and a custom polygon with four sides.', 'duration': 135.291, 'highlights': ['The chapter introduces the concept of custom shapes in P5, which can be created using the beginShape and endShape functions, allowing for the definition of arbitrary vertices and polygons.', 'It explains the use of the quad function in P5 to create a shape with four arbitrary sides, demonstrating the flexibility of defining shapes.', 'The speaker emphasizes the use of the beginShape and endShape functions for creating custom shapes, providing the freedom to specify any number of arbitrary vertices between the two functions.']}, {'end': 579.594, 'start': 175.96, 'title': 'Custom shapes and vertices', 'summary': 'Introduces the concept of custom shapes and vertices in programming using processing, demonstrating how to define and manipulate vertices to create custom shapes, and explores the potential applications such as creating patterns and simulating natural movements.', 'duration': 403.634, 'highlights': ['The chapter introduces the concept of custom shapes and vertices in programming using Processing. It covers the fundamental idea of defining and manipulating vertices to create custom shapes.', 'Demonstrates how to define and manipulate vertices to create custom shapes. The demonstration includes manually setting vertices and using algorithms to define the vertices, with examples of creating patterns and simulating natural movements.', 'Explores the potential applications such as creating patterns and simulating natural movements. The chapter discusses potential applications, such as creating patterns and simulating natural movements, and suggests exercises for viewers to try, such as using a sine wave to simulate breathing movements.']}], 'duration': 539.145, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/76fiD5DvzeQ/pics/76fiD5DvzeQ40449.jpg', 'highlights': ['The chapter introduces the concept of custom shapes in P5, allowing for the definition of arbitrary vertices and polygons using beginShape and endShape functions.', 'It explains the use of the quad function in P5 to create a shape with four arbitrary sides, demonstrating the flexibility of defining shapes.', 'Demonstrates how to define and manipulate vertices to create custom shapes, including manually setting vertices and using algorithms, with examples of creating patterns and simulating natural movements.', 'Explores potential applications such as creating patterns and simulating natural movements, and suggests exercises for viewers to try.']}, {'end': 1126.698, 'segs': [{'end': 603.672, 'src': 'embed', 'start': 579.614, 'weight': 5, 'content': [{'end': 585.923, 'text': 'Remember this weird shape that I created? is a polygon that has a set of vertices.', 'start': 579.614, 'duration': 6.309}, {'end': 591.806, 'text': "But in addition to vertex, there's actually something called curve vertex that I can call.", 'start': 586.564, 'duration': 5.242}, {'end': 594.728, 'text': "Now, there's also something called Bezier vertex.", 'start': 592.587, 'duration': 2.141}, {'end': 599.55, 'text': 'And Bezier vertex is a kind of curve vertex for a special kind of curve called a Bezier curve.', 'start': 594.808, 'duration': 4.742}, {'end': 603.672, 'text': 'And actually, the Runes custom shape page goes through that in detail.', 'start': 599.85, 'duration': 3.822}], 'summary': 'Polygon with curve and bezier vertices explained in custom shape page.', 'duration': 24.058, 'max_score': 579.614, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/76fiD5DvzeQ/pics/76fiD5DvzeQ579614.jpg'}, {'end': 907.215, 'src': 'heatmap', 'start': 816.675, 'weight': 2, 'content': [{'end': 825.158, 'text': "So let's make this 150, 50, and 250, like 60 or something.", 'start': 816.675, 'duration': 8.483}, {'end': 830.82, 'text': "So you're going to see, oh boy, let's, and that's also, my apologies.", 'start': 826.139, 'duration': 4.681}, {'end': 835.002, 'text': "Let's also put these as the actual points we're drawing.", 'start': 832.261, 'duration': 2.741}, {'end': 841.539, 'text': 'And where does this go? Whoops.', 'start': 838.937, 'duration': 2.602}, {'end': 856.537, 'text': "What did I say, 150, I'm 150, 50, and 250, 60? So you can see, these points are actually controlling how this curve looks.", 'start': 842.921, 'duration': 13.616}, {'end': 859.299, 'text': "And there could be many more points, it's just controlling the entry of the curve.", 'start': 856.577, 'duration': 2.722}, {'end': 863.563, 'text': "So like, what if I made this point mouse x, mouse y? This is what I'm trying to demonstrate.", 'start': 859.56, 'duration': 4.003}, {'end': 872.169, 'text': "Mouse x, took me a while to get to this, but mouse x, mouse y, and now I'm going to make that first point mouse x, mouse y.", 'start': 863.643, 'duration': 8.526}, {'end': 877.348, 'text': 'So you can see, as I move this around, it changes.', 'start': 874.025, 'duration': 3.323}, {'end': 878.75, 'text': "Let's zoom in a little bit more.", 'start': 877.368, 'duration': 1.382}, {'end': 881.152, 'text': 'It changes the entry to the curve.', 'start': 879.23, 'duration': 1.922}, {'end': 884.515, 'text': 'And actually, this is an interesting way to make something interactive.', 'start': 881.873, 'duration': 2.642}, {'end': 889.5, 'text': "Like imagine if this oscillated up and down, it's almost like this wiggling string or something.", 'start': 884.856, 'duration': 4.644}, {'end': 896.187, 'text': "So again, as you're building these custom shapes, the shape now is only those two points, right? If I were to say close.", 'start': 889.86, 'duration': 6.327}, {'end': 907.215, 'text': "You know, oh, interestingly enough, it's like, ah, look, it actually connected it all the way around to the first point.", 'start': 901.513, 'duration': 5.702}], 'summary': 'Demonstrating control of curve entry with custom points and mouse input.', 'duration': 90.54, 'max_score': 816.675, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/76fiD5DvzeQ/pics/76fiD5DvzeQ816675.jpg'}, {'end': 1079.505, 'src': 'embed', 'start': 1009.493, 'weight': 0, 'content': [{'end': 1012.054, 'text': "I'm going to have to investigate if that works in P5 or not.", 'start': 1009.493, 'duration': 2.561}, {'end': 1017.016, 'text': 'But the idea being that I can mix, some are curved, some are jagged.', 'start': 1012.674, 'duration': 4.342}, {'end': 1025.179, 'text': 'So to recap, custom shapes are polygons or paths that you define.', 'start': 1017.116, 'duration': 8.063}, {'end': 1027.624, 'text': 'by a set of vertices.', 'start': 1026.583, 'duration': 1.041}, {'end': 1033.171, 'text': 'You can have them be tiled by certain kinds of quad strips or triangle strips or that kind of thing.', 'start': 1027.964, 'duration': 5.207}, {'end': 1036.954, 'text': 'You can have curved vertices or regular vertices.', 'start': 1033.531, 'duration': 3.423}, {'end': 1039.718, 'text': 'If you have curved, you need to have control points for the curve.', 'start': 1037.135, 'duration': 2.583}, {'end': 1051.031, 'text': 'And the reason for doing that is quite possibly more likely because you want to have something more dynamic.', 'start': 1040.439, 'duration': 10.592}, {'end': 1053.393, 'text': 'Oh, and look, I connected these in this weird, crazy way.', 'start': 1051.151, 'duration': 2.242}, {'end': 1060.399, 'text': "So here's the ending Frankenstein thing of this weird hard-coded and circle.", 'start': 1053.433, 'duration': 6.966}, {'end': 1066.083, 'text': 'Something I want to mention, actually before I wrap up with the computer, is that you might be asking yourself well,', 'start': 1060.819, 'duration': 5.264}, {'end': 1069.495, 'text': "what's the math that calculates this curve?", 'start': 1066.083, 'duration': 3.412}, {'end': 1075.381, 'text': 'Well, there are different kinds of mathematical functions to figure out how a curve goes between two different points.', 'start': 1069.816, 'duration': 5.565}, {'end': 1077.623, 'text': 'I mentioned a Bezier curve.', 'start': 1076.382, 'duration': 1.241}, {'end': 1079.505, 'text': "There's a specific kind of Bezier function.", 'start': 1077.643, 'duration': 1.862}], 'summary': 'Custom shapes in p5 can be defined as polygons or paths with curved or jagged vertices, and can be tiled by quad strips or triangle strips.', 'duration': 70.012, 'max_score': 1009.493, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/76fiD5DvzeQ/pics/76fiD5DvzeQ1009493.jpg'}], 'start': 579.614, 'title': 'Curve vertices and control points', 'summary': 'Delves into understanding curve vertices and the challenges of working with curves, emphasizing the need for additional points to control the entry and exit of the curve. it also explores the creation of custom shapes using vertices and control points, demonstrating the dynamic control of shapes and mentioning the mathematical functions behind curve calculations.', 'chapters': [{'end': 717.847, 'start': 579.614, 'title': 'Understanding curve and bezier vertices', 'summary': 'Explains the concept of curve vertices and the challenges of working with curves, emphasizing the need for additional points to control the entry and exit of the curve.', 'duration': 138.233, 'highlights': ['Curve vertices introduce the concept of curving around edges instead of having hard edges, creating challenges as additional points are needed to control the entry and exit of the curve.', "Bezier vertices are a special kind of curve vertex for Bezier curves, discussed in detail in Runes' custom shape page.", "The challenges of working with curves are highlighted, including the potential disappearance of points and the need for additional points to define the curve's behavior."]}, {'end': 1126.698, 'start': 719.889, 'title': 'Custom shapes and control points', 'summary': 'Explores the creation of custom shapes using vertices and control points, demonstrating the use of curve vertices to dynamically control the shape, and also mentions the mathematical functions behind curve calculations.', 'duration': 406.809, 'highlights': ['The chapter explores the creation of custom shapes using vertices and control points. It demonstrates the process of defining custom shapes with specific vertices and control points, showcasing the flexibility in creating unique shapes.', 'Demonstrates the use of curve vertices to dynamically control the shape. The chapter illustrates the dynamic control of shape by using curve vertices, allowing for interactive manipulation of the shape, such as changing the entry of the curve based on mouse movement.', 'Mentions the mathematical functions behind curve calculations. It mentions the existence of different mathematical functions, such as Bezier curve and Catmull-Rom spline, for calculating the curve between two points, providing insight into the mathematical aspects of shape manipulation.']}], 'duration': 547.084, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/76fiD5DvzeQ/pics/76fiD5DvzeQ579614.jpg', 'highlights': ['Curve vertices introduce the concept of curving around edges instead of having hard edges, creating challenges as additional points are needed to control the entry and exit of the curve.', 'The chapter explores the creation of custom shapes using vertices and control points. It demonstrates the process of defining custom shapes with specific vertices and control points, showcasing the flexibility in creating unique shapes.', 'Demonstrates the use of curve vertices to dynamically control the shape. The chapter illustrates the dynamic control of shape by using curve vertices, allowing for interactive manipulation of the shape, such as changing the entry of the curve based on mouse movement.', "The challenges of working with curves are highlighted, including the potential disappearance of points and the need for additional points to define the curve's behavior.", 'Mentions the mathematical functions behind curve calculations. It mentions the existence of different mathematical functions, such as Bezier curve and Catmull-Rom spline, for calculating the curve between two points, providing insight into the mathematical aspects of shape manipulation.', "Bezier vertices are a special kind of curve vertex for Bezier curves, discussed in detail in Runes' custom shape page."]}], 'highlights': ["Rune Madsen's online book 'Programming Design Systems' provides a much better explanation about custom shapes than the tutorial.", 'The webpage walks through the concept of thinking about a shape as having different vertices, offering valuable insights into graphic design and code.', 'Rune Madsen is known for his amazing work in graphic design and code, and the chapter references his excellent content on color.', 'The chapter introduces the concept of custom shapes in P5, allowing for the definition of arbitrary vertices and polygons using beginShape and endShape functions.', 'It explains the use of the quad function in P5 to create a shape with four arbitrary sides, demonstrating the flexibility of defining shapes.', 'Demonstrates how to define and manipulate vertices to create custom shapes, including manually setting vertices and using algorithms, with examples of creating patterns and simulating natural movements.', 'Explores potential applications such as creating patterns and simulating natural movements, and suggests exercises for viewers to try.', 'Curve vertices introduce the concept of curving around edges instead of having hard edges, creating challenges as additional points are needed to control the entry and exit of the curve.', 'The chapter explores the creation of custom shapes using vertices and control points. It demonstrates the process of defining custom shapes with specific vertices and control points, showcasing the flexibility in creating unique shapes.', 'Demonstrates the use of curve vertices to dynamically control the shape. The chapter illustrates the dynamic control of shape by using curve vertices, allowing for interactive manipulation of the shape, such as changing the entry of the curve based on mouse movement.', "The challenges of working with curves are highlighted, including the potential disappearance of points and the need for additional points to define the curve's behavior.", 'Mentions the mathematical functions behind curve calculations. It mentions the existence of different mathematical functions, such as Bezier curve and Catmull-Rom spline, for calculating the curve between two points, providing insight into the mathematical aspects of shape manipulation.', "Bezier vertices are a special kind of curve vertex for Bezier curves, discussed in detail in Runes' custom shape page."]}