Einführung in p5.js | Envato Tuts+

German (Deutsch) translation by Jamie Lay (you can also view the original English article)

p5.js ist eine JavaScript-Library für Künstler, Designer und Lehrende mit einem spezifischen Fokus auf die visuellen Künste. Es ist eine extrem einfache Art für dich, interaktive Kunstwerke, Animationen und Prototypen im Browser zu erzeugen.

Sie ist stark von der Programmiersprache Processing beeinflusst, welche sich selbst als "flexibles Software-Skizzenbuch" bezeichnet. Processing wurde 2001 mit der Absicht, Nicht-Programmierern das Programmieren beizubringen, erschaffen, hat sich seitdem jedoch zu der Sprache entwickelt, welche von Tausenden von Künstlern, Designern und Studierenden bevorzugt wird.

p5.js jedoch hat ein etwas anderes Ziel vor Augen. p5 bringt die Leistung und Schlichtheit von Processing ins Web. Dieses Tutorial wird dir zeigen, wie du dein erstes p5-"Sketch" erstellst, und welche tollen Dinge du damit machen kannst.

Erste Schritte

Da p5 fürs Web ausgelegt ist, benötigen wir eine Webseite. Erstelle ein neues Verzeichnis auf deinem Computer und erzeuge eine index.html Datei darin. Wir brauchen nicht viel an dieser Stelle, nur den Standard-Krimskrams.

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first p5 sketch</title>
    </head>
    <body>
        
    </body>
</html>

Als Nächstes benötigen wir die p5-Library selbst, welche wir ohne Weiteres auf der p5-Download-Seite beschaffen können. Wir brauchen lediglich die Basic Library, daher lade die einzelne Datei-Version von p5 herunter.

Lege die heruntergeladene Datei ins gleiche Verzeichnis wie deine HTML-Datei. Wir uns können dann in unserem HTML folgendermaßen darauf beziehen:

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My first p5 sketch</title>
    </head>
    <body>
        <script src="p5.js"></script>
    </body>
</html>

Wir benötigen außerdem eine JavaScript-Datei für unseren Sketch. Ein Sketch ist in Processingsprache die Zeichnung oder Animation, die wir mit p5 kreieren. Erstelle eine weitere Datei, wieder im gleichen Verzeichnis, und benenne sie my-first-sketch.js. Auf diese muss verwiesen werden, nachdem der Bezug zur p5-Library geschaffen worden ist, sodass unser Skript alle von p5 zur Verfügung gestellten Methoden kennt.

1	<body>
2	<script src="p5.js"></script>
3	<script src="my-first-sketch.js"></script>
4	</body>

Das ist alles, was es zu Beginn einzustellen gilt! Wir sind nun startklar, um unser Meisterwerk zu kreieren.

Kernkonzepte

p5 gibt uns zwei Methoden, die beim Erzeugen eines Sketchs essenziell sind: setup() und draw(). Du kannst warscheinlich erraten, wofür diese jeweils sind, aber sie haben einen wichtigen, versteckten Unterschied. Öffne my-first-sketch.js und füge Folgendes hinzu:

// Setup code
function setup () {
    console.log('Hi from setup!');
}

// Drawing code
function draw () {
    console.log('Hi from draw!');
}

Obwohl wir eben erst diese Funktionen definiert und sonst nichts anderes gemacht haben, werden sie automatisch ausgeführt werden, wenn wir die Seite laden, da p5 das von uns erwartet hatte. Öffne dein index.html in deinem Lieblingsbrowser und öffne die JavaScript-Konsole. Das ist, was wir sehen:

Wie du sehen kannst, wurden beide Funktionen automatisch aufgerufen, die setup() Funktion jedoch nur einmal, während draw() mehrmals – 768 Male innerhalb weniger Sekunden! – aufgerufen wurde. Wir werden die Wichtigkeit davon ein wenig später sehen.

OK, um mit dem Zeichnen loszulegen, benötigen wir etwas, das alle Künstler brauchen: eine Leinwand. Alles, was wir tun müssen, ist p5's createCanvas() Funktion einzusetzen und ihr eine Breite und Höhe als Argumente geben. Von wo sollen wir diese Funktion aufrufen? In setup() natürlich.

1	function setup () {
2	// Create a canvas 200px wide and 200px tall
3	createCanvas(200, 200);
4	}

Wenn du deine Seite neu lädst, wirst du keinen Unterschied sehen. Das ist so, da die Leinwand standardmäßig transparent ist. Lass uns sie mit ein wenig Farbe aufhübschen. Wie wäre es mit einem netten Rot? Hänge auch diese Zeile in setup() an.

1	background('red');

p5 ist clever genug, um zu wissen, ob wir einen HTML-Farbnamen oder Hex-Wert benutzt haben, d. h. background('#FF0000'); ist genauso gültig.

Formen

Lasst uns zeichnen. Uns stehen ein paar eingebaute Formen zur Verfügung. Lasst uns mit einem einfachen Rechteck anfangen. In unsere draw-Funktion können wir das Folgende schreiben. Erinnerst du dich, alle Koordinaten starten bei (0,0), was in der oberen linken Ecke der Leinwand liegt.

1	function draw () {
2	rect(0, 0, 50, 50);
3	}

Wenn du deine Seite neu lädst, solltest du dies sehen: ein Rechteck das bei (0,0) beginnt und 50px breit und 50px hoch ist (ein Quadrat).

Dieses Quadrat kann genauso einfach wie bei unserem Hintergrund eingefärbt werden. Alles, was wir tun müssen, ist, eine Füllfarbe zu bestimmen, bevor wir das Rechteck zeichnen. Lass uns dieses Mal ein paar Hex verwenden.

1	fill('#CC00FF');
2	rect(0, 0, 50, 50);

Jetzt haben wir ein lilanes Quadrat. Nicht gerade ein Meisterwerk, aber wir kommen dahin. Wie wäre es mit einer weiteren Form? Ein Kreis, höre ich? Kein Problem.

// Draw an ellipse that's 25px from the top and
// 25px from the left of the edge of the canvas.
// The ellipse is 25px tall and 25px wide making
// it a circle.
ellipse(25, 25, 25, 25);

Du wirst merken, dass unser Kreis nicht nur über unser Rechteck gezeichnet worden ist, sondern auch die gleiche Farbe wie unser Rechteck besitzt.

Das ist so, weil die Reihenfolge, in welcher diese Funktionen aufgerufen werden, extrem wichtig ist. Wenn wir das Rechteck nach der Ellipse gezeichnet hätten, hätten wir den Kreis überhaupt gar nicht gesehen, da er übermalt worden ist. Und im Falle der Füllfarbe des Kreises verhält es sich genauso wie beim Quadrat, da jegliche Form, die nach dem Aufrufen der fill() Funktion gezeichnet wird, diese Farbe nutzen wird. Um die Farbe des Kreises zu ändern, rufe einfach erneut die Füllfarbe mit einem anderen Wert auf.

1	fill('#66CC66');
2	ellipse(25, 25, 25, 25);

Wir haben nun Folgendes:

Hm, immer noch nicht so aufregend. Lass uns sehen, was wir machen können. Nun, bedenke, dass das Meiste von unserem Code sich innerhalb der draw() Funktion befindet, und wie wir vorhin schon gesehen haben, wird alles in der draw-Funktion immer und immer wieder aufgerufen. Also heißt das im Grunde, dass unser Quadrat und unser Kreis immer und immer wieder über das Quadrat und den Kreis, welche im vorherigen Aufruf der draw-Funktion gezeichnet wurden, übermalt werden.

Was passiert, wenn wir unsere Formen jedes Mal an unterschiedlichen Orten zeichnen?

Andere Zeit, anderer Ort

Um deine Formen an einem anderen Ort zu zeichnen, bist du möglicherweise versucht, die Koordinatenwerte zu verändern. Das ist eine einwandfreie und großartige Möglichkeit, die komplette Kontrolle über deine Zeichnung zu erlangen.

Es existiert aber auch eine Alternative. Wir verändern den Offset der gesamten Leinwand, sprich, wir verlagern den Ursprung, die Koordinaten oben links (0,0); nach woanders. Das Ergebnis davon ist, dass unsere Formen mit diesem Offset gezeichnet werden. Wenn wir also translate(10, 10) schreiben; kommen wir zu folgendes Ergebnis.

Unsere Formen sind nun 10px weiter links und 10px weg vom oberen Rand eingezeichnet.

Das hat unser ursprüngliches Problem, dass die Formen ständig übermalt werden, aber noch nicht wirklich gelöst, was aber, wenn wir den Ursprung der Leinwand bei jedem draw() Aufruf ändern? Die Formen würden dann an anderer Position jedes Mal gezeichnet werden. Aber welche Position? Und wie würden wir auf eine andere Position kommen, jedes Mal, wenn draw() aufgerufen wird? Zum Glück hat p5 uns mit der random() Funktion eingedeckt – eine einfache Methode, um Zufallszahlen zu generieren. Wir werden diese nutzen, um den Offset unserer Leinwand zu verändern.

function draw () {
    // Offset the canvas
    // random(0, width) returns a value between
    // 0 and the width of the canvas.
    // As does random(0, height) for height.
    translate(random(0, width), random(0, height));
 
    // Existing code here
}

Das liefert uns eine animierte Version davon:

Juhu! Möglicherweise findest du diese Animation einen Tick zu schnell. Das ist, weil p5 unsere Formen so schnell wie es geht mit draw(), das immer und immer wieder aufgerufen wird, zeichnet. Wenn du das ein wenig verlangsamen möchtest, kannst du die Frame-Rate reduzieren, mit welcher draw() aufgerufen wird. Setze einen Aufruf frameRate() in deiner setup-Funktion.

function setup () {
    createCanvas(200, 200);
    background('red');
    frameRate(5);
}

Das ist besser. Und wieder ist es ein bisschen langweilig, mit dem Quadrat und dem Kreis, die immer aufeinanderliegen. Lass uns versuchen, unsere Formen zu rotieren, um die Sache etwas interessanter zu machen. Also, wie machen wir das? Jepp, du hast es erahnt, p5 hat uns damit bereits versorgt. Als Erstes sagen wir p5, dass wir mit Gradmaß anstatt von Bogenmaß rotieren möchten, und das wir auf zufälliger Weise rotieren möchten, bevor wir jede Form einzeichnen.

angleMode(DEGREES); // uses global DEGREES constant
rotate(random(1, 360)); // rotate to random angle
fill('#CC00FF');
rect(0, 0, 50, 50);

rotate(random(1, 360));
fill('#66CC66');
ellipse(25, 25, 25, 25);

Wir haben ein Monster kreiert.

Ich bin mir ziemlich sicher, dass ich 1991 ein Shirt mit dem allergleichen Muster besaß...

Nein, mein Fehler, es hatte noch ein paar gelbe Dreiecke darauf. Lass uns all-in gehen und ein paar davon hinzufügen.

// Random positioned yellow triangle
rotate(random(1, 360));
fill('yellow');

// 3 pairs of triangle points
triangle(25, 0, 50, 50, 0, 50);

Herrlich. Schlechtes 90er-Shirt oder moderner Jackson Pollock? Das liegt an dir. Kunst liegt ja bekanntlich im Auge des Betrachters.

Zusammenfassung

Ich hoffe, dass du in diesem Tutorial gesehen hast, wie einfach es ist, mit p5.js damit anzufangen, im Browser loszuzeichnen. p5 bietet viele weitere hilfreiche, bequeme Methoden, die uns helfen, Formen zu zeichnen, zu animieren und mit Benutzereingaben umzugehen. Wenn du interessiert bist, noch mehr darüber zu lernen, gehe auf die p5-Referenzseite, oder schau dir meinen Envato Tuts+ Kurs Interaktive Kunst mit p5.js an.

Zur Übersicht ist hier noch der vollständige Quellcode unseres p5-Sketches.

function setup () {
    createCanvas(200, 200);
    background('red');
    frameRate(5);
}

function draw () {
    translate(random(0,width), random(0,height));

    angleMode(DEGREES);
    rotate(random(1, 360));
    fill('#CC00FF');
    rect(0, 0, 50, 50);

    rotate(random(1, 360));
    fill('#66CC66');
    ellipse(25, 25, 25, 25);

    rotate(random(1, 360));
    fill('yellow');
    triangle(25, 0, 50, 50, 0, 50);
}