Learning P5.JS

Resources

• P5.JS Editor (don't forget to sign in!)
• P5.JS Reference
• Coding Train Videos
• Allison Parrish Tutorial Series
• Introduction to Creative Coding

🔰 Dev Camp

🗓 Week 01

Core Concepts

• P5.js is a Javascript "library" that provides code for "functions that help you accomplish useful tasks"
• P5.js was designed "make coding accessible for artists, designers, educators, and beginners"
• Using the P5.js Editor
• A "sketch" is a project that runs setup() once and repeats the draw() loop over and over
• The computer reads your code line-by-line as it executes it
• P5.js draws based on (x,y) coordinates

Coding Train Videos  🚂🌈☁️

1. Code! Programming for Beginners with p5.js
2. p5.js Web Editor - p5.js Tutorial
3. Shapes & Drawing
4. Color
5. Using the "Console"

🗓 Week 02

Core Concepts

• Variables allow you to retrive, store, and manipulate information
• Declare and initialize your variables
• Using 'built-in' variablessuch as width/height or mouseX/mouseY
• 'Strings' of text characters
• Using the conditional 'if → then' to make stuff happen!
• Comparison (== >= <= !=) and Logical (&& || !) operators

Coding Train Videos  🚂🌈☁️

• Making and using variables
• Using mouseX and mouseY
• Boolean (true/false) variables
• Conditional Statements
• 'Commenting' your code

🗓 Week 03

Core Concepts

• Repetition with the For Loop
• Text and Type