Funktionen

Mit Funktionen können Sie Teile Ihres Programms, zum Beispiel mehrere Befehle, zusammenfassen und sozusagen eigene Befehle erzeugen. Dadurch wird ein Programm besser lesbar und Code wird einfacher wiederverwendbar.

Erzeugt werden Funktionen mit dem Keyword function, gefolgt vom Namen der Funktion, den Sie frei wählen können. Nach dem Namen stehen runde Klammern, in die optional Parameter hinein gegeben werden können. Der Inhalt der Funktion wird in geschweifte Klammern geschrieben, einem sogenannten Action Block.

// v----------------------- Keyword
//         v--------------- Name der neuen Funktion
//            v------------ Klammern (hier ohne Parameter)
//                  v------ Block (üblicherweise mehrere Zeilen)
function bernd() { ... }


//               v--------- Klammern (hier mit Parametern)
function elfriede(kawumms, radeng) { ... }

Im nächsten Beispiel schreiben wir uns eine einfache Funktion um aus Linien ein Dreieck zu zeichnen:

function triangle(x1, y1, x2, y2, x3, y3) {
    line(x1, y1, x2, y2); // von Punkt 1 zu Punk 2
    line(x2, y2, x3, y3); // von Punkt 2 zu Punk 3
    line(x3, y3, x1, y1); // von Punkt 3 zu Punk 1
}

Funktionen lohnen sich besonders, wenn man Code wiederholen will. Wenn Sie Ihr Emoji zum Beispiel zwei (oder mehr) Augen hat, kann man diese in einer Funktion für das Zeichnen eines Auges definieren und dann einfach zwei Mal (oder öfter) aufrufen. Außerdem bekommen Befehle dadurch auch einen sprechenden Namen. Das oben gezeigte triangle(...) ist sicher verständlicher als drei line-Befehle.

Eine Funktion wird genauso aufgerufen, wie die Befehle, die Sie schon kennen gelernt haben. In Wahrheit sind die Befehle von p5js nämlich auch einfach nur Funktionsaufrufe gewesen.

function feedTheHamster() {         // <-- Funktion wird hier definiert
    console.log("Yummi");
}

feedTheHamaster();                  // <-- Funktion wird hier aufgerufen

function callTheHamster(name) {     // <-- Definition, dieses Mal mit Parameter
    console.log("Hej " + name);
}

callTheHamster("Klaus");            // <-- Aufruf

Parameter

Mit Parametern können Sie Ihrer Funktionen Werte (oder Variablen) mitgeben die innerhalb des Action Block verwendet werden können. Diese Parameter gelten nur innerhalb der geschweiften Klammern! Diesen Bereich nennt man auch Scope.

let outerVariable = 10;

function feedTheHamster(innerVariable) {
    // Hier könnt ihr auf innerVariable und outerVariable zugreifen
    
    // Das hier ist der Scope der Funktion feedTheHamster und
    // innerVariable existiert nur in dem Scope der Funktion.
    
    // Der Scope der Funktion erweitert den globalen Scope, deshalb
    // kann man hier auf beide zurückgreifen.
}
// mit der schließenden geschweiften Klammer endet der Action Block.
// Ab hier könnt ihr wieder *nur* auf outerVariable zugreifen, denn
// das hier ist ja *außerhalb* der Funktion, auch "globaler Scope" genannt.

Wie immer haben wir auch hier ein Video über Funktionen für euch aufgenommen:

Aufgabe 1

Packen Sie den Code für Ihr Emoji in eine Funktion. Geben Sie der Funktion einen sinnvollen Namen. Die Funktion soll Parameter erhalten können - sinnvoll für den Anfang sind sicherlich x und y für die Position und zum Beispiel s für die Skalierung.

Aufgabe 2

Ändern Sie Ihre Funktion so, dass ein weiterer Parameter übergeben werden kann - zum Beispiel eine Hintergrundfarbe. Zeichnen Sie danach drei Emoji an verschiedenen Positionen mit verschiedenen Parametern.

Speichern Sie das Ergebnis als emoji-function.js ab und committen/pushen Sie es auf Gitlab.