let endBPM = 120;

let duration = 60; // Duration in seconds

let currentBPM;

let lastBeat;

let startTime;

let isPlaying = false;

​

osc = new p5.Oscillator('sine');

​

function setup() {

  // Create a parent div to hold the canvas and the controls

  let container = createDiv();

  container.style('display', 'flex');

  container.style('flex-direction', 'column');

  container.style('align-items', 'center');

  container.style('justify-content', 'center');

  container.style('height', '100vh'); // Full viewport height

  // Create the canvas and add it to the container

  let canvas = createCanvas(400, 300);

  container.child(canvas); // Append the canvas to the container

  textAlign(CENTER, CENTER);

    // Create the interface elements and add them to the container

  let startBPMLabel = createP('Start BPM:');

  startBPMLabel.style('margin', '5px 0');

  startBPMLabel.parent(container);

​

  startBPMInput = createInput(startBPM.toString());

  startBPMInput.style('margin', '5px 0');

  startBPMInput.parent(container);

  startBPMInput.input(updateStartBPM);

​

  let endBPMLabel = createP('End BPM:');

  endBPMLabel.style('margin', '5px 0');

  endBPMLabel.parent(container);

​

  endBPMInput = createInput(endBPM.toString());

  endBPMInput.style('margin', '5px 0');

  endBPMInput.parent(container);

  endBPMInput.input(updateEndBPM);

​

  let durationLabel = createP('Duration (seconds):');

  durationLabel.style('margin', '5px 0');

  durationLabel.parent(container);

​

  durationInput = createInput(duration.toString());

  durationInput.style('margin', '5px 0');

  durationInput.parent(container);

  durationInput.input(updateDuration);

​

  startButton = createButton('Start');

  startButton.style('margin', '10px 0');

  startButton.parent(container);

  startButton.mousePressed(toggleMetronome);

}

​

function draw() {

  background(220);

  if (isPlaying) {

    let elapsedTime = (millis() - startTime) / 1000;

    currentBPM = map(elapsedTime, 0, duration, startBPM, endBPM);

    if (elapsedTime >= duration) {

      currentBPM = endBPM;

    }

    let interval = 60000 / currentBPM;

    if (millis() - lastBeat > interval) {

      playBeat();

      lastBeat = millis();

    }

  }

  textSize(32);

  text(isPlaying ? `Current BPM: ${currentBPM.toFixed(1)}` : 'Metronome Stopped', width/2, height/2);

}

​

function toggleMetronome() {

  if (!isPlaying) {

    startMetronome();

    startButton.html('Stop');

  } else {

    stopMetronome();

    startButton.html('Start');

  }

}

​

function startMetronome() {

  isPlaying = true;

  startTime = millis();

  lastBeat = millis();

  currentBPM = startBPM;

}

​

function stopMetronome() {

  isPlaying = false;

}

​

function playBeat() {

  // You can replace this with actual sound playback

  console.log('Beat');

  osc.freq(800); // Set frequency to 800 Hz for a click-like sound

  osc.amp(0.5); // Set amplitude to 0.5 (adjust as needed)

  osc.start();

  osc.stop(0.1); // Stop the oscillator after 0.1 seconds

}

​

function updateStartBPM() {

  startBPM = parseFloat(startBPMInput.value());

}

​

function updateEndBPM() {

  endBPM = parseFloat(endBPMInput.value());

}

​

function updateDuration() {

  duration = parseFloat(durationInput.value());

}