I had an idea of mapping 8 different synth tones to keyboard keys asdfghjk, and extract the waveform properties from each synth tone using FFT, and display each tone vertically as a line across my canvas like this example: https://p5js.org/reference/#/p5.FFT. So each time a key is pressed, the relative note and line is triggered. I used the syntax from the example. However I couldn't get it to work, nothing was drawn on the canvas when I applied the example code. Later I realized, I was creating sound with tone.js, which is a web audio framework separate from P5.sound, therefore the tone.js and FFT functions in P5 sound would not be compatible. So I looked up FFT on tone API . However, I couldn't find any documentation on how to get an array of values from the function like the P5 example. The example codes in tone are very limited. So I changed my approach, instead of extracting properties from tone.synth(). I decided to sketch the waveforms manually and have each synth note trigger the wave. With that approach, I made two sketches. One for audio and one for visual.
With the visual sketch I have the certain parameters of the waveforms increment or decrement as I go down the lines. I referred to this sine wave example to and created a Wave object and generated an array of 8 waves, passing in wave speed, wave period and wave y location. My biggest challenge for this part was to create an array of objects as the relevant topics have not yet been covered in ICM class.
With the audio sketch, I first used function keyPressed(){}:
function keyPressed(){ if (key === 'a') { synth.triggerAttackRelease("C4",0.1);
I played around with synth.triggerAttackRelease() and function keyReleased(){}. however, its either the sound stops before I release the key or it goes on forever.
I realized I wanted to achieve the effect that when key is pressed, the synth is played continuously, and when key is released, synth stoped. So I used if statement within the draw loop:
if (keyIsPressed & key === 'a') { synth.triggerAttackRelease("C4", 0.1); }
I was able to hold down a key to play a note, but it doesn't sound as nice as the synth generated in the keyPressed function, there was a little buzz noise.
And the issue I had with both approaches was I couldn't get multiple notes to play at the same time, ie to play a chord. There was only one note at a time even though I held down multiple keys on my keyboard. ==> solution: use polysynth , updated synth code
My code: https://editor.p5js.org/ada10086/sketches/rkS9kvhtQ
To play fullscreen: https://editor.p5js.org/full/rkS9kvhtQ
Video:
https://youtu.be/hOIvTyy9OEI