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:

‘The New Sound of Music’ (1979) BBC

‘Discovering Electronic Music’ (1983)



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’