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 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;

​

​

function preload() {

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

​

  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);

  pixelDensity(1);

  song1.play()

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

}

​

function draw() {

    background(0);

    stroke(255);

    fill(255, 10);

  //   Setting the melting lines in the background

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

  let noiseScale = 0.009; // 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, -100, 100); // 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, y + meltingEffect); // 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();

}

​

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

function keyPressed() {

    if (keyCode === RIGHT_ARROW) {

      displayedImages.nextImage();

    } else if (keyCode === LEFT_ARROW) {

      displayedImages.previousImage();

    }

  }

​