final

let screen = "start"; // Controls the screen state: 'start', 'gallery', or 'result'

​

// Images to hold photos

let photos = [];

let resultImages = []; // Array for images opened when clicking

let photoPaths = ["gunsnroses.jpg", "ghostemane.jpg", "kendrick.jpg"];

let resultPaths = ["harleycollage-min.jpg", "ninjacollage-min.jpg", "yamahacollage-min.jpg"];

​

// Audio files for each result image

let songs = [];

let songPaths = ["gnr.mp3", "cc.mp3", "21.mp3"];

​

let currentImageIndex = -1; // Tracks the currently opened result image

let interactionAllowed = false; // Prevents immediate interaction after switching screens

let neonLines = []; // Stores neon line data

​

function preload() {

  // Preload images

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

    photos[i] = loadImage(photoPaths[i]); // Thumbnails

    resultImages[i] = loadImage(resultPaths[i]); // Result images

  }

​

  // Preload songs

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

    songs[i] = loadSound(songPaths[i]);

  }

}

​

function setup() {

  createCanvas(800, 600);

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

    neonLines.push({

      x: random(width),

      y: random(height),

      length: random(50, 300),

      speed: random(3, 7),

      weight: random(3, 8),

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

    });

  }

}

​

function draw() {

  drawBackground(); // Draws the animated background

  if (screen === "start") {

    drawStartScreen();

  } else if (screen === "gallery") {

    drawGallery();

  } else if (screen === "result") {

    drawResultImage();

  }

}

​

function drawBackground() {

  background(10, 10, 30); // Base background color

​

  // Draw neon moving lines with glow effect

  for (let lineData of neonLines) {

    stroke(lineData.color);

    strokeWeight(lineData.weight);

    line(lineData.x, lineData.y, lineData.x + lineData.length, lineData.y);

    lineData.y += lineData.speed;

​

    // Reset position if out of canvas

    if (lineData.y > height) {

      lineData.y = 0;

      lineData.x = random(width);

      lineData.length = random(50, 300);

      lineData.speed = random(3, 7);

      lineData.weight = random(3, 8);

      lineData.color = color(random(150, 255), random(50, 200), random(200, 255), 150);

    }

  }

}

​

function drawStartScreen() {

  // Title

  textAlign(CENTER, CENTER);

  textSize(32);

  fill(255);

  textStyle(BOLD);

  text("Choose Your Motorcycle Brand", width / 2, height / 4);

  text("Based on Your Music Taste", width / 2, height / 3);

​

  // Start Button

  fill(100, 200, 150); // Green button

  noStroke();

  rect(width / 2 - 75, height / 2, 150, 50, 10); // Button with rounded corners

​

  fill(255);

  textSize(20);

  text("Start", width / 2, height / 2 + 25);

}

​

function drawGallery() {

  // Title for the gallery screen

  textAlign(CENTER, CENTER);

  textSize(28);

  fill(255);

  textStyle(BOLD);

  text("Choose your song", width / 2, 70);

​

  let imgWidth = 200;

  let imgHeight = 200;

  let spacing = 20;

​

  // Display 3 images side-by-side

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

    let x = i * (imgWidth + spacing) + 100;

    let y = height / 2 - imgHeight / 2;

​

    // Image background effect

    fill(150, 150, 200);

    rect(x - 10, y - 10, imgWidth + 10, imgHeight + 10, 10); // Border behind the image

​

    image(photos[i], x, y, imgWidth, imgHeight);

​

    // Check if the image is clicked (only if interaction is allowed)

    if (interactionAllowed && mouseIsPressed && mouseX > x && mouseX < x + imgWidth && mouseY > y && mouseY < y + imgHeight) {

      currentImageIndex = i; // Set the clicked image index

      playSongForImage(currentImageIndex); // Play corresponding song

      screen = "result";

      interactionAllowed = false; // Disable further interactions temporarily

    }

  }

}

​

function drawResultImage() {

  // Title for the result image

  textAlign(CENTER, CENTER);

  textSize(28);

  fill(255);

  textStyle(ITALIC);

  text("Your type of motorcycle", width / 2, 80);

​

  // Display the result image

  image(resultImages[currentImageIndex], width / 2 - 200, height / 2 - 150, 400, 400);

​

  fill(255);

  textSize(20);

  textStyle(NORMAL);

  text("Click anywhere to return", width / 2, height - 30);

}

​

function mousePressed() {

  // Start button logic

  if (screen === "start" && mouseX > width / 2 - 75 && mouseX < width / 2 + 75 && mouseY > height / 2 && mouseY < height / 2 + 50) {

    screen = "gallery";

    interactionAllowed = false; // Prevent immediate clicks

    setTimeout(() => interactionAllowed = true, 300); // Allow interactions after 300ms delay

  }

​

  // Return to gallery from result screen

  if (screen === "result") {

    stopAllSongs();

    screen = "gallery";

    interactionAllowed = false; // Prevent immediate clicks

    setTimeout(() => interactionAllowed = true, 300); // Allow interactions after 300ms delay

  }

}

​

function playSongForImage(index) {

  stopAllSongs(); // Stop all songs before playing a new one

  if (songs[index]) {

    songs[index].play();

  }

}

​

function stopAllSongs() {

  for (let song of songs) {

    if (song.isPlaying()) {

      song.stop();

    }

  }

}

​