Introduction to Creative Coding
Learn the fundamental concepts of p5.js and create your first p5.js sketch to draw and color shapes!
Start
Key Concepts
Review core concepts you need to learn to master this subject
The p5.js Library
p5.js Project Structure
Including the p5.js Library
The p5.js Canvas
The createCanvas() Function
The Default Canvas
The noCanvas() Function
The background() Function
The p5.js Library
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
- 1Welcome 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…
- 2Before 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…
- 4Great! 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…
- 5We 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 …
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory
Introduction to Creative Coding
Start