let displayedImages;

let texts = [

  "Heart-Shaped Box\nNirvana", 

  "Cool Colorado\nLa Femme",

  "Weak For Your Love\nThee Sacred Souls",

  "Spooky\nDusty Springfield",

  "Karma Police\nRadiohead",

  "Buddy's Rendezvous\nLana Del Rey",

  "Althea\nGrateful Dead",

  "Naive\nThe Kooks",

  "Drink Before The War\nSinead O'Connor",

  "Right Down The Line\nSam Evian",

  "She\nThe Blaze",

  "Belong In The Sun\n¿Téo?",

];

let chosenFont;

let song1;

let song2;

let song3;

let song4;

let song5;

let song6;

let song7;

let song8;

let song9;

let song10;

let song11;

let song12;

let songs;

let star2;

let star3;

let amplitude;

let lineSpacing = 0;

let currentState = "startPage";

​

​

​

function preload() {

  chosenFont = loadFont("Bohemian.otf"); // loading font

​

  star2 = loadImage("Star2.png")

    star3 = loadImage("Star3.png")

​

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

    images[i] = loadImage("Images/Image" + (i + 1) + ".jpeg"); // loading images from the array

  }

  song1 = loadSound("Sound/Song1.mp3");

  song2 = loadSound("Sound/Song2.mp3");

  song3 = loadSound("Sound/Song3.mp3");

  song4 = loadSound("Sound/Song4.mp3");

  song5 = loadSound("Sound/Song5.mp3");

  song6 = loadSound("Sound/Song6.mp3");

  song7 = loadSound("Sound/Song7.mp3");

  song8 = loadSound("Sound/Song8.mp3");

  song9 = loadSound("Sound/Song9.mp3");

  song10 = loadSound("Sound/Song10.mp3");

  song11 = loadSound("Sound/Song11.mp3");

  song12 = loadSound("Sound/Song12.mp3");

​

  songs = [

    song1,

    song2,

    song3,

    song4,

    song5,

    song6,

    song7,

    song8,

    song9,

    song10,

    song11,

    song12,

  ];

}

​

function setup() {

  createCanvas(1400, 700);

  song1.play();

  displayedImages = new DisplayedImages(images, texts, songs);

  song1Button = createButton('Track 1')

  song1Button.position(1300,20)

  song1Button.style('background-color', '0')

  song1Button.style('border', 'none')

  song1Button.style('font-size', '20px')

  song1Button.style('color', '255')

  song1Button.mousePressed(index1)

  amplitude = new p5.Amplitude();

  frameRate(20);

}

​

function index1() {

  if(currentState === "mainPage"){

    displayedImages.currentIndex = 0

    displayedImages.updateImage();

    displayedImages.stopSongs();

    displayedImages.playCurrentSong();

  }

}

​

function averageColors(){

  let img=displayedImages.currentImage;

  let averages = [];

  img.loadPixels();

  for (let y=0; y< img.height; y++){

    let total = [0,0,0]

    for(let x = 0; x < img.width; x++){

      let index = (x+y*img.width)*4

      total[0] += img.pixels[index]

      total[1] += img.pixels[index + 1]

      total[2] += img.pixels[index + 2]

    }

    averageColors.push(total.map(v => v/img.width));

  }

  return averageColors;

}

​

​

function draw() {

  if (currentState === "startPage") {

    displayStartPage();

    song1Button.hide()

  } else if (currentState === "mainPage") {

    displayMainPage();

    song1Button.show()

  }

}

​

function displayStartPage() {

  background(0);

  image(star2, -150, 200, 620, 620)

  image(star3, 800, 200, 520, 520)

  fill(255);

  textSize(32);

  textAlign(CENTER, CENTER);

  textFont(chosenFont);

  text(

    "Switch between songs\nwith the left and right arrows\n\n\n\nClick anywhere to start vibing!",

    width / 2,

    height / 2

  );

​

}

​

function displayMainPage() {

  background(0);

  let rowColors = averageColors; // Get average row colors of the current image

​

  for (let y = 0; y < height; y += lineSpacing) {

    let rowIndex = Math.floor(map(y, 0, height, 0, rowColors.length)); // Map y to the corresponding row in the image

    let avgColor = rowColors[rowIndex]; // Get the average color for this row

    stroke(avgColor[0], avgColor[1], avgColor[2]); // Set stroke to the average color

  }

​

  fill(255, 10);

  let volume = amplitude.getLevel();

   let heightMultiplier = map(volume, 0, 1, -2, height*1.5);

​

  //   Setting the melting lines in the background

  let lineSpacing = 3; // line spacing variable to set the distance between each line

  let noiseScale = 0.007; // noise scaling variable to determine the smoothness of the noise

​

  for (let y = 0; y < height; y += lineSpacing) {

    // for loop which draws the parallel lines with a spacing of 3

    beginShape();

    for (let x = 0; x <= width; x += 120) {

      // nested for loop that iterates the points along a horizontal line

      let noiseVal = noise((x + frameCount) * noiseScale, y * noiseScale); // noise value variable which calculates a perlin noise value for each vertex point -- the x-coordinate is adjusted with the noise scale and the frame count, they y-coordinate is only adjusted with the noise scale

      let meltingEffect = map(noiseVal, 0, 1, -heightMultiplier/2, heightMultiplier/2); // the melting effect created by mapping the noise value, between 0 and 1, to a greater range in order to amplify the melting effect

      curveVertex(x + meltingEffect*1.2, y + meltingEffect*1.2); // adding a vertex at x + melting effect and y + melting effect (horizontal + vertical offset). The vertical position is therefore altered by the noise in order to create the dynamic effect

    }

    endShape();

  }

​

  //   display images

  displayedImages.display();

}

​

function mousePressed() {

  if (currentState === "startPage") {

    currentState = "mainPage";

    song1.play();

  }

}

​

//   keyPressed function to allow the user to change between images (will add songs eventually)

function keyPressed() {

  if (currentState === "mainPage") {

    if (keyCode === RIGHT_ARROW) {

      displayedImages.nextImage();

    } else if (keyCode === LEFT_ARROW) {

      displayedImages.previousImage();

    }

  }

}

​