Learning p5.js

p5js painting with code - p5.js intro

p5js links

• p5js reference
• p5js online editor
• p5js cheat sheet

My first sketch

Basic Shapes

Mini assignment

Using only the basic shapes you just learned how to make, try to draw a face in code! Do it inside the p5js online editor and make sure you save your sketch.

MouseX and MouseY

No background + comments

Only draw if mouse is pressed

Using sin + millis to control ellipse size

Using sin + millis to control ellipse size and random to control color

Using random to control ellipse size, position & color

Mini assignment

Spend 15 minutes changing the previous example, by controlling the colors, using a different shape than ellipse or adding something else to the sketch. If you are not sure what to do, just try to change the numbers one by one and see what happens! Do it directly on this page or in the p5js online editor.

Simple brush

Advanced brush

Bonus: Painting with body and microphone (opens in p5js online editor)

• Microphone input
• Painting with body parts (using poseNet from ml5js)
• Painting with text

Bonus: Additional tutorials + examples

• Transformations: Rotation, push, pop, translate & scale (Gene Kogan)
• Expressions, variables & loops (Allison Parrish)
• Media: Images & Sound (Allison Parrish)
• Text & Type (Allison Parrish)
• Machine Learning examples using ml5 and p5js