Drawing Music Generator
Create melodies by sketching on the canvas and hear your composition play back instantly.
Overview
The Drawing Music Generator maps spatial paths on a digital canvas into standard musical values. By treating the workspace as a grid of pitch and time divisions, the canvas functions as a direct interface to design melodies visually. This approach bridges visual art and synthesis, allowing users to build polyphonic lines and dynamic sequences.
How to Use
- Drawing Paths: Click or tap and drag across the dark grid area to sketch strokes. Multiple overlapping lines can be added to play together.
- Playback Controls: Tap Play to run the sequencer. The vertical white playhead indicates the active step.
- Adjusting Dynamics and Voice: Change the sound engine using the selector (Synth, AM Synth, FM Synth, or Percussion), alter the stroke thickness to modify musical velocity, or speed up the loop using the BPM slider.
- Configuration Sharing: Tap Share to construct and copy a compressed URL parameter to your clipboard, allowing you to reload your drawing later.
- Automatic Demos: Click the Demo button to cycle through three polyphonic arrangements. An inactivity routine initiates a demo after ten seconds if the grid remains clean.
Technical Details
The audio engine relies on Tone.js, scheduling precise polyphonic sound triggers mapped from an internal 1200 x 600 virtual coordinate system. When coordinates are generated or imported, they scale dynamically to fit the physical canvas boundary. This method prevents drawings from becoming offset or scaled incorrectly across responsive viewport sizes. An event timer evaluates paths asynchronously inside requestAnimationFrame callbacks to prevent heavy calculation loops, optimizing the overall page responsiveness.
Future Directions
- Scale Constraints: Adding options to restrict drawing nodes to specific keys, scales, or microtonal intervals.
- Multi-layer Timbral Tracks: Assigning unique synth engines to individual colors so that red paths trigger lead synthesizers while blue paths handle percussion.
- Standard MIDI Exporting: Generating downloadable MIDI sequences based on drawn coordinates for integration into external digital audio workstations (DAWs).