Adapted from Cassie Tarakajian 🙏

https://editor.p5js.org/cassie/sketches/H75F64z2f

​

And: https://p5js.org/reference/#/p5.SoundLoop

​

Tone.Time convention to encode intervals as strings

https://github.com/Tonejs/Tone.js/wiki/Time

​

Tempo (BPM) ranges for musical genres

https://learningmusic.ableton.com/make-beats/tempo-and-genre.html

​

Polyrhythm: a rhythm which makes use of two or more different rhythms simultaneous

*/

​

​

let kick;

let kickPattern;

let kickIndex;

​

let snare;

let snarePattern;

let snareIndex;

​

let isPlaying = false;

​

function preload() {

  kick = loadSound("kick.wav");

  snare = loadSound("snare.wav");

}

​

function setup() {

  createCanvas(400, 400);

  let button = createButton("Toggle Playback");

  button.mousePressed(togglePlayback);

  masterVolume(0.7);

​

  // try 

  // polyrhythms

  // kickPattern = [1, 0, 0, 0];

  // snarePattern = [1, 0, 0];

​

  //   // weirder polyrhythm

  kickPattern = [1, 0, 0, 0, 0];

  snarePattern = [1, 0, 0, 0, 0, 0, 0];

​

  //   // syncopation

  // kickPattern = [1, 0, 0, 0];

  // snarePattern = [0, 0, 0, 1];

​

  //   // phasing

  // kickPattern = [1, 0, 1, 0];

  // snarePattern = [1, 0, 0, 0];

  // BUT ALSO CHANGE BPM BELOW

​

  kickIndex = 0;

  loop1 = new p5.SoundLoop(loopKick, "16n");

​

  snareIndex = 0;

  loop2 = new p5.SoundLoop(loopSnare, "16n")

}

​

​

function draw() {

  background(220);

}

​

​

function loopKick(interval) {

  if (kickPattern[kickIndex] === 1) {

    kick.play(interval)

  }

  kickIndex = (kickIndex + 1) % kickPattern.length;

  loop1.bpm = 80;

}

​

​

function loopSnare(interval) {

  if (snarePattern[snareIndex] === 1) {

    snare.play(interval)

  }

  snareIndex = (snareIndex + 1) % snarePattern.length;

  loop2.bpm = 80;

​

  // for phasing example

  // loop2.bpm = 60;

}

​

​

function togglePlayback() {

  if (!isPlaying) {

    loop1.start();

    loop2.start();

    isPlaying = true;

  } else {

    loop1.stop();

    loop2.stop();

    isPlaying = false;

  }

}