Course curriculum

  • 1

    Session 1: Intro to p5.js & JavaScript Basics

    • 1.0 Welcome to the course!

    • 1.1 Introduction to JavaScript

    • 1.2 "Hello, JavaScript!": variables, data types, console.log()

    • 1.3 Introduction to p5.js

    • 1.4 Using variables and operators in p5.js

    • 1.5 Homework
  • 2

    Session 2: Control Flow, Conditionals & Loops

    • 2.0 Introduction

    • 2.1 Environment Setup

    • 2.2 The Boolean type

    • 2.3 Conditionals and if statements in practice

    • 2.4 For Loops

    • 2.5 Grid Hands-On Excercise
  • 3

    Session 3: Functions & Organizing Code in p5.js

    • 3.1 Functions in JavaScript: declarations, parameters, return values

    • 3.2 Variable scope

    • 3.3 Best practice: writing clean functions

    • 3.4 Hands-On Practice: Improve with helper function

    • 3.5 Advanced Technique: Recursive Functions

    • Homework
  • 4

    Session 4: Arrays, Objects & Classes

    • 4.1 Arrays and array methods in JavaScript

    • 4.2 Basic objects and classes

    • 4.3 Managing multiple elements (with bouncing balls)

    • 4.4 Hands-On Exercises (with more bouncing balls!)

    • Cellular Automata Bonus Video
  • 5

    Session 5: Interactive Sketches & Basic Animation

    • 5.0 Introduction to Interactivity

    • 5.1 Glossary Update

    • 5.2 Callbacks

    • 5.3 p5.js Events

    • 5.4 More events
  • 6

    Session 6: Working with External Library - ML5

    • Useful Links

    • Code Example
  • 7

    Session 7: Data and APIs

    • Code Example

    • Useful Links
  • 8

    Session 8: Working with Image & Pixels

    • Code Example

    • Useful Links
  • 9

    Session 9: More Data & Optimization

    • Code Example w/ Starter Code

    • Useful Links