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