week09 -Interactive Sound 02

let danceMoveSounds = [];

let currentSoundIndex = 0;

let gameStarted = false;

let sidebarWidth = 150; // Width of the sidebar

let volumeSlider; // Volume slider for controlling the audio volume

let bgImage; // Background image

let musicAmplitude; // Amplitude analyzer to react to the music's volume

let circles = []; // Array to store multiple circle objects

​

​

// Circle object to store properties for each circle

class Circle {

  constructor(x, y) {

    this.x = x;

    this.y = y;

    this.size = 50; // Initial size

    this.color = color(0, 122, 255); // Neutral blue color for all circles

  }

​

  // Method to update the circle's size based on volume

  update(volume) {

    this.size = map(volume, 0, 1, 50, 150); // Change size from 50 to 150 based on volume

  }

​

  // Method to draw the circle on the screen

  display() {

    fill(this.color);

    noStroke();

    ellipse(this.x, this.y, this.size, this.size);

  }

​

  // Method to randomize the position of the circle

  randomizePosition() {

    // Ensure circles are within bounds of canvas excluding sidebar

    this.x = random(sidebarWidth + 20, width - 20); // X position: within the available space after the sidebar

    this.y = random(20, height - 20); // Y position: within the height of the canvas

  }

​

  // Method to randomize the color of the circle

  randomizeColor() {

    this.color = color(random(255), random(255), random(255)); // Random RGB color

  }

}

​

// Load the background image and multiple audio tracks

function preload() {

  // Load the background image

  bgImage = loadImage('bg.png'); //

  // Load multiple dance sounds

  danceMoveSounds[0] = loadSound('everybodydance.mp3'); // 

  danceMoveSounds[1] = loadSound('just dance.mp3');

  danceMoveSounds[2] = loadSound('move.mp3');

}

​

function setup() {

  createCanvas(640, 480);

​

  // Set up the volume slider, but don't show the sidebar yet

  volumeSlider = createSlider(0, 1, 0.5, 0.01);

  volumeSlider.position(20, height - 60);

  volumeSlider.style('width', '100px');

  volumeSlider.hide(); // Hide the slider at the beginning

  // Set initial volume

  setVolume(volumeSlider.value());

​

  // Setup amplitude analyzer

  musicAmplitude = new p5.Amplitude();

​

  // Create 6 circles and center them in the canvas 

  let numCircles = 6;

  let centerX = width / 1.5; // X center of canvas

  let centerY = height / 2; // Y center of canvas

  let radius = 180; // Distance from center

  let angleStep = TWO_PI / numCircles; // Equal spacing for circles

  // Create 6 circles in a circular pattern

  for (let i = 0; i < numCircles; i++) {

    let angle = angleStep * i;

    let x = centerX + radius * cos(angle); // X position using polar coordinates

    let y = centerY + radius * sin(angle); // Y position using polar coordinates

    circles.push(new Circle(x, y)); // Add each circle to the array

  }

}

​

function draw() {

  if (gameStarted) {

    // Display the background image behind everything

    image(bgImage, 0, 0, width, height); //  scales the image to fit the canvas

​

    // Draw the sidebar with audio track selection and volume control

    drawSidebar();

    // Get the current volume level of the music

    let volume = musicAmplitude.getLevel();

    // Update and display each circle

    for (let circle of circles) {

      circle.update(volume); // Update size based on volume

      circle.display();       // Display the circle on screen

    }

  } else {

    // Display the intro screen with updated instructions

    background(0, 0, 0, 150);

    fill(255);

    textAlign(CENTER, CENTER);

    textSize(32);

    text("Welcome to Dance to the Beat!", width / 2, height / 3);

    textSize(18);

    text("Instructions:\n1. Click on a track to play it.\n2. Select a different track to stop the current one and start the new one.", width / 2, height / 2);

    textSize(16);

    text("Click to start!", width / 2, height * 2 / 3);

  }

}

​

// Draw the sidebar for audio selection

function drawSidebar() {

  fill(0, 0, 0, 150);

  rect(0, 0, sidebarWidth, height);

​

  fill(255);

  textAlign(CENTER, CENTER);

  textSize(20);

  text("Select Track", sidebarWidth / 2, 50);

​

  // Draw audio track selection buttons

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

    let trackY = 100 + i * 60;

    fill(i === currentSoundIndex ? 'lightblue' : 'white');

    rect(20, trackY, sidebarWidth - 40, 50);

    fill(0);

    textSize(16);

    text('Track ' + (i + 1), sidebarWidth / 2, trackY + 25);

  }

​

  // Adjust volume based on slider input

  setVolume(volumeSlider.value());

}

​

// Set the volume for the selected sound

function setVolume(vol) {

  if (danceMoveSounds[currentSoundIndex]) {

    danceMoveSounds[currentSoundIndex].setVolume(vol);

  }

}

​

// Start the game when the user clicks

function mousePressed() {

  if (!gameStarted) {

    gameStarted = true; // Start the game and show the sidebar

    volumeSlider.show(); // Show the volume slider when game starts

  }

​

  // Check if the user clicked on an audio track button

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

    let trackY = 100 + i * 60;

    if (mouseX > 20 && mouseX < sidebarWidth - 20 && mouseY > trackY && mouseY < trackY + 50) {

      // If the clicked track is already playing, stop it

      if (i === currentSoundIndex && danceMoveSounds[i].isPlaying()) {

        danceMoveSounds[i].stop();

      } else {

        // Stop the current track and play the selected one

        if (danceMoveSounds[currentSoundIndex].isPlaying()) {

          danceMoveSounds[currentSoundIndex].stop();

        }

        danceMoveSounds[i].play();

        currentSoundIndex = i; // Update the current track index

​

        // Randomize position and color of circles when a new track is selected

        for (let circle of circles) {

          circle.randomizePosition(); // Change position

          circle.randomizeColor(); // Change color

        }

      }

      break;

    }

  }

}

​