Learn to code with p5.js
Bite-sized, hands-on lessons that teach programming by drawing. No account needed. Your progress is saved right here in your browser.
1. Getting Started
Meet the canvas, draw your first shapes, add color, print to the console, and make things move.
- The canvas & your first shapesMeet the 400×400 canvas and its coordinate system, then draw rectangles and ellipses.6 min
- Adding colorUse background, fill, and stroke to color the canvas and your shapes.6 min
- Printing to the consoleUse println to print messages and values: your most important debugging tool.5 min
- The draw loopDefine draw() to animate your sketch and respond to the mouse.7 min
2. Variables & Data Types
Store values in variables, do math with numbers, build messages from strings, flip booleans, and use it all to drive a drawing.
- Declaring variablesCreate a named box with let or const, give it a value, and use it to position or size a shape.6 min
- Numbers & arithmeticDo math with + - * / and %, and reassign a variable to update its value.7 min
- Strings & textHold text in strings and join pieces together with + to build a message.6 min
- Booleans: true & falseMeet the boolean, a value that is only ever true or false, a gentle warm-up for conditionals.5 min
- Variables in drawingsUse one variable in several calls so a tweak in one place updates the whole drawing.7 min
3. Conditionals
Teach your sketch to make decisions: run code only when a condition is true, choose between options, and combine tests.
- The if statementUse if and comparison operators to run some code only when a condition is true.6 min
- if / elseUse else and else-if chains to choose between two or more options.7 min
- Combining conditionsJoin conditions with && (and), || (or), and flip them with ! (not).7 min
- Branching on a valueUse a value like mouseX to decide what your sketch draws, the heart of interaction.8 min
4. Loops
Repeat code without repeating yourself: draw rows, space shapes out with a counter, and build grids with loops inside loops.
- The for loopUse a for loop to run the same drawing code many times instead of copying it.6 min
- Counting with iUse the loop counter i in calculations to spread shapes out across the canvas.7 min
- The while loopRepeat code as long as a condition stays true with the while loop.7 min
- Nested loopsPut a loop inside a loop to fill the canvas with a grid of shapes.8 min
5. Functions
Bundle code into your own named functions, feed them inputs, return values, and reuse them to build whole scenes.
- Defining your own functionBundle a few lines of code into a named function with function name() {}, then call it to run them.6 min
- Parameters: giving a function inputsAdd parameters so one function can do its job at different positions, then call it with different arguments.7 min
- Returning a valueWrite a function that computes a number and returns it, then store the result in a variable.7 min
- Reuse: build a scene with a helperWrite one reusable drawing helper and call it several times to compose a whole picture.8 min
6. Arrays
Store a whole list of values in one variable, read them by index, loop over them, build them up, and use them to draw patterns.
- Making a listCreate an array with square brackets, read items by their index, and check how many it holds with .length.6 min
- Looping over an arrayUse a for loop with array[i] and array.length to do something with every item, like drawing one shape per element.8 min
- Growing an array with pushStart with an empty array and add items to the end with .push() to build a list as you go.7 min
- Patterns from an arrayStore a set of x positions in an array and loop over them to lay out a neat row of shapes.8 min
7. Objects
Bundle related data into objects, read and use their properties, give them methods, and manage a whole crowd with an array of objects.
- Meet objectsGroup related values into an object literal and read them back with dot notation.6 min
- Drawing from an objectFeed an object's properties into a drawing function to put it on the canvas.6 min
- Giving objects methodsStore a function inside an object so it can act on its own data.7 min
- An array of objectsCombine arrays and objects to manage a whole crowd of things at once.8 min
8. Capstone Projects
Put it all together: build a bouncing ball, a twinkling starfield, and an interactive art toy using every skill you've learned.
- Bouncing ballCombine variables, the draw loop, and conditionals to animate a ball that bounces off every edge of the canvas.12 min
- StarfieldBuild an array of star objects in a loop, then draw the whole field every frame: arrays, objects, loops, and functions working together.14 min
- Interactive art toyBuild a paintbrush that responds to the mouse, combining functions, conditionals, and the mouse globals into a toy you can play with.14 min