xxxxxxxxxx
117
let letterImages = {};
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);
}