let backgroundImage1; 

let backgroundImage2; 

let backgroundImage3; 

let backgroundImage4; 

let backgroundImage5; 

let backgroundImage6; 

let backgroundImage7; 

let backgroundImage8; 

let backgroundImage9; 

let backgroundImage10; 

let backgroundImage11; 

let backgroundImage12;

let backgroundImage13; 

let currentImage; // wird angezeigt

​

let imageWidth;

​

function preload() {

  // Lade die Hintergrundbilder

  backgroundImage1 = loadImage('assets/01.jpg'); 

  backgroundImage2 = loadImage('assets/02.png');

  backgroundImage3 = loadImage('assets/03.png');

  backgroundImage4 = loadImage('assets/04.png');

  backgroundImage5 = loadImage('assets/05.png');

  backgroundImage6 = loadImage('assets/06.png');

  backgroundImage7 = loadImage('assets/07.png');

  backgroundImage8 = loadImage('assets/08.png');

  backgroundImage9 = loadImage('assets/09.png');

  backgroundImage10 = loadImage('assets/10.png');

  backgroundImage11 = loadImage('assets/11.jpg');

  backgroundImage12 = loadImage('assets/12.jpg');

  backgroundImage13 = loadImage('assets/13.jpg');

  currentImage = backgroundImage1;

}

​

​

function setup() {

  // Erstelle einen Canvas, der die volle Höhe des Browserfensters nutzt

  createCanvas(windowWidth, windowHeight);

​

  // Berechne die Breite des Bildes, um die Höhe vollständig auszunutzen

  imageWidth = (currentImage.width * windowHeight) / currentImage.height;

  let breite = (width - imageWidth) / 2;

​

  // Zeichne das Bild zentriert auf dem Canvas

  image(currentImage, breite, 0, imageWidth, height);

}

​

function windowResized() {

  // Aktualisiere den Canvas, wenn das Fenster neu dimensioniert wird

  resizeCanvas(windowWidth, windowHeight);

​

  // Berechne die Breite des Bildes, um die Höhe vollständig auszunutzen

  imageWidth = (currentImage.width * windowHeight) / currentImage.height;

  let x = (width - imageWidth) / 2;

​

  // Zeichne das Bild zentriert auf dem Canvas

  image(currentImage, x, 0, imageWidth, height);

​

}

​

function keyPressed() {

  if (key == "1") {

    currentImage = backgroundImage1;

  }

  if (key == "2") {

    currentImage = backgroundImage2;

  }  

  if (key == "3") {

    currentImage = backgroundImage3;

  }  

  if (key == "4") {

    currentImage = backgroundImage4;

  }  

  if (key == "5") {

    currentImage = backgroundImage5;

  }  

  if (key == "6") {

    currentImage = backgroundImage6;

  }  

  if (key == "7") {

    currentImage = backgroundImage7;

  }  

  if (key == "8") {

    currentImage = backgroundImage8;

  }  

  if (key == "9") {

    currentImage = backgroundImage9;

  }  

  if (key == "0") {

    currentImage = backgroundImage10;

  }  

  if (key == "a") {

    currentImage = backgroundImage11;

  }  

  if (key == "b") {

    currentImage = backgroundImage12;

  }  

  if (key == "c") {

    currentImage = backgroundImage13;

  }    

windowResized();  

}

​

function mouseClicked() {

  let breite = imageWidth;

  let hoehe = height;

    // Bestimme in welchen Sektor geklickt wurde

  let xSektor = floor(mouseX / (breite / 2));

  let ySektor = floor(mouseY / (hoehe / 7));

  // Führe unterschiedliche Befehle je nach Sektor aus

  let sektorNummer = xSektor + ySektor * 2;

  console.log(`Du hast Sektor ${sektorNummer + 1} angeklickt.`);

  switch (sektorNummer) {

    case 0: currentImage = backgroundImage1;

      break; 

    case 1: currentImage = backgroundImage2;

      break; 

    case 2: currentImage = backgroundImage3;

      break; 

    case 3: currentImage = backgroundImage4;

      break; 

    case 4: currentImage = backgroundImage5;

      break; 

    case 5: currentImage = backgroundImage6;

      break; 

    case 6: currentImage = backgroundImage7;

      break; 

    case 7: currentImage = backgroundImage8;

      break; 

    case 8: currentImage = backgroundImage9;

      break; 

    case 9: currentImage = backgroundImage10; 

      break; 

    case 10: currentImage = backgroundImage11;

      break; 

    case 11: currentImage = backgroundImage12;

      break; 

    case 12: currentImage = backgroundImage13;

      break;  

  }

  windowResized();  

}

​