Draw and animate with JavaScript and p5.js: shapes, movement, decisions, lists, objects and functions, ending in a small game you build yourself.
★ Challenge completeDraw on a canvas, make it move every frame, and make decisions.
Draw circles, rectangles, triangles and lines on a canvas with p5.js, and find out where the corner (0, 0) is.
p5 calls draw() about 60 times a second. A variable that changes a little each time makes a shape move.
Use if and else to bounce a circle off the edges, change its colour, and follow the mouse.
Lists and loops, objects, and functions of your own.
Keep many numbers in an array, draw one thing for each with a loop, and build the array with random numbers.
Keep everything about one star (its place and its speed) together in an object, and move a whole list of them.
Give a piece of code a name, hand it values with parameters, and get an answer back with return.
Build a click-to-catch game with a score, lives and a restart. One optional lesson makes moving art.
Click the falling circles to score. Fix a catch that works backwards, add lives and a game over, then add a power-up of your own.
Use sin and cos to move things in circles, map to turn one range into another, and make a pattern of your own.
Progress is saved in this browser only. Nothing is sent anywhere.
For teachers: Teacher guide (notes, answers, solutions, slides and worksheets)