Key Concepts

Review core concepts you need to learn to master this subject

The p5.js Library

p5.js is a JavaScript library for creative coding. A collection of pre-written code, it provides us with tools that simplify the process of creating interactive visuals with code in the web browser.

Introduction to Creative Coding with p5.js
Lesson 1 of 2
  1. 1
    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 quick…
  2. 2
    Before diving into code, let’s take a look at the web technologies that p5.js uses. If you are relatively new to web programming, remember that web applications typically require three types of fil…
  3. 3
    Programming graphics with p5.js is a lot like drawing on graph paper, except the HTML element is your paper! The element is an HTML element that renders graphics created with JavaScript’s [Canv…
  4. 4
    Great! You just called your first p5.js function! You might not be able to see anything in the browser yet because the canvas is empty, but it’s there! Let’s break down the code from the last exe…
  5. 5
    We learned about the structure of a p5.js sketch and that p5.js will automatically call the setup() function! There’s only one more built-in function to learn about before we start programming our …
  6. 6
    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 brow…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo