After you're feeling comfortable sizing and placing a few different shapes, we can look to all the ways p5.js allows us to color and stylize them with design functions. Create a rendition of your favorite app icon or logo, or propose an original. Use design functions such as stroke(), fill(), strokeWeight() and noStroke() to add design elements to your shape commands.
TIP: Just like with our last p5.js sketch, always make sure you're calling your shape functions inside the square brackets of either function setup() {} or function draw() {}.
Thanks to p5.js design functions, we're able to combine multiple shapes seamlessly, like we have in this star shaped logo. Since overlapping stroke lines can be distracting, using noStroke(); and a fill() function to remove any distracting outlines, presents us with a complete, complex shape.
It's as if every line of code that calls a shape function is telling your browser to cut that shape out of pixelated construction paper, followed by gluing it down on top of your programming canvas in the place you described-- regardless of whether or not something has already been drawn on that X, Y coordinate. This is also why when you include the background() color function on the last line of your project's code, then the very last instruction your web browser would interpret and execute is placing an opaque background color on top of all the visuals that are drawn before that final instruction.
In Closing...
By this point, you're probably extremely curious with function draw() {} and function setup() {}, or extremely frustrated, or both! Especially since function draw() {} might be affecting our design and color functions in unexpected ways. We'll start to dissect these strange functions in the next chapter, but for now, just do your best to complete another p5.js sketch using the shape functions you've learned stylized by the color and design functions covered in this chapter.