Air Synth: Intro to Creative Software Development
Creative software development course
Air Synth is a nine-session course where students build camera-controlled musical instruments in the browser. The course turns computer science concepts into visible, audible decisions: events, coordinates, debugging, state, calibration, synthesis, geometry, timing, testing, and iteration.
This page introduces the instruments, course arc, technical requirements, and hosting shape for students, maker-space and continuing-education organizers, and computer science departments looking for project-based creative coding instruction.
Students leave with working browser instruments, clearer debugging habits, and a concrete sense of how interface code, geometry, data, and sound synthesis fit together. Host programs get a compact course that works for youth cohorts, adult learners, maker spaces, and exploratory computer science offerings.
Demos
Each demo starts from one clear camera/audio button and focuses on the core interaction: move your hands, hear the software respond, then connect the experience back to the code.
AirTheramin
Try the continuous-sound instrument. Press Start demo, allow camera access, then move one or both hands in view. Left/right changes pitch, higher is louder, and apparent hand size shifts the flute-like tone toward a reedier sound. Make the hand smaller by closing toward a fist or moving farther from the camera; make it larger by opening the fingers or moving closer.
AirSynth
A camera-controlled note instrument. It defaults to flute while hand location selects notes on a compact Janko-style field and hand size shapes volume.
Projects
Continuous Sound
AirTheramin introduces smooth mappings from motion to frequency, amplitude, and timbre. Students can hear tiny code and calibration changes immediately.
Discrete Notes
AirSynth introduces musical layout, geometry, hit testing, timing, and multi-voice behavior through a camera-controlled note field.
Control Panels
The course accumulates toward the working prototype controls: camera/play, calibration, tone/profile, persistent settings, voice toggles, song controls, and status readouts.
Course Arc
Each meeting has a complete, well-documented body of code. The session code demonstrates the current concept and builds directly on the preceding code, so students can inspect, experiment, and regain mastery between meetings.
Each session follows a repeatable rhythm: review, demo, walkthrough, setup, exercises, review, and preview.
Browser Runtime
Wire buttons, read errors, enable camera/audio, and make the first sound.
Coordinates And Pixels
Draw tracking overlays and map x/y position to visible values.
State And Data
Model hands, notes, instruments, voices, interface state, and settings.
Calibration
Turn messy camera input into usable movement and size ranges.
Web Audio
Build AirTheramin: motion becomes frequency, amplitude, and timbre.
Geometry
Build AirSynth’s hex/Janko note field and detect selected notes.
Timing
Add songs, highlighting, playback timing, and multi-voice experiments.
Testing
Run peer tests, diagnose device issues, tune controls, and add fallbacks.
Showcase
Polish projects, present instruments, review testing changes, and plan extensions.
Requirements
Student Computer
Laptop with camera, audio output, Wi-Fi, modern browser, enough disk space, and permission to install/run development tools.
Development Tools
Chrome or Edge, VS Code, Git, Node.js LTS with npm, Python 3 for a simple local server if needed, and course starter files.
Room
Reliable Wi-Fi, outlets, and enough space for participants to stand or move hands in front of laptop cameras. Projector and speakers are useful but not required.
Schedule Shape
The course is designed as nine two-hour sessions. A Monday/Wednesday/Friday rhythm over three weeks works well because students have time between sessions to inspect code, experiment, and return with better questions.