3 for 2

var nmesures=2;

var tempo=60;

var timeResolution=12;

var div=4;

var nbeats=3;

var margin, su,up;

var showTriplets=true;

var showEighths=true;

var showBeats=true;

let heart, moment,hw,hh;

let melody=[];

let bass=[];

let polySynth,slider;

function preload() {

  heart = loadImage('heart.png');

  bird = loadImage('bird.png');

}

function setup() {

  createCanvas(windowWidth, windowHeight);

  polySynth = new p5.PolySynth();

  margin=windowWidth/20;

  hw=heart.width;

  hh=heart.height;

  up=2*margin;

  slider = createSlider(30, 120, 60);

  slider.position(margin,margin);

  slider.style('width', '15%');

  melody=[0,4,8,12,30,36,40,44,48,60];

  bass=[0,6,12,18,24,30,36,42,48,54,60,66];

  colorMode(HSB, 360, 255, 255);

  imageMode(CENTER);

  fill(255);

}

function displayPart() {

  background(302, 60,65);

  su=(18*windowWidth/20)/(nmesures*timeResolution*nbeats);

  for (var i=0; i<nmesures*timeResolution*nbeats+1; i++) {

    if (i%(timeResolution*nbeats)==0) {

      stroke(0, 255, 255);

      strokeWeight(6);

      line(margin+i*su, up, margin+i*su, height-margin);

    }

    if (showBeats && i%(timeResolution)==0) {

      stroke(0);

      strokeWeight(3);

      line(margin+i*su, up, margin+i*su, height-margin);

    }

    if (showEighths && i%(.5*timeResolution)==0) {

      stroke(100, 255, 255);

      strokeWeight(1);

      line(margin+i*su, up, margin+i*su, height-margin);

    }

    if (showTriplets && i%(4)==0) {

      stroke(200, 255, 255);

      strokeWeight(2);

      line(margin+i*su, up, margin+i*su, height-margin);

    }

    let coeff=map(abs(moment-i),0,2,1.5,.5);

    if(melody.indexOf(int(i))!=-1){

      if(abs(moment-i)>2)image(bird,margin+i*su,3*margin,.5*hw,.5*hh);

      else image(bird,margin+i*su,3*margin,hw*coeff,hh*coeff);

    }

    if(bass.indexOf(int(i))!=-1){

      if(abs(moment-i)>2)image(heart,margin+i*su,height-3*margin,.5*hw,.5*hh);

      else image(heart,margin+i*su,height-3*margin,hw*coeff,hh*coeff);

    }

  }

}

function draw() {

  background(255);

  displayPart();

  stroke(0);

  strokeWeight(.5);

  text("Tempo: "+slider.value(),1.5*margin,.8*margin);

  var totalduration=nmesures*nbeats*1000*60/slider.value();

  var xt=map(millis()%totalduration, 0, totalduration, margin, width-margin);

  line(xt, up, xt, height-margin);

  moment=int(map(xt,margin,width-margin,0,nmesures*timeResolution*nbeats));

  if(bass.indexOf(moment)!=-1)playSynth('G2');

  if(melody.indexOf(moment)!=-1)playSynth('c4');

}

function playSynth(note) {

  userStartAudio();

​

  // note duration (in seconds)

  let dur = 0.1;

​

  // time from now (in seconds)

  let time = 0;

​

  // velocity (volume, from 0 to 1)

  let vel = 0.2;

​

  // notes can overlap with each other

  polySynth.play(note, vel, 0, dur);

}