let xElements = [];

let yElements = [];

let rotationElements = [];

let scaleElements = [];

let offsetX, offsetY;

let draggedItem = null;

let elementIndexes = [];

let drawingMode = false; // Variable für den Zeichnungsmodus, standardmäßig auf false gesetzt

let drawnLines = []; // Array zum Speichern der gezeichneten Linien

let introImage;

let showIntro = true; // Variable to track if the intro image is being shown

​

function preload() {

  introImage = loadImage("intro.jpg"); // Load the intro image

​

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

    elemente[i] = loadImage("elemente/element" + i + ".png");

  }

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  background(235, 230, 230);

  imageMode(CENTER);

​

  // Event-Listener für die Buttons

  document.getElementById("randomizeButton").addEventListener("click", randomizePositionsAndImages);

  document.getElementById("drawingModeButton").addEventListener("click", function() {

    drawingMode = true;

    // Farbe des Zeichenmodus-Buttons ändern

    document.getElementById("drawingModeButton").style.backgroundColor = "#8BC34A";

    // Hintergrundfarbe des Anordnungsmodus-Buttons zurücksetzen

    document.getElementById("arrangementModeButton").style.backgroundColor = "";

  });

  document.getElementById("arrangementModeButton").addEventListener("click", function() {

    drawingMode = false;

    // Farbe des Anordnungsmodus-Buttons ändern

    document.getElementById("arrangementModeButton").style.backgroundColor = "#8BC34A";

    // Hintergrundfarbe des Zeichenmodus-Buttons zurücksetzen

    document.getElementById("drawingModeButton").style.backgroundColor = "";

  });

​

  // Standardmäßig in den Anordnungsmodus wechseln und den Anordnungsmodus-Button grün färben

  document.getElementById("arrangementModeButton").click();

  document.getElementById("arrangementModeButton").style.backgroundColor = "#8BC34A";

​

  // Event-Listener für den Download-Button

  document.getElementById("downloadButton").addEventListener("click", downloadDrawing);

​

  // Display the intro image

  image(introImage, windowWidth / 2, windowHeight / 2, introImage.width * 1.7, introImage.height * 1.7);

}

​

function randomizePositionsAndImages() {

  // Zeichnung löschen

  drawnLines = [];

​

  xElements = [];

  yElements = [];

  rotationElements = [];

  scaleElements = [];

  elementIndexes = [];

​

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

    xElements[i] = random(width);

    yElements[i] = random(height);

    rotationElements[i] = random(TWO_PI);

    scaleElements[i] = random(0.75, 1.25);

    elementIndexes[i] = int(random(elemente.length)) % elemente.length;

  }

}

​

function draw() {

  if (showIntro) {

    background(235, 230, 230);

    image(introImage, windowWidth / 2, windowHeight / 2.4, introImage.width/1.1, introImage.height/1.1);

    return;

  }

​

  background(235, 230, 230);

​

  // Gezeichnete Linien rendern

  stroke(0);

  strokeWeight(1);

  for (let l of drawnLines) {

    line(l.x1, l.y1, l.x2, l.y2);

  }

​

  // Elemente rendern

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

    drawElement(xElements[i], yElements[i], rotationElements[i], scaleElements[i], elementIndexes[i]);

  }

}

​

function drawElement(x, y, rotation, scaleVal, index) {

  push();

  translate(x, y);

  rotate(rotation);

  scale(scaleVal);

  image(elemente[index], 0, 0, elemente[index].width / 2, elemente[index].height / 2);

  pop();

}

​

function mousePressed() {

  if (showIntro) {

    showIntro = false; // Hide the intro image on mouse press

    randomizePositionsAndImages();

    return;

  }

​

  if (!drawingMode) {

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

      if (dist(mouseX, mouseY, xElements[i], yElements[i]) < elemente[elementIndexes[i]].width / 4) {

        draggedItem = i;

        offsetX = mouseX - xElements[i];

        offsetY = mouseY - yElements[i];

        break;

      }

    }

  }

}

​

function mouseDragged() {

  if (drawingMode) {

    // Linie zeichnen und speichern

    stroke(0); // Setze die Strichfarbe auf Schwarz

    strokeWeight(1); // Setze die Strichstärke auf 1 Pixel

    line(pmouseX, pmouseY, mouseX, mouseY); // Zeichne eine Linie von der vorherigen Mausposition zur aktuellen Position

    drawnLines.push({ x1: pmouseX, y1: pmouseY, x2: mouseX, y2: mouseY }); // Linie speichern

  } else if (draggedItem !== null) {

    xElements[draggedItem] = mouseX - offsetX;

    yElements[draggedItem] = mouseY - offsetY;

  } else {

    // Wenn kein Element gezogen wird, überprüfen Sie, ob eine Linie gezogen wird

    if (drawnLines.length > 0) {

      // Positionen der Linien anpassen

      for (let l of drawnLines) {

        l.x1 += mouseX - pmouseX;

        l.x2 += mouseX - pmouseX;

        l.y1 += mouseY - pmouseY;

        l.y2 += mouseY - pmouseY;

      }

    }

  }

}

​

function mouseReleased() {

  draggedItem = null;

}

​

function downloadDrawing() {

  // Canvas als Bild exportieren und herunterladen

  saveCanvas("drawing", "jpg");

}

​