Congratulations! You now know how to draw and color shapes using p5.js! They are the building blocks of the p5.js library and soon you will be adding many more dynamic interactions to them. Let’s review what you’ve learned in this lesson:

  • The p5.js library has many built-in functions to draw 2D shapes to the canvas:
    • point() and line()
    • rect() and square()
    • ellipse() and circle()
    • triangle() and quad()
  • There are style functions that must be called before drawing shapes:
    • background()
    • fill()
    • stroke()
    • strokeWeight()
  • p5.js allows for many ways to specify color:
    • gray value (0 - 255)
    • RGB values (0 - 255)
    • Named CSS color (like 'purple' and 'yellow')
    • 3 or 6 digit hexadecimal values (like '#FE0' and '#1557FF')
  • for loops make it easy to draw many shapes at once.

In the next lesson, you will learn more about the draw() loop and how to turn our static p5.js drawings into animations!


Play with the sketch to the right. Try changing some of the arguments of shape and style functions to see how small changes can produce very different designs. When you’re ready, click Next.

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?