let isPlaying = false, isCountingDown = false;

let startTime = 0, countdownStartTime = 0, lastBeatTime = 0;

let currentBpm = 0, startBpm, endBpm, duration;

let osc, font;

let cubeRotation = { x: 0, y: 0, z: 0 };

let targetRotation = { x: 0, y: 0, z: 0 };

let rotationAxis = 'x';

const COUNTDOWN_DURATION = 3;

​

​

let theShader;

​

function preload() {

  font = loadFont('https://cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/font/SourceSansPro-Regular.otf');

​

}

​

let cam;

function setup() {

  createCanvas(windowWidth, windowHeight, WEBGL);

  textAlign(CENTER, CENTER);

  textFont(font);

  noStroke();

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

  osc.amp(0);

  osc.start();

  cam = createCamera();

  cam.setPosition(25, -30, 970);

  cam.lookAt(0, 0, 0);

  startButton = createButton('Start/Stop');

  startButton.mousePressed(toggleMetronome);

  startButton.class('cube-button');

  enableCountdown = createCheckbox('Countdown');

  timeInput = createInput('60');

  startBpmInput = createInput('60');

  endBpmInput = createInput('120');

  [timeInput, startBpmInput, endBpmInput].forEach((input) => {

    input.size(100);

    input.class('cube-input');

  });

//   createP('Duration (seconds)').class('cube-label').position(timeInput.x, timeInput.y - 20);

//   createP('Start BPM').class('cube-label').position(startBpmInput.x, startBpmInput.y - 20);

//   createP('End BPM').class('cube-label').position(endBpmInput.x, endBpmInput.y - 20);

  updateValues();

  windowResized(); // Position UI elements

}

​

​

​

function draw() {

    // Clear the canvas and apply background

  clear()

​

  if (isCountingDown) {

    let countdownTime = COUNTDOWN_DURATION - (millis() - countdownStartTime) / 1000;

    if (countdownTime <= 0) {

      isCountingDown = false;

      startMetronome();

    } else {

      displayCountdown(countdownTime);

    }

  } else if (isPlaying) {

    updateMetronome();

    updateCubeRotation();

  }

  drawRubiksCube();

  drawText();

}

​

function keyPressed() {

        let moveStep = 55;  // Adjust the movement step as needed

        let pos = [cam.eyeX, cam.eyeY, cam.eyeZ];

        let x = cam.eyeX;

        let y = cam.eyeY;

        let z = cam.eyeZ;

        print(pos)

​

        switch (key) {

          case 'w':

          case 'W':

            z -= moveStep;

            break;

          case 's':

          case 'S':

            z += moveStep;

            break;

          case 'a':

          case 'A':

            x -= moveStep;

            break;

          case 'd':

          case 'D':

            x += moveStep;

            break;

          case 'q':

          case 'Q':

            y -= moveStep;

            break;

          case 'e':

          case 'E':

            y += moveStep;

            break;

        }

        cam.setPosition(x, y, z);

        cam.lookAt(0, 0, 0);

      }

​

function updateMetronome() {

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

  currentBpm = elapsedTime >= duration ? endBpm : map(elapsedTime, 0, duration, startBpm, endBpm);

  let interval = 60 / currentBpm * 1000;

  if (millis() - lastBeatTime >= interval) {

    playSound();

    rotateCube();

    lastBeatTime = millis();

  }

}

​

​

function updateCubeRotation() {

  ['x', 'y', 'z'].forEach(axis => {

    cubeRotation[axis] = lerp(cubeRotation[axis], targetRotation[axis], 0.1);

  });

}

​

function rotateCube() {

  rotationAxis = ['x', 'y', 'z'][floor(random(3))];

  targetRotation[rotationAxis] += HALF_PI;

}

​

function drawRubiksCube() {

  push();

  rotateX(cubeRotation.x);

  rotateY(cubeRotation.y);

  rotateZ(cubeRotation.z);

  // Draw the Rubik's Cube

  let size = min(width, height) * 0.2;

  let subSize = size / 3;

  for (let x = -1; x <= 1; x++) {

    for (let y = -1; y <= 1; y++) {

      for (let z = -1; z <= 1; z++) {

        push();

        translate(x * subSize, y * subSize, z * subSize);

        drawCubelet(subSize);

        pop();

      }

    }

  }

  pop();

}

​

function drawCubelet(size) {

  push();

  strokeWeight(2);

  stroke(0);

  // Front face (red)

  fill(255, 0, 0);

  beginShape();

  vertex(-size/2, -size/2, size/2);

  vertex(size/2, -size/2, size/2);

  vertex(size/2, size/2, size/2);

  vertex(-size/2, size/2, size/2);

  endShape(CLOSE);

  // Back face (orange)

  fill(255, 165, 0);

  beginShape();

  vertex(-size/2, -size/2, -size/2);

  vertex(size/2, -size/2, -size/2);

  vertex(size/2, size/2, -size/2);

  vertex(-size/2, size/2, -size/2);

  endShape(CLOSE);

  // Top face (white)

  fill(255);

  beginShape();

  vertex(-size/2, -size/2, -size/2);

  vertex(size/2, -size/2, -size/2);

  vertex(size/2, -size/2, size/2);

  vertex(-size/2, -size/2, size/2);

  endShape(CLOSE);

  // Bottom face (yellow)

  fill(255, 255, 0);

  beginShape();

  vertex(-size/2, size/2, -size/2);

  vertex(size/2, size/2, -size/2);

  vertex(size/2, size/2, size/2);

  vertex(-size/2, size/2, size/2);

  endShape(CLOSE);

  // Left face (green)

  fill(0, 255, 0);

  beginShape();

  vertex(-size/2, -size/2, -size/2);

  vertex(-size/2, size/2, -size/2);

  vertex(-size/2, size/2, size/2);

  vertex(-size/2, -size/2, size/2);

  endShape(CLOSE);

  // Right face (blue)

  fill(0, 0, 255);

  beginShape();

  vertex(size/2, -size/2, -size/2);

  vertex(size/2, size/2, -size/2);

  vertex(size/2, size/2, size/2);

  vertex(size/2, -size/2, size/2);

  endShape(CLOSE);

  pop();

}

​

​

function toggleMetronome() {

  if (!isPlaying && !isCountingDown) {

    enableCountdown.checked() ? startCountdown() : startMetronome();

  } else {

    stopMetronome();

  }

}

​

function startCountdown() {

  isCountingDown = true;

  countdownStartTime = millis();

}

​

function startMetronome() {

  updateValues();

  isPlaying = true;

  startTime = millis();

  currentBpm = startBpm;

  lastBeatTime = millis();

  getAudioContext().state !== 'running' && getAudioContext().resume();

}

​

function stopMetronome() {

  isPlaying = false;

  isCountingDown = false;

  currentBpm = startBpm;

}

​

function updateValues() {

  duration = parseInt(timeInput.value());

  startBpm = parseInt(startBpmInput.value());

  endBpm = parseInt(endBpmInput.value());

  currentBpm = startBpm;

}

​

function playSound() {

  osc.freq(440);

  osc.amp(0.5, 0.01); // Ramp up amplitude quickly

  osc.amp(0, 0.1, 0.1); // Ramp down after 0.1 seconds

}

​

function drawText() {

  push();

  translate(-width/2, -height/2, 0);

  fill(0);

  textSize(24);

  text(`Current BPM: ${currentBpm.toFixed(1)}`, width / 2, 10);

  text(`Time: ${isPlaying ? ((millis() - startTime) / 1000).toFixed(1) : '0.0'}s`, width / 2, 80);

  pop();

}

​

function displayCountdown(time) {

  push();

  translate(-width/2, -height/2, 0);

  fill(255, 0, 0);

  textSize(72);

  text(`Starting in: ${ceil(time)}`, width / 2, height / 2);

  pop();

}

​

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

  let buttonWidth = 100;

  let buttonHeight = 40;

  let inputWidth = 80;

​

  startButton.size(buttonWidth, buttonHeight);

  startButton.position((width - buttonWidth) / 2, height - 150);

  enableCountdown.position((width - buttonWidth) / 2, height - 110);

​

  [timeInput, startBpmInput, endBpmInput].forEach((input, i) => {

    input.size(inputWidth);

    input.position((width - (3 * inputWidth + 20)) / 2 + i * (inputWidth + 10), height - 50);

  });

}

​