Workshop: Computational Approaches to Sound

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:


Adhavan: https://preview.p5js.org/adhavan.sivaraj16/present/meP06PeIU




Ankit: https://preview.p5js.org/ankitmehra4278/present/NjwqtE9a-




Enakshi: https://preview.p5js.org/enakshi.dhingra/present/LyLkufwn4






Malavika: https://preview.p5js.org/malavikahp/present/WwXoHGEpV




Samarjit: https://preview.p5js.org/xangutio/present/9cazZ4WDm




Sharada: https://preview.p5js.org/Sharada/present/hyY3QLsGn




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’


0 comments