Course curriculum

  • 1

    Session 1: Intro to p5.js & JavaScript Basics

    • Welcome to the course!

    • Introduction to web development

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

    • Introduction to p5.js

    • Using variables and operators in p5.js

    • Homework
  • 2

    Session 2: Control Flow, Conditionals & Loops

    • First: Download VS Code

    • Loops (for, while) for repetitive drawing patterns

    • Debugging basics in the browser console

    • Hands-On Exercises

    • AppliedConditionals

    • BoolIntro

    • Grid_Exercise

    • InstallVSCODe

    • Recap_Intro

    • IntroLoops
  • 3

    Session 3: Functions & Organizing Code in p5.js

    • Functions in JavaScript: declarations, parameters, return values

    • Variable scope

    • Best practice, writing clean function

    • Hands-On Practice: Improve with helper function

    • Advanced Technique: Recursive Functions

    • Homework
  • 4

    Session 4: Arrays, Objects & Classes

    • Arrays and array methods in JavaScript

    • Basic objects and classes

    • Managing multiple elements (with bouncing balls)

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

    Session 5: Interactive Sketches & Basic Animation

    • RecapOnTerms

    • Callbacks

    • AppliedCallbacks_ArrayFN

    • Assignment

    • IntroEventsCallbacks

    • MoreEvents
  • 6

    Session 6: Mini Project Workshop

    • Apply concepts from Weeks 1–2

    • Hands-on support building a small interactive or generative art project

    • Homework: Refine your best p5.js sketch from Weeks 1–2 and share for feedback
  • 7

    Session 7: Introduction to Node.js

    • What is Node.js and why use it?

    • Setting up a simple Node server

    • Understanding the difference between front-end and back-end

    • Hands-On Exercises
  • 8

    Session 8: APIs & Data in Creative Work

    • Fetching and using external data (e.g., weather, text, images)

    • Using JSON with p5.js

    • Mapping data to visual elements

    • Hands-On Exercises
  • 9

    Session 9: Data Project Workshop

    • Begin a small project using live or static data

    • Combine p5.js and Node.js for creative visualizations

    • Hands-On Exercises
  • 10

    Session 10: Deployment & Project Structure

    • Hosting basics (e.g., Glitch)

    • File structure and debugging strategies

    • Preparing your codebase for sharing

    • Hands-On Exercises
  • 11

    Session 11: Final Project Studio

    • Work session to develop your final project

    • Peer-to-peer feedback and instructor guidance
  • 12

    Session 12: Final Presentations & Feedback

    • Present your final project

    • Receive feedback and certification instructions

    • Wrap-up and next steps