Learn P5JS with Real Code Examples

Learn basic JavaScript syntax

Understand `setup()` and `draw()`

Experiment with shapes, colors, and animation

Handle events like mouse and keyboard

Create interactive sketches and small projects

Week 1: Draw shapes and apply colors

Week 2: Animate objects and learn frame updates

Week 3: Handle mouse/keyboard events

Week 4: Work with images, sounds, and video

Week 5: Build interactive projects and mini-games

What is the difference between `setup()` and `draw()` in p5.js?

How do you handle mouse and keyboard events in p5.js?

Explain the use of `createCanvas()`

How would you animate objects in p5.js?

What libraries extend p5.js functionality?

createCanvas(width, height) - initialize drawing area

background(color) - set canvas background

fill(color) - set fill color for shapes

stroke(color) - set outline color for shapes

ellipse(x, y, w, h), rect(x, y, w, h) - draw shapes

Getting Started with p5.js - Lauren McCarthy

Make: Getting Started with p5.js

Creative Coding with p5.js

Generative Design with p5.js

The Nature of Code

Getting Started with p5.js

Drawing and Animating Shapes

Handling Events and Interactivity

Working with Images, Sound, and Video

Building Interactive Projects and Games

https://p5js.org/reference/

https://p5js.org/

p5.js Forum

Processing Foundation

p5.js GitHub repository

Creative Coding Slack/Discord

Online learning platforms like The Coding Train

Official p5.js website and forums

Creative coding Slack/Discord communities

GitHub repository for p5.js

Tutorial blogs and YouTube channels

Processing Foundation educational resources