let peaks;

let gnumSlider;

let gsizeSlider;

let jitterSlider;

let UIheight;

​

function preload() {

  sound = loadSound("401824__logicmoon__dubbish_108.wav");

  // sound = loadSound("STE-034 schlepper passes by.wav");

}

​

function setup() {

  createCanvas(444, 555);

​

  peaks = sound.getPeaks(width);

  sound.loop();

  gnumSlider = createSlider(1, 30, 1);

  gnumSlider.position(0, height - gnumSlider.height * 3);

  gsizeSlider = createSlider(0.01, 0.2, 0.1, 0.01);

  gsizeSlider.position(0, height - gsizeSlider.height * 2);

  jitterSlider = createSlider(0.01, 1, 0, 0);

  jitterSlider.position(0, height - jitterSlider.height);

  UIheight = gnumSlider.height*3;

}

​

function draw() {

  background("lightgrey");

  drawWaveform();

  drawPlayhead();

  drawUI();

}

​

function drawWaveform() {

  stroke("grey");

  peaks.forEach((vol, i) => {

    y = map(vol, 0, 1, 0, height/2);

    line(i, height/2 - y, i, height/2+y)

  });

}

​

function drawPlayhead() {

  stroke("white");

  ct = sound.currentTime();

  resolution = width/sound.duration()

  line(ct*resolution, 0, ct*resolution, height);

}

​

function drawUI() {

  rect(0, height-UIheight, width, height);

  text("grain number",

       gnumSlider.x + gnumSlider.width    + 10,

       gnumSlider.y + gnumSlider.height/2 + 5);  

  text("grain size",

       gsizeSlider.x + gsizeSlider.width    + 10,

       gsizeSlider.y + gsizeSlider.height/2 + 5);

  text("jitter",

       jitterSlider.x + gsizeSlider.width    + 10,

       jitterSlider.y + gsizeSlider.height/2 + 5);

}

​

function mousePressed() {

  if((mouseY < height-UIheight) & (mouseIsPressed)) {

    granulate_p5(gnumSlider.value(),

              gsizeSlider.value(),

              jitterSlider.value());

  }

}

​

// Using standard JS setTimeout

function granulate_vanilla(num, size, jitter) {

  console.log(num, size, jitter);

  for (let i=0; i < num; i++) {

    timeout = i * size + random(jitter);

    setTimeout(() => {

      let ct = sound.currentTime();

      let startTime = i*size;

      let cueStart = ct - size;

      sound.play(0, 1, 1, cueStart, size);

    }, timeout*1000);

  }

}

​

// Using p5.js play cueStart etc.

function granulate_p5(num, size, jitter) {

  console.log(num, size, jitter);

  for (let i=0; i < num; i++) {

    let st = i * size + random(jitter);

    let cueStart = sound.currentTime() + st + i*size;

    sound.play(st, 1, 1, cueStart, size);

  }

}