Amazing! You’ve now written your first dynamic visual sketch with only a few lines of code!
In this lesson, we learned about the p5.js library and how it simplifies visual programming in the browser. We also learned about how a p5.js sketch operates. First, the HTML page loads the library, then the
setup() function is automatically called once and creates an HTML
<canvas> element, and finally, the
draw() function runs in an infinite loop.
In the following lessons, we’ll learn about using the p5.js library to create more dynamic and interactive sketches. Next, we’ll learn how to draw two-dimensional shapes to the canvas—the basic building blocks of p5.js.
On the right side, you will see a p5.js sketch that is drawn using basic two-dimensional shapes that you will learn about in the next exercise.
Click the “Up Next” button when you are ready to draw with code!