Getting amplitude of multiple p5.Oscillators without using multiple p5.Amplitudes

p5.js Libraries
1

I would like to create multiple oscillators, and tie the current amplitude of each to a color dimension. Oscillator 1’s amplitude is scaled to 0-255 Red value, 2 to Green, and so on.

The problem is, setting multiple p5.Amplitude objects creates lag and audio clipping. It gets noticeable with three p5.Amplitude objects and very noticeable with more than that.

Is there any way I can get the amplitude of a p5.Oscillator or the current amplitude of a p5.Envelope without having to use p5.Amplitude?


var tone1;
var tone2;
var tone3;

var env1;
var env2;
var env3;

var amp1;
var amp2; 
var amp3;


function setup() {
createCanvas(windowWidth, windowHeight);

tone1 = new p5.Oscillator(440);
tone2 = new p5.Oscillator(261.63, 'triangle');
tone3 = new p5.Oscillator(391.995, 'sawtooth');

env1 = new p5.Envelope(0.2, 0.7, 0.2, 0.5, 0.5, 0);
env1.setInput(tone1);

env2 = new p5.Envelope(0.2, 0.7, 0.2, 0.5, 0.5, 0);
env2.setInput(tone2);

env3 = new p5.Envelope(0.2, 0.7, 0.2, 0.5, 0.5, 0);
env3.setInput(tone3);

amp1 = new p5.Amplitude();
amp1.setInput(tone1);

amp2 = new p5.Amplitude();
amp2.setInput(tone2);

amp3 = new p5.Amplitude();
amp3.setInput(tone3);


}

function draw() {
r = map(amp3.getLevel(), 0, 0.7, 0, 255);
g = map(amp1.getLevel(), 0, 0.7, 0, 255);
b = map(amp2.getLevel(), 0, 0.7, 0, 255);
background(0, g, b);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

function mousePressed() {
tone1.start();
env1.triggerAttack();
console.log('attack1');
}

function mouseReleased() {
env1.triggerRelease();
}

function keyPressed() {
  tone2.start();
  tone3.start();
  console.log(key);
  if (key == 'b') {
    env2.triggerAttack();
  } else if (key == 'a') {
    env3.triggerAttack();
  }
}

function keyReleased() {
  console.log(key);
  if (key == 'b') {
    env2.triggerRelease();
  }  else if (key == 'a') {
    env3.triggerRelease();
  }
 }