Bootcamp: Creative Coding 101
A vocational course designed to equip you with the in-demand creative coding skills you need for a successful career in interactive art, generative design, and beyond.
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
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
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
Arrays and array methods in JavaScript
Basic objects and JSON structures
Managing multiple elements (e.g., bouncing balls)
Hands-On Exercises
RecapOnTerms
Callbacks
AppliedCallbacks_ArrayFN
Assignment
IntroEventsCallbacks
MoreEvents
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
Using images, video, and external media in p5.js
The preload() function and asset management
Transformations (translate(), rotate(), scale())
Hands-On Exercises
Randomization in visuals (random color, position)
Perlin noise basics for organic effects
Balancing control and chaos in generative art
Hands-On Exercises
Consolidating advanced p5.js concepts
Structuring and debugging more complex sketches
Hands-On Exercises
Setting up Node.js, npm, and a basic “Hello World” server
Differences between front-end and back-end JavaScript
Hands-On Exercises
Serving static files and basic routing
Using or consuming APIs in Node.js
Hands-On Exercises
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)
Fetching data from APIs (Node.js or p5.js)
Parsing JSON for creative output
Hands-On Exercises
Combining Node.js and p5.js for data-driven art
Handling asynchronous data loading
Hands-On Exercises
Intro to hosting (Glitch, Heroku, or local hosting)
Project organization and error handling
Hands-On Exercises
Setting up tone.js in the browser
Basic synthesis concepts (oscillators, envelopes)
Hands-On Exercises
Linking visuals to audio triggers
Interactive or generative audiovisual experiences
Hands-On Exercises
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
tone.js scheduling events and sequences
Effects (filters, reverb, delay) for creative sound design
Hands-On Exercises
Probability-based sequences, random pitch in tone.js
Mapping user inputs (mouse, sliders) to real-time sound changes
Hands-On Exercises
Refine creative concepts combining visuals and audio
Organizing code and assets for a cohesive project
Hands-On Exercises
Final project scope, concept, and requirements
Showcasing creative coding work effectively
Hands-On Exercises
Informal presentations of near-complete projects
Peer feedback, Q&A, iterative improvements
Hands-On Exercises
Industry professional talk: portfolio building, professional development
Final project presentations and course celebration
Wrap-Up