Learn

Welcome to the wonderful world of p5.js!

p5.js is a JavaScript library that makes it incredibly simple to get started with creative coding by providing a suite of pre-written functions to quickly develop interactive visual programs. With only a few lines of code, you can dynamically create visualizations with shapes and even manipulate media elements like images and videos!

Using the metaphor of a sketchbook, p5.js encourages an approach to programming called sketching as code, where it is easy to add, remove, and change lines of code to create generative programs. We refer to programs made with p5.js as sketches. However, you’re not limited to your drawing canvas—you can think about the whole browser as your sketch. p5.js makes it easy to interact with HTML objects and the world wide web!

An open-source community actively develops the p5.js library, and you can contribute to its development at p5js.org and get involved with Codecademy’s forum to share creative coding sketches and experiments.

If you are new to creative coding, then this course is for you! No prior creative coding knowledge is expected. We will start at the very beginning and move slowly.

If you are new to JavaScript, consider taking our Learn JavaScript course and then returning to p5.js.

Instructions

Take a look at the p5.js sketch on the right. Mouse click changes the color, and the horizontal position of the mouse sets the range of motion. Throughout this course, we will learn how to create visualizations like this and more!

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?