p5.js Basics

P5.js is an open-source Javascript library for creative coding.

This module is an introduction to installing and using this powerful library built for artists, designers, educators, and learners.

Objectives

Upon completion of this module, you should be able to:

• Create new p5.js projects using the web editor.
• Create new p5.js projects on your local machine.
• Describe the purpose of the setup and draw methods.
• Resize the drawing canvas and query for the canvas height/width.
• Draw 2D shapes to the canvas in a variety of colors.
• Optionally clear the background before each frame.
• Translate, rotate, scale, save, and restore the coordinate system.
• Respond to keyboard and mouse events.
• Display images to the canvas.
• Display text in the debugging console and on the canvas.
• Load and play sound files.

Linked Resources

Linked resources will be identified with the following emoji:

• 🚂: Coding Train video by Dan Shiffman.
• 📺: Other YouTube video tutorial.
• 📜: Reference page from the official p5.js API docs.
• 🔰: One of the official learning guides.
• 🏷️: Example from the official website.
• 📦: Source code repository.
• 🧰: Helpful tool, plugin, extension, etc.
• 📚: Any other online tutorial, guide, or blog post.

---

Table of contents

• Getting Started
• Drawing Shapes
• User Input
• Images, Text, and Sound
• Animation
• Debugging
• Examples and Resources