Introduction to Sound Synthesis and Computer Music Interfaces through Creative-Coding Experiments in JavaScript
In October ’21, we conducted a ten-day workshop for students of the Srishti Institute of Art, Design & Technology, where we introduced the participants to the fundamentals of Computational Sound using p5.js — a creative JavaScript library. During the first half, participants were given a contextual overview of computational sound, where they were presented with a history of electronic music instruments and interfaces through certain documentaries and readings. During this time, they also started exploring p5.js as a creative coding environment. Initially, they undertook experiments with text & image, and later went on to explore sound synthesis using the p5.js sound library.
In the second half of the workshop, the participants attempted to apply their learnings and worked on building virtual synthesizers and sample-based instruments in p5.js. On the final day, the participants presented their instruments, which ranged from virtual emulations of traditional electronic music interfaces to more experimental interfaces. Keeping with TheISRO traditions, the workshop was concluded by an open jam session with the participants and their instruments.
Here are works by some of the participants:
Workshop Syllabus
Abstract
This 2-week workshop will introduce participants to the fundamentals of electronic music and human-machine interfaces through creative coding experiments with JavaScript. During the workshop, participants will develop a contextual understanding about electronic music instruments such as synthesisers, samplers and drum machines, and will try to build their own basic virtual musical instruments and interfaces using creative JavaScript libraries. The workshop is meant for beginners and will thus also act as a friendly introduction to programming with p5.js. No previous knowledge of coding or electronic music instruments is required.
Day 1 — October 11th
Introductory Session
Introductions by Participants
Introduction to workshop schedule/outline
Brief history/background of p5.js:
Processing — Java — web friendly JavaScript — JS libraries — p5.js
Viewing:
Day 2 — October 12th
Introduction to p5.js — Image Making & Basic Typography:
Introduction to p5.js interface — reference page, web editor — making an account
basic structure/syntax — setup(), draw(), coordinates, etc.
Drawing shapes
Different methods for declaring colour — HEX, RGB, HTML/CSS name
Typography 101: text, text box, using system fonts, etc.
Uploading images & font files — file upload — preload(), declaring variables and assigning it a value
Exercise 1: Make a poster for ‘Computational Approaches to Sound’
Exercise 2: ‘Illustrate a Basic Synthesizer’
Day 3 — October 13th
Demonstration of HackMD for making documentation reports
Viewing:
‘I Dream of Wires’ (2013 Hardcore Edition)
Studio-Time to continue exploring p5.js and working on exercises
Day 4 — October 16th
Introduction to Sound Synthesis & p5.js Sound Library
What is an Oscillator — types of Waveforms — Frequency — Hz — Amplitude — Frequency & Musical Notes
How to make an oscillator in p5 — p5.oscillator()
Make a Toggle Button to start/stop oscillator — using createButton, mousePressed and new ‘toggle’ function with if-else loop for playing=true/playing=false
What is an Envelope? — ADSR explained
How to create an envelope in p5 — p5.envelope() — connecting an envelope to oscillator — envelopeName.play(oscillatorName) or oscillatorName.amp(envelopeName)
What is a Filter? — Cutoff, Resonance, LowPass, High Pass, BandPass, etc.
How to make a filter in p5 — p5.Filter() — — using oscillatorName.disconnect() & oscillatorName.connect(filterName)
Assignment for the Weekend:
Continue to play around with Oscillators, Envelopes & Filters in p5.js
Day 5 — October 18th
Viewing:
‘The Shape of Things that Hum’ (2001) Episodes: DX7, Fairlight, Simmons Drum Kit, TB303, TR808, Akai S1000
Discussion:
Landmark Electronic Music Instruments of the 80s — DX7, TB303, TR808, etc. and their cultural contexts — — ‘instrument designers and builders v/s users’: Case of 303 — birth of Acid, Phuture, Charanjit Singh…
Listening:
Charanjit Singh, ‘Ten Ragas to a Disco Beat’, 1983
Day 6 — October 19th
Interface Elements for Synths
Using DOM Sliders to modulate various parameters of the oscillator, filter, envelope, delay, reverb, etc.
Installing and using external JavaScript libraries — Color Knob Maker: KnobMakerC.js — downloading and uploading .js file in sketch directory, including script src in HTML head
Using Knobs from KnobMaker library to control synth parameters
Introduction to Delay
What is Delay? — Delay Time and Feedback explained
Using p5.Delay — p5.Delay parameters: Sound Source, Time & Feedback
Workshop Final Assignments
Make an interactive synthesizer or sample-based instrument in p5.js — either ‘emulate a traditional interface’ i.e with knobs, sliders, buttons, etc. or make an ‘experimental interface’ for controlling the various parameters
Write a two-pager with personal reflections about ‘Computational Music and Tools & Interfaces’ in the context of your ‘applied practice’
Day 7, 8, 9 — October 20th to 22nd
‘Studio-time’ to work on final projects + individual assistance and feedback rounds.
Day 10 — October 23rd
Participants’ presentations of their final projects & open-jam session
Resources
Films:
‘The New Sound of Music’ (1979)
‘Discovering Electronic Music’ (1983)
‘I Dream of Wires’ (Hardcore Edition, 2013)
‘The Shape of Things that Hum’ (Series, 2001)
Readings:
Christopher Alex McLean, ‘Artist-Programmers and Programming Languages for the Arts’
Andrew J. Nelson, ‘The Sound of Innovation: Stanford and the Computer Music Revolution’
Trevor Pinch and Frank Trocco, ‘The Social Construction of the Early Electronic Music Synthesizer’
Tara Rodgers, ‘Tinkering with Cultural Memory: Gender and the Politics of Synthesizer Historiography’
Nicholas C. Laudadio, ‘“Sounds Like a Human Performance” The Electronic Music Synthesizer in Mid-Twentieth Century Science Fiction’
Dusin J. Green, ‘The Synthesizer: Modernist and Technological Transformations in Film Sound and Music’
Comments