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 & JSON in JavaScript

    • Arrays and array methods in JavaScript

    • Basic objects and JSON structures

    • Managing multiple elements (e.g., bouncing balls)

    • Hands-On Exercises

  • 5

    Session 5: Interactive Sketches & Basic Animation

    • RecapOnTerms

    • Callbacks

    • AppliedCallbacks_ArrayFN

    • Assignment

    • IntroEventsCallbacks

    • MoreEvents

  • 6

    Session 6: Guest Speaker #1

    • Talk by a professional Creative Coder/Artist: portfolio, career insights, demos

    • Q&A with students

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

  • 7

    Session 7: Advanced p5.js: Images, Video & Transformations

    • Using images, video, and external media in p5.js

    • The preload() function and asset management

    • Transformations (translate(), rotate(), scale())

    • Hands-On Exercises

  • 8

    Session 8: Generative Techniques: Randomness & Noise

    • Randomization in visuals (random color, position)

    • Perlin noise basics for organic effects

    • Balancing control and chaos in generative art

    • Hands-On Exercises

  • 9

    Session 9: Mini Project Workshop: Advanced p5.js Concepts

    • Consolidating advanced p5.js concepts

    • Structuring and debugging more complex sketches

    • Hands-On Exercises

  • 10

    Session 10: Getting Started with Node.js

    • Setting up Node.js, npm, and a basic “Hello World” server

    • Differences between front-end and back-end JavaScript

    • Hands-On Exercises

  • 11

    Session 11: Basic Routing & API Overview in Node.js

    • Serving static files and basic routing

    • Using or consuming APIs in Node.js

    • Hands-On Exercises

  • 12

    Session 12: Guest Speaker #2

    • Professional talk on web-based interactive experiences

    • Demos of real-world Node.js + p5.js projects

    • Q&A with students

    • Homework: Refine or build a Node-based creative experiment (e.g., data-driven sketch)

  • 13

    Session 13: Fetching External Data for Creative Visualizations

    • Fetching data from APIs (Node.js or p5.js)

    • Parsing JSON for creative output

    • Hands-On Exercises

  • 14

    Session 14: Workshop: Building a Data-Driven Mini-Project

    • Combining Node.js and p5.js for data-driven art

    • Handling asynchronous data loading

    • Hands-On Exercises

  • 15

    Session 15: Deployment & Best Practices

    • Intro to hosting (Glitch, Heroku, or local hosting)

    • Project organization and error handling

    • Hands-On Exercises

  • 16

    Session 16: tone.js Basics: Oscillators & Envelopes

    • Setting up tone.js in the browser

    • Basic synthesis concepts (oscillators, envelopes)

    • Hands-On Exercises

  • 17

    Session 17: Audiovisual Synergy with p5.js & tone.js

    • Linking visuals to audio triggers

    • Interactive or generative audiovisual experiences

    • Hands-On Exercises

  • 18

    Session 18: Guest Speaker #3

    • Audio Programmer / Sound Artist talk

    • Demos of tone.js or similar tools in real-world projects

    • Q&A with students

    • Homework: Develop a short audiovisual sketch focusing on interactivity or generative music

  • 19

    Session 19: Scheduling, Sequencing & Effects

    • tone.js scheduling events and sequences

    • Effects (filters, reverb, delay) for creative sound design

    • Hands-On Exercises

  • 20

    Session 20: Generative Audiovisual Techniques

    • Probability-based sequences, random pitch in tone.js

    • Mapping user inputs (mouse, sliders) to real-time sound changes

    • Hands-On Exercises

  • 21

    Session 21: Project Workshop: Polishing Your Audiovisual Concept

    • Refine creative concepts combining visuals and audio

    • Organizing code and assets for a cohesive project

    • Hands-On Exercises

  • 22

    Session 22: Final Project Planning: Concept & Deliverables

    • Final project scope, concept, and requirements

    • Showcasing creative coding work effectively

    • Hands-On Exercises

  • 23

    Session 23: Final Project Presentations (In-Progress) & Peer Review

    • Informal presentations of near-complete projects

    • Peer feedback, Q&A, iterative improvements

    • Hands-On Exercises

  • 24

    Session 24: Guest Speaker #4 & Wrap-Up

    • Industry professional talk: portfolio building, professional development

    • Final project presentations and course celebration

    • Wrap-Up