Skip to Content
Learn
Introduction to Creative Coding with p5.js
Review

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.

Instructions

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!

Folder Icon

Take this course for free

Already have an account?