# **Computational Approaches to Sound**
**Introduction to Electronic Music Interfaces through Creative Coding Experiments with JavaScript**
10-Day Workshop at Srishti Institute, Bengaluru
**11th - 23rd October 2021**
---
**Workshop 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 2021**
*Introductory Session*
- Introductions by Participants
- Introduction to workshop schedule/outline
- Brief history/background of p5.js:
Processing --- Java --- applets --- Web-friendly JavaScript --- JS libraries--- p5.js
- Screening/Viewing Documentaries:
['The New Sound of Music' (1979) BBC](https://www.youtube.com/watch?v=dUTdun0tFE8&list=PLZuKx3C0uj43Au7CfdRYWJpYmtONzopDO&index=4&t=1799s)
['Discovering Electronic Music' (1983)](https://www.youtube.com/watch?v=Ig6vIRmfoNI&list=PLZuKx3C0uj43Au7CfdRYWJpYmtONzopDO&index=3)
---
## **Day 2 – October 12th 2021**
*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 using let *abc* 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 2021**
* Demonstration of HackMD for making documentation reports
* Screening/Viewing Documentary:
'I Dream of Wires' (2013 - Hardcore Edition)
* *Students continued to work on their exercises & play around with p5js*
---
## **Day 4 – October 16th 2021**
*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/Exercise for the weekend: Continue to explore and play around with Oscillators, Envelopes & Fitlers in p5.js
## **Day 5 – October 18th 2021**
* Discussing landmark Electronic Music Instruments of the 80s --- DX7, TB303, TR808, etc. and their cultural contexts ---- 'instrument designers & builders v/s users': 303 - birth of acid example
* Viewing/Screening Documentary series: 'The Shape of Things that Hum' (2001)
Episodes watched: DX7, Fairlight, Simmons Drum Kit, TB303, TR808, Akai S1000
## **Day 6 – October 19th 2021**
*Interface Elements for Synths*
* Using Sliders to modulate various parameters of the oscillator, filter, envelope, delay, reverb, etc.
* Installing and using external JavaScript library --- 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 essay with personal reflections about 'Computational Music and Tools & Interfaces' in the context of your 'applied practice'**
---
## **Day 7 – October 20th 2021**
*'Studio-time' to work on final projects + individual assistance and feedback*
## **Day 8 – October 21st 2021**
*'Studio-time' to work on final projects + individual assistance and feedback*
## **Day 9 – October 22nd 2021**
*'Studio-time' to work on final projects + individual assistance and feedback*
## **Day 10 – October 23rd 2021**
**Participants' presentations of their final projects**
Samarjit's Emulation of a TR808
Enakshi's Synth
Gargee's Synth
Malavika's Synth
**Laptop jam session with the participants' p5.js instruments**
**Recording of the live 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'**](https://monoskop.org/images/1/19/McLean_Christopher_Alex_Artist-Programmers_and_Programming_Languages_for_the_Arts.pdf)
* [Andrew J. Nelson, **'The Sound of Innovation: Stanford and the Computer Music Revolution'**](https://slowrotation.memoryoftheworld.org/Andrew%20J.%20Nelson/The%20Sound%20of%20Innovation_%20Stanford%20(12764)/The%20Sound%20of%20Innovation_%20Stanfo%20-%20Andrew%20J.%20Nelson.pdf)
* [Trevor Pinch and Frank Trocco, **'The Social Construction of the Early Electronic Music Synthesizer'**](https://www.jstor.org/stable/23785956)
* [Tara Rodgers, **'Tinkering with Cultural Memory: Gender and the Politics of Synthesizer Historiography'**](https://online.ucpress.edu/fmh/article-abstract/1/4/5/106392/Tinkering-with-Cultural-MemoryGender-and-the?redirectedFrom=fulltext)
* [Nicholas C. Laudadio, **'"Sounds Like a Human Performance" The Electronic Music Synthesizer in Mid-Twentieth Century Science Fiction'**](https://www.jstor.org/stable/10.5621/sciefictstud.38.2.0304#metadata_info_tab_contents)
* [Dusin J. Green, **'The Synthesizer: Modernist and Technological Transformations in Film Sound and Music'** ](https://scholarship.claremont.edu/cgi/viewcontent.cgi?referer=&httpsredir=1&article=1669&context=cmc_theses)
## **Participants' Documentation Reports**
* [Adhavan](https://hackmd.io/@uswvb-L6Soy-EFL5nR4WNg/Skt3g28rY)
* [Ankit](https://hackmd.io/@dcqGKiw-SOqO2tBHN1APjw/BkpMhAXHt)
* [Anushikha](https://hackmd.io/ppGPr4QOQmOwYu4wR51KCQ)
* [Dhatri](https://hackmd.io/xp8GUE80TXWs3XKMJS0Yfg)
* [Enakshi](https://hackmd.io/@0H4_CPRcS_KLqOWxfqk8og/HJY730Qrt)
* [Gargee](https://hackmd.io/gvdriMixS1qfVcDRz9tovg)
* [Malavika](https://hackmd.io/@2NpSiaT5SWqPuuudnDUf2g/BktQ20XHY)
* Neil
* [Nivedan](https://hackmd.io/@MUbOoZKrTWyq2eeweCHTUA/S1T4JF3SF)
* [Samarjit](https://hackmd.io/DiULKOaPRw-m5ymDfSOh7Q?view)
* [Sharada](https://hackmd.io/A2LaUojlQVujAVsYxZouCg?view)
* [Tejas](https://hackmd.io/@U7GrJ4g8RAmxoLCV4qAk2g/r18M8yOBF)
Sign in with Wallet
Connect another wallet