Les 9 - Synthese


Hieronder de presentatie van de les van vanmorgen over synthese in P5.js

Javascript_les9.pdf


Hieronder ook de code van de les:

/*
  wat gaan we maken?
  - twee verschillende oscillators met eigen envelope en effect
  - een verdeling van het scherm in boven & onder
  - als je boven klikt wordt osc1 afgespeeld
  - als je onder klikt osc2
  - als je boven de muis beweegt pas je een parameter van osc1 aan
  - als je onder de muis beweegt pas je een parameter van osc2 aan.
*/
let osc1, osc2, env1, env2,delay,distortion;
let counter = 0;

function setup() {
  createCanvas(800,600);
  background(255);
  osc1 = new p5.Oscillator('sine');
  osc2 = new p5.Oscillator('sawtooth');
  env1 = new p5.Envelope(0.1,1,1,0);
                      // t.  l t l 
  env2 = new p5.Envelope(0.5,1,0.5,0);
  delay = new p5.Delay();
  distortion = new p5.Distortion()
}

function draw() {
  line(0,height/2,width,height/2);
}

function mousePressed() {
  if (mouseAboveLine()) {
    playSound();
  }
  else {
    playSound2();
  }
}

function mouseAboveLine() {
 return mouseY <= height/2;

}

function mouseMoved() {
  if (mouseAboveLine()) {
    delay.delayTime(map(mouseX,0,width,0.,1.));
  }
  else {
    osc2.freq(map(mouseX,0,width,100,200));
  }
}

function keyPressed() {
  if (key == 'd') {
    playSound(220);
  }
  if (key == 'g') {
    playSound2(251);
  }
}

function playSound(frequentie=345) {
  osc1.freq(frequentie);
  osc1.start();
  delay.process(osc1,0.5,0.5);
  env1.play(osc1);
}

function playSound2(frequentie=423) {
  osc2.freq(frequentie);
  osc2.start();
  env2.play(osc2);
  distortion.process(osc2,0.6);
}