auto_paint

Creative Coding

Coding einer automatischen Zeichenapp mit p5.js.

Die Web-App basiert auf der freien Java-Script-Bibliothek p5.js. Entstanden ist das Projekt, welches sich die Möglichkeiten der generativen Darstellung mit p5.js zunutze macht, im vierten Semester im Kurs Webdesign.

Pinsel aus unterschiedlichen 2D-Strukturen bewegen sich zufällig auf einer Canvas (Zeichenfläche). Der Nutzer hat die Kontrolle über diverse Parameter. So kann er zwischen verschiedenen Pinseln auswählen und Größe, Bewegungs- sowie Rotationsgeschwindigkeit anpassen. Auch Farbe, Deckkraft und Outline des Pinsels lassen sich beeinflussen. Setzt der Nutzer einen Haken bei „DRAW“, so beginnt der eigentliche Zeichenprozess, der Pinsel hinterlässt Spuren auf der Canvas. Wird der Haken wieder entfernt, wird das Bild wieder gelöscht. Mit dem Start/Stop Button lässt sich die Bewegung anhalten, um in Ruhe Pinsel wechseln und einstellen zu können.
Über [Rechtsklick] → [Bild speichern unter …] wird das Ergebnis mit einer Auflösung von 2340 x 1316 Pixeln als PNG gespeichert.

Starte auto_paint
pic01 pic02