Learn
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()
andline()
rect()
andsquare()
ellipse()
andcircle()
triangle()
andquad()
- 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!
Instructions
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
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.