Sound examples

src/content/examples/config.ts

@@ -25,6 +25,9 @@ export const examplesCollection = defineCollection({
       featuredImage: image(),
       featuredImageAlt: z.string().optional().default(""),
 
+      // Optional list of scripts
+      scripts: z.array(z.enum(["p5.sound.js", "Tone.js"])).optional(),
+
       // Optional list of remixes to add to license
       remix: z
         .array(

src/content/examples/en/17_Sound/00_Coding_Beeps/code.js

@@ -0,0 +1,36 @@
+function setup() {
+  createCanvas(400, 400);
+  background(220);
+  textAlign(CENTER);
+  textWrap(WORD);
+  textSize(13);
+  text('click and drag the mouse', width/2, 150);
+
+  //initiallize the oscillator
+  beep = new p5.Oscillator();
+
+  describe('A grey sketch that demonstrates how to use the Oscillator class in p5.sound.js');
+}
+
+function mousePressed() {
+  beep.start();
+}
+
+function mouseReleased() {
+  beep.stop();
+}
+
+function draw() {
+  background(220);
+  let frequency = map(mouseX, 0, width, 440, 880);
+  let amp = map(mouseY, 0, height, 1, 0);
+  beep.freq(frequency);
+  beep.amp(amp);
+  if (beep.started) {
+    text('Frequency: ' + frequency.toFixed(0) + 'Hz', 0, height/2, width);
+    text('Amplitude: ' + amp.toFixed(2), 0, height/2 + 20, width);
+  }
+  else {
+    text('click and drag the mouse to change the frequency and amplitude values', 0, height/2, width);
+  }
+}

src/content/examples/en/17_Sound/00_Coding_Beeps/description.mdx

@@ -0,0 +1,9 @@
+---
+featuredImage: "../../../images/featured/17_p5sound_poster.png"
+featuredImageAlt: An image of sound waves rendered in p5.js.
+title: Making a Beep
+oneLineDescription: Creating tones with an Oscillator.
+scripts:
+ - p5.sound.js
+---
+This sketch introduces the p5.Oscillator to create pitched sounds. Mouse movements control the frequency (pitch) and amplitude (volume) of the sound.

src/content/examples/en/17_Sound/01_Filtering_Sound/code.js

@@ -0,0 +1,32 @@
+function setup() {
+  createCanvas(400, 400);
+  background(220);
+  textAlign(CENTER);
+  textWrap(WORD);
+  textSize(13);
+  text('click and hold to hear the wind', width/2, height/2);
+
+  whiteNoise = new p5.Noise('white');
+  myFilter = new p5.Biquad(400, 'lowpass')
+
+  whiteNoise.disconnect();
+  whiteNoise.connect(myFilter);
+
+  describe('A grey sketch that demonstrates how to create wind and ocean sounds.');
+}
+
+function mousePressed() {
+  background(0, 255, 255);
+  text('release the mouse to stop the wind, move mouse to change the "filter" frequency',0, height/2, width);
+  whiteNoise.start()
+}
+
+function mouseReleased() {
+  background(220);
+  text('click to hear the wind', width/2, height/2);
+  whiteNoise.stop();
+} 
+
+function draw() {
+  myFilter.freq(map(mouseX, 0, width, 200, 18000))
+}

src/content/examples/en/17_Sound/01_Filtering_Sound/description.mdx

@@ -0,0 +1,13 @@
+---
+featuredImage: "../../../images/featured/17_p5sound_poster.png"
+featuredImageAlt: An image of sound waves rendered in p5.js.
+title: Filtering Sound
+oneLineDescription: Simulate the sound of waves and wind with white noise.
+scripts:
+ - p5.sound.js
+---
+This example demonstrates how to "filter" sound using the `p5.Biquad` class. Filters are a core component of sound synthesis and are useful for removing, isolating, or accentuating particular frequency ranges. To learn more about filters see [this guide](https://en.wikipedia.org/wiki/Filter_(signal_processing)).
+
+The sketch also introduces the `p5.Noise` class which can be useful for making wind and water sounds. Noise sources can also be "windowed" with the `p5.Envelope` class to create percussive sounds.
+
+Try experimenting with different kinds of filters such as `bandpass`, `highpass`, and `lowpass` (default).

src/content/examples/en/17_Sound/02_Playing_Melodies/code.js

@@ -0,0 +1,56 @@
+// D Minor Pentatonic Scale
+let notes = [293.66, 349.23, 392.00, 440.00, 523.25, 586];
+//uncomment the line below to use note names instead of frequencies
+//notes = ['D6', 'F6', 'G5', 'A5', 'C6', 'D4'];
+
+function setup() {
+  createCanvas(400, 400);
+  background(220);
+  textAlign(CENTER);
+  textSize(13);
+  text('click and drag mouse around', width/2, 150);
+
+  osc = new p5.Oscillator("square");
+  //create an envelope to control the amplitude of the oscillator
+  env = new p5.Envelope(0.03, 0.01, 0.7, 0.2);
+  delay = new p5.Delay(0.12, 0.7);
+
+  osc.disconnect();
+  osc.connect(env);
+  env.disconnect();
+  env.connect(delay);
+
+  describe('A grey sketch that demonstrates how to play a D Minor Pentatonic scale.');
+}
+
+function mousePressed() {
+  text('move the mouse left to right to change notes', width/2, 150);
+  osc.start();
+  //trigger the attack, or onset, of the envelope to start the sound
+  env.triggerAttack();
+}
+
+function mouseReleased() {
+  //trigger the release of the envelope to stop the sound
+  env.triggerRelease();
+} 
+
+function draw() {
+  background(220);
+  //map the mouseX position to the pentatonic scale and constrain the range to the length of the notes array
+  scaleDegree = constrain(floor(map(mouseX, 0, width, 0, notes.length - 1)), 0, notes.length - 1); 
+  osc.freq(notes[scaleDegree], 0.025)
+  if (mouseIsPressed) {
+    background(0, 255, 255);
+    if (typeof notes[scaleDegree] === 'string') {
+      text('you are playing note: ' + notes[scaleDegree], width/2, 150);
+    }
+    else {
+      text('you are playing note: ' + notes[scaleDegree] + ' Hz', width/2, 150);
+    }
+  }
+  else {
+    text('click and move the mouse left to right to change notes', width/2, 150);
+  }
+
+}

src/content/examples/en/17_Sound/02_Playing_Melodies/description.mdx

@@ -0,0 +1,17 @@
+---
+featuredImage: "../../../images/featured/17_p5sound_poster.png"
+featuredImageAlt: An image of sound waves rendered in p5.js.
+title: Playing Melodies
+oneLineDescription: Create melodic music using an array of pitch values.
+scripts:
+ - p5.sound.js
+---
+Music often makes use of scales, or predetermined pitch sets, to create melodic movement. In western musical traditions pitches are given letter names like 'A' and 'C#.' 
+
+There are many different types of scales from all of over the world. You can learn more about different kinds of scales [here](https://www.huygens-fokker.org/scala/), and [here](https://scalelibrary.org/).
+
+This sketch demonstrates how one might use the 'D Minor Pentatonic' scale by providing the frequency values for each note. It also shows how you can provide a scale as an array of note names.
+
+Valid note names are `C, C#/Db, D, D#/Eb, E, F, F#/Gb, G, G#/Ab, A, A#/Bb, and B`. There is a 10 octave range which you can specify after the note name using values 1-10. For example, 'middle' or 'concert C' can be denoted by the note name, `C4`.
+
+Valid frequency values are 0 - 22,000, measured in Hertz (Hz), where 20 - 22,000 represents the range of human hearing (though keep in mind not many people can hear that high 😅). Values lower than 20 are usually used as 'control values' for other audio parameters.

src/content/examples/en/17_Sound/03_Echo_Synth/code.js

@@ -0,0 +1,53 @@
+
+let colors = ['red', 'orange', 'limegreen', 'green', 'springgreen', 'cyan','dodgerblue', 'blue', 'violet', 'magenta', 'deeppink' ];
+let color = 'red';
+
+function setup() {
+  createCanvas(400, 400);
+  background(color);
+  textAlign(CENTER);
+  textSize(13);
+  //create a 'sawtooth' oscillator
+  //a sawtooth wave form has a grittier texture than the sine wave form
+  beep = new p5.Oscillator('sawtooth', 880);
+  //create an envelope to control the amplitude of the oscillator
+  myEnvelope = new p5.Envelope(0.04)
+  //create a filter to shape the sound of the oscillator
+  myFilter = new p5.Biquad(400, 'lowpass');
+  myFilter.res(10);
+  myFilter.freq(2000);
+  //make a delay to create an echo effect
+  delay = new p5.Delay(0.250, 0.75)
+
+  //connections 
+  //disconnect the oscillator from the main output
+  beep.disconnect();
+  //connect the oscillator to the envelope
+  beep.connect(myEnvelope);
+  //disconnect the envelope from the main output
+  myEnvelope.disconnect();
+  //connect the envelope to the filter
+  myEnvelope.connect(myFilter);
+  myFilter.disconnect();
+  myFilter.connect(delay)
+  describe('A grey sketch that plays a note with a quick attack that echoes, pitches use the harmonic series.');
+}
+
+function mousePressed() {
+  beep.freq(floor(random(2, 10)) * 100, 0)
+  beep.start();
+  myEnvelope.play();
+  color = random(colors);
+}
+
+function draw() {
+  background(color);
+
+  let frequency = map(mouseX, 0, width, 80, 10000);
+  myFilter.freq(frequency);
+  let resonance = map(mouseY, 0, height, 0.1, 10.8);
+  myFilter.res(resonance);
+
+  text('click around to produce echoey sounds.', width/2, 150);
+  text('filter frequency: ' + frequency.toFixed(0) + 'Hz', width/2, 170);
+}

src/content/examples/en/17_Sound/03_Echo_Synth/description.mdx

@@ -0,0 +1,18 @@
+---
+featuredImage: "../../../images/featured/17_p5sound_poster.png"
+featuredImageAlt: An image of sound waves rendered in p5.js.
+title: Echo Synth
+oneLineDescription: Trigger a short sound with an echo effect.
+scripts:
+ - p5.sound.js
+---
+
+The sketch demonstrates how to shape the `p5.Oscillator` class using an Envelope in order to create short "windows" of sound. 
+
+The sound is processed further with the `p5.Biquad` and `p5.Delay` class demonstrating how to "chain" effects. 
+
+Moving the mouse along the x-axis changes the biquad filter's "center frequency" making the note sound brighter or more muffled.
+
+Try to process sounds with other effects such as the `p5.Reverb`, `p5.Panner`, and `p5.PitchShifter` to create different effects. 
+
+

src/content/examples/en/17_Sound/04_Sample_Playback/code.js

@@ -0,0 +1,32 @@
+
+
+async function setup() {
+  sample = await loadSound("/assets/beat.mp3");
+  sample.loop(true);
+  createCanvas(400, 400);
+  textAlign(CENTER);
+  textWrap(WORD);
+  textSize(10);
+  describe("a sketch that changes the playback rate of a soundfile");
+}
+
+function draw() {
+  background(220);
+  rate = map(mouseX, 0, width, 0, 4);
+  sample.rate(rate);
+  if (!sample.isPlaying()) {
+    text("click to play the sound, move your mouse to change the playback rate", 0, height/2, width);
+  }
+  else {
+    text("Playback Rate: " + rate.toFixed(2), 0, height/2, width);
+  }
+}
+
+function mousePressed() {
+  if(!sample.isPlaying()) {
+    sample.play();
+  }
+  else {
+    sample.stop();
+  }
+}

src/content/examples/en/17_Sound/04_Sample_Playback/description.mdx

@@ -0,0 +1,12 @@
+---
+featuredImage: "../../../images/featured/17_p5sound_poster.png"
+featuredImageAlt: An image of sound waves rendered in p5.js.
+title: Sample Playback
+oneLineDescription: Load a soundfile and change its properties.
+scripts:
+ - p5.sound.js
+---
+
+This example demonstrates how to load a soundfile and modify the playback speed using mouse input.
+
+A playback rate of "1" plays the sound at normal speed. "2" is twice as fast, and "0.5" is half-speed.

src/content/examples/en/17_Sound/05_Measuring_Amplitude/code.js

@@ -0,0 +1,42 @@
+async function setup() {
+  createCanvas(400, 400);
+  song = await loadSound('/assets/drums.mp3');
+  song.loop();
+
+  // create a new Amplitude analyzer
+  analyzer = new p5.Amplitude();
+
+  // Patch the sound file output to the analyzer
+  song.connect(analyzer);
+}
+
+function draw() {
+  background(220);
+
+  // Get the average (root mean square) amplitude
+  let rms = analyzer.getLevel();
+
+  push();
+  fill(127);
+  stroke(0);
+  pop();
+
+  textAlign(CENTER);
+
+  // Draw an ellipse with size based on volume
+  ellipse(width / 2, height / 2, 10 + rms * 200, 10 + rms * 200);
+
+  if (song.isPlaying()) {
+    text('click to stop the song', width / 2, 50);
+  } else {
+    text('click to play the song', width / 2, 50);
+  }
+}
+
+function mousePressed() {
+  if (song.isPlaying()) {
+    song.stop();
+  } else {
+    song.play();
+  }
+}

src/content/examples/en/17_Sound/05_Measuring_Amplitude/description.mdx

@@ -0,0 +1,17 @@
+---
+featuredImage: "../../../images/featured/17_p5sound_poster.png"
+featuredImageAlt: An image of sound waves rendered in p5.js.
+title: Measuring Amplitude (Visualization)
+oneLineDescription: Analyze the amplitude of sound with p5.Amplitude.
+scripts:
+ - p5.sound.js
+---
+Analyze the amplitude of sound with `p5.Amplitude`.
+
+Amplitude is the magnitude of vibration and is closely related to volume or loudness.
+
+The `getLevel()` method takes an array of amplitude values collected over a small period of time (1024 samples) and returns the Root Mean Square (RMS) of these values.
+
+Amplitude values for digital audio are typically between -1.0 and 1.0, however RMS will always be positive because it is 'amplitude squared.' Rrather than use instantanous amplitude readings that are sampled at a rate of 44,100 times per second, the RMS is an average over time (1024 samples, in this case), which better represents how we hear amplitude.
+
+You might also experiment with analyzing a sound after a lowpass filter to make more complex visualizations.