xxxxxxxxxx
156
let elemente = [];
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");
}