My Sketch

// Sounds

let soundGameUI, soundGuitarLoop, soundRingPhone;

​

// Images

let imgLion, imgFish, imgFlower;

​

// Button size

let btnSize = 150;

​

// Currently playing text

let currentlyPlayingTxt = "...";

​

// Variables for dynamic background shapes

let circles = [];

let rects = [];

​

// Volume slider

let volumeSlider;

​

function preload() {

  // Load sounds

  soundGameUI = loadSound('90s-game-ui-7-185100.mp3');

  soundGuitarLoop = loadSound('90x27s-rampb-guitar-loop-171092.mp3');

  soundRingPhone = loadSound('classic-90x27s-ring-telefone-132277.mp3');

​

  // Load images

  imgLion = loadImage('lion.png');

  imgFish = loadImage('fish.png');

  imgFlower = loadImage('flower.png');

}

​

function setup() {

  createCanvas(800, 600);

​

  // Text alignment for labels

  textAlign(CENTER, CENTER);

​

  // Initialize background shapes

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

    circles.push({

      x: random(width),

      y: random(height),

      size: random(20, 50),

      speed: random(1, 3),

      color: color(random(255), random(255), random(255), 150),

    });

  }

​

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

    rects.push({

      x: random(width),

      y: random(height),

      size: random(30, 80),

      speed: random(0.5, 2),

      color: color(random(255), random(255), random(255), 100),

    });

  }

​

  // Create volume slider

  volumeSlider = createSlider(0, 1, 0.5, 0.01); // min, max, default, step

  volumeSlider.position(width / 2 - 100, height - 100); // Position it near the bottom

  volumeSlider.style('width', '200px'); // Adjust slider width

}

​

function draw() {

  background("#E6BBE0"); // Light purple background

​

  // Set volume based on slider value

  let volume = volumeSlider.value();

  soundGameUI.setVolume(volume);

  soundGuitarLoop.setVolume(volume);

  soundRingPhone.setVolume(volume);

​

  // Draw dynamic background shapes

  drawBackgroundShapes();

​

  // Title and instructions

  textSize(30);

  fill(0);

  text("Fun 90's Sounds", width / 2, 50);

​

  textSize(18);

  text("Click on an image to play its sound!", width / 2, 100);

​

  // Draw buttons

  drawButton(imgLion, 150, 200, "Lion Sound", soundGameUI);

  drawButton(imgFish, 325, 200, "Fish Sound", soundGuitarLoop);

  drawButton(imgFlower, 500, 200, "Flower Sound", soundRingPhone);

​

  // Currently playing text

  textSize(20);

  fill(0);

  text(currentlyPlayingTxt, width / 2, height - 50);

​

  // Display volume level

  textSize(16);

  text(`Volume: ${nf(volume, 0, 2)}`, width / 2, height - 70);

}

​

function drawButton(img, x, y, label, sound) {

  // Draw image

  image(img, x, y, btnSize, btnSize);

​

  // Label text

  fill(0);

  textSize(16);

  text(label, x + btnSize / 2, y + btnSize + 20);

​

  // Check for clicks

  if (

    mouseIsPressed &&

    mouseX > x &&

    mouseX < x + btnSize &&

    mouseY > y &&

    mouseY < y + btnSize

  ) {

    playSound(sound, label);

  }

}

​

function playSound(sound, label) {

  // Stop all sounds before playing a new one

  stopAllSounds();

​

  if (!sound.isPlaying()) {

    sound.play();

    currentlyPlayingTxt = `Playing: ${label}`;

  }

}

​

function stopAllSounds() {

  soundGameUI.stop();

  soundGuitarLoop.stop();

  soundRingPhone.stop();

}

​

function drawBackgroundShapes() {

  // Draw and move circles

  for (let c of circles) {

    fill(c.color);

    noStroke();

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

    c.y += c.speed;

    if (c.y > height) c.y = 0; // Reset position if out of bounds

  }

​

  // Draw and move rectangles

  for (let r of rects) {

    fill(r.color);

    noStroke();

    rect(r.x, r.y, r.size, r.size);

    r.x += r.speed;

    if (r.x > width) r.x = 0; // Reset position if out of bounds

  }

}

​

​

​