• 0 Creative Programming 2
• 1. Basics and visuals
• 2. Sound
• 3. 3D and Augmented Reality
• 4. Interaction and sensors
• Literatur

Top

2. Sound

---

Content

0. Sound library
1. Playing mp3
2. Synthesize sounds
3. Analyzing mic-input: Amplitude
4. FFT

0. Sound library

First we have to load the sound library in HTML:

< script src="P5/addons/p5.sound.min.js">< /script>
   

---

1. Playing mp3

Load and play mp3 - files:

var song;

function setup() {
  song = loadSound('yourFile.mp3');
  song.loop();
  createCanvas(640, 100);
  background(200);
}

function draw(){
  speed = map(mouseY, 0.1, height, 0, 2);
  speed = constrain(speed, 0.01, 4);
  song.rate(speed);
}

function mousePressed() {
  if (song.isPlaying()) {
    song.stop();
  } else {
    song.play();
  }
}
  

---

Interact with speed and volume:

var song;
var speed;
var amp;

function preload(){
  song = loadSound('material/lutos.mp3');
}

function setup() {
  song.loop();
  createCanvas(640, 200);
  background(100);
  stroke(150);
}

function draw(){
  background(100);
  speed = map(mouseY, 0.1, height, 0, 2);
  speed = constrain(speed, 0.01, 4);
  song.rate(speed);
  amp = map(mouseX, 0.1, width, 0, 1);
  amp = constrain(amp, 0.01, 1);
  song.setVolume(amp);
  line(mouseX, 0, mouseX, height);
  line(0, mouseY, width, mouseY);
}

function mousePressed() {
  if (song.isPlaying()) {
    song.stop();
  } else {
    song.play();
  }
}
  

---

2. Analyzing mic-input: Amplitude

var mic;
var isOn = false;

function setup() {
  createCanvas(690, 400);
  mic = new p5.AudioIn();
}


function draw() {
  noStroke();
  fill(235, 30);
  rect(0, 0, width, height);
  fill(0);
  text("Press mouse to start tracking mic.", 10, 10)
  var vol = mic.getLevel();
  fill(127);
  stroke(0);

  // Draw an ellipse with height based on volume
  //if(vol > 0.02){
  var r = map(vol, 0, 1, 0, width * 30);
  ellipse(width / 2, height / 2, r + 40, r + 40);
  //}
}

function mousePressed() {

  if (isOn) {
    mic.stop();
    isOn = false;
  } else {
    mic.start();
    isOn = true;
  }
}

---

3. FFT

var song;

function preload(){
  song = loadSound('oreo.mp3');
  fft = new p5.FFT();
}

function setup() {
  
  song.rate(1);
  createCanvas(690, 400);
  background(100);
  stroke(150);
}

function draw(){
  background(230);
  fill(0);
  text("Press mouse to start/stop track.",10,10);
  var spectrum = fft.analyze();
  noStroke();
  fill(200,0,0,100);

  for (var i = 0; i< spectrum.length; i++){
    var aktuellerWert = spectrum[i];
    //var x = map(i, 0, spectrum.length, 0, width*3);
    //var h = -height + map(aktuellerWert, 0, 255, height, 0);
    var x = i*4;
    var h = aktuellerWert;
    rect(x, height, 1, -h );
  }
}

function mousePressed() {
  if (song.isPlaying()) {
    song.stop();
  } else {
    song.play();
  }
}

---

4. Synthesize sounds

Noise

function setup() {
  createCanvas(640, 200);
  background(100);
  stroke(150);
  fft = new p5.FFT();
  ns = new p5.Noise()
  ns.amp(0.5);
  ns.start();
}

function draw(){
  background(100);
  var spectrum = fft.analyze();
  noStroke();
  fill(200);

  for (var i = 0; i< spectrum.length; i++){
    var x = map(i, 0, spectrum.length, 0, width*3);
    var h = -height + map(spectrum[i], 0, 255, height, 0);
    rect(x, height, width / spectrum.length, h )
  }
}

Oscillators

Filters

Envelopes

---