let letters = [];  // Array, um die getippten Buchstaben zu speichern

let maxLettersPerLine = 20;  // Maximal 20 Buchstaben pro Zeile

let letterSpacing = 5;  // Geringerer Abstand zwischen den Buchstaben

​

function preload() {

  // Lade die Bilder für 'a', 'b' und 'c' aus dem Ordner "Buchstaben"

  letterImages['a'] = loadImage('Buchstaben/a.png');

  letterImages['b'] = loadImage('Buchstaben/b.png');

  letterImages['c'] = loadImage('Buchstaben/c.png');

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);  // Setzt die Canvasgröße auf die Fenstergröße

  pixelDensity(2); // Setze die Pixel-Dichte auf 2, um die Qualität zu verbessern

  background(255, 0); // Transparenten Hintergrund setzen

  noLoop(); // Nur einmal zeichnen

​

  // Button hinzufügen

  let downloadButton = select('#download');

  downloadButton.mousePressed(downloadPNG);

​

  // Paste-Ereignis aktivieren

  document.addEventListener('paste', handlePaste);

}

​

function draw() {

  background(255, 0); // transparenten Hintergrund in jedem Draw-Zyklus

​

  let xOffset = 0;

  let yOffset = 50;

  let lettersInLine = 0; // Zähler für die Anzahl der Buchstaben in der aktuellen Zeile

​

  // Position der Buchstaben anzeigen

  for (let i = 0; i < letters.length; i++) {

    let letter = letters[i];

​

    // Zeichne den Buchstaben ohne zu skalieren

    image(letterImages[letter], xOffset, yOffset);

​

    // Update xOffset für den nächsten Buchstaben

    xOffset += letterImages[letter].width + letterSpacing;

    lettersInLine++;

​

    // Umbruch nach einer bestimmten Anzahl von Buchstaben

    if (lettersInLine >= maxLettersPerLine) {

      lettersInLine = 0;

      xOffset = 0;

      yOffset += letterImages[letter].height + 10; // Erhöhe yOffset für die nächste Zeile

    }

  }

}

​

// Event-Listener für Tastatur

function keyPressed() {

  let keyLower = key.toLowerCase();

​

  if (key === 'Backspace') {

    // Wenn Backspace gedrückt wird, löschen wir den letzten Buchstaben

    letters.pop();

    redraw();  // Nur die Zeichnung aktualisieren

  } else if (letterImages[keyLower]) {

    // Überprüfen, ob der gedrückte Schlüssel ein Buchstabe ist und ein Bild existiert

    letters.push(keyLower);

    redraw();  // Nur die Zeichnung aktualisieren, ohne die ganze Leinwand neu zu laden

  }

}

​

// Funktion zum Verarbeiten des Paste-Events

function handlePaste(e) {

  e.preventDefault();

  let pastedText = e.clipboardData.getData('text');

  // Nur Buchstaben verarbeiten (kleinbuchstaben)

  for (let char of pastedText.toLowerCase()) {

    if (letterImages[char]) {

      letters.push(char);

    }

  }

  redraw(); // Die Zeichnung aktualisieren

}

​

// Funktion, um das Bild als PNG zu speichern

function downloadPNG() {

  // Erstelle ein neues p5.js-Canvas im Hintergrund (mit hoher Auflösung)

  let tempCanvas = createGraphics(windowWidth, windowHeight); // Canvas bleibt bei der Fenstergröße

  tempCanvas.pixelDensity(2); // Setze die Pixel-Dichte auf 2 für mehr Details, aber ohne Verdopplung der Canvasgröße

  tempCanvas.background(255, 0); // Transparenten Hintergrund

  let tempXOffset = 0;

  let tempYOffset = 50;

  let lettersInLine = 0;

​

  // Zeichne alle Buchstaben auf das temporäre Canvas

  for (let i = 0; i < letters.length; i++) {

    let letter = letters[i];

​

    // Zeichne den Buchstaben ohne Skalierung (d.h. Originalgröße)

    tempCanvas.image(letterImages[letter], tempXOffset, tempYOffset);

    tempXOffset += letterImages[letter].width + letterSpacing;

    lettersInLine++;

​

    // Umbruch nach einer bestimmten Anzahl von Buchstaben

    if (lettersInLine >= maxLettersPerLine) {

      lettersInLine = 0;

      tempXOffset = 0;

      tempYOffset += letterImages[letter].height + 10; // Erhöhe yOffset für die nächste Zeile

    }

  }

​

  // PNG mit hoher Auflösung herunterladen

  tempCanvas.save('schrift_high_res.png');

}

​

// Dynamische Canvasgröße an die Fenstergröße anpassen

function windowResized() {

  resizeCanvas(windowWidth, windowHeight);

}

​