Teil der Processing-Serie / Coding

Code-Bausteine für p5.js, die Du immer wieder brauchst

Diese Bausteine helfen Dir typischen Aufgabestellungen von p5.js. Persönlich nutze ich diese Blöcke in meinen eigenen Projekten immer wieder. Darum teile ich Sie an dieser Stelle mit der Welt.

Canvas über Tastendruck als PNG-Bild speichern

Um den Canvas, also den generierten Output von p5.js als Bild abzuspeichern, genügt der folgende Code. Der zweite Baustein hilft Dir bei der Benennen der Datei und fügt Ihr Datum und Zeit hinzu, damit Du bei einem Sketch auch mehrere Bilder abspeichern kannst, die ordentlich benennt werden.

function keyPressed() {
  if (key === ' ') { // Überprüft, ob die Leertaste gedrückt wurde
    saveCanvas('meinBild', 'png'); // Speichert das Bild als 'meinBild.png'
  }
}

PNG-Bilder mit Datum und Zeit im Namen

function keyPressed() {
  if (key === ' ') { // Überprüft, ob die Leertaste gedrückt wurde
    let now = new Date();
    let year = now.getFullYear();
    let month = String(now.getMonth() + 1).padStart(2, '0'); // Monat von 0-11, daher +1 und führende Nullen hinzufügen
    let day = String(now.getDate()).padStart(2, '0');
    let hours = String(now.getHours()).padStart(2, '0');
    let minutes = String(now.getMinutes()).padStart(2, '0');

    let filename = `${year}-${month}-${day}-${hours}-${minutes}-${scriptName}-bild.png`;
    saveCanvas(filename, 'png'); // Speichert das Bild mit dem neuen Dateinamen
  }
}

Teil der Processing-Serie