let snare;

let part;

let isPlaying = false;

let loop1;

let kickPattern;

let snarePattern;

let kickIndex;

let snareIndex;

​

function preload() {

  kick = loadSound("kick.wav");

  snare = loadSound("snare.wav");

  bell = loadSound("bell.wav");

}

​

​

function setup() {

  createCanvas(400, 400);

  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

  kickIndex = 0;

  loop1 = new p5.SoundLoop(function(timeFromNow) {

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

      kick.play(timeFromNow);

    }

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

  }, "16n");

  loop1.bpm = 80;

  snareIndex = 0;

  loop2 = new p5.SoundLoop(function(timeFromNow) {

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

      snare.play(timeFromNow);

    }

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

  }, "16n");

  loop2.bpm = 80;

  // for phasing example

  // loop2.bpm = 60;

  let button = createButton("Toggle Loop");

  button.mousePressed(function() {

    if (!isPlaying) {

      loop1.start();

      loop2.start();

      isPlaying = true;

    } else {

      loop1.stop(); 

      loop2.stop();

      isPlaying = false;

    }

  });

}

​

function draw() {

  background(220);

  // draw kick pattern

  let kickDist = width/kickPattern.length;

  for (let i = 0; i < kickPattern.length; i +=1) {

    if (i === kickIndex) {

      fill("red");

    } else if (kickPattern[i] === 1){

      fill("blue"); 

    } else {

      fill("black"); 

    }

    ellipse(kickDist*i + 20, 100, 20, 20);

  }

  // draw snare pattern

  let snareDist = width/snarePattern.length;

  for (let i = 0; i < snarePattern.length; i +=1) {

    if (i === snareIndex) {

      fill("red");

    } else if (snarePattern[i] === 1){

      fill("blue"); 

    } else {

      fill("black"); 

    }

    ellipse(snareDist*i + 20, 200, 20, 20);

  }

}