Wenn ihr die sketch.js Datei öffnet, findet ihr darin bereits einige Zeilen Code. Dies nennt man
auch im Fachjargon gerne eine Boilerplate. Also eine Basis auf der man aufbauen kann.
In dieser Boilerplate findet ihr drei spezifische so genannte Funktion. Genau diese Funktion werden
automatisch von der p5js library ausgeführt, sobald euer Programm im Browser geladen wurde.
Die Reihenfolge in der diese Funktion ausgeführt werden ist dabei sehr wichtig. Ich habe das hier
einmal versucht in der Grafik darzustellen. Als allererstes wird die "preload" Funktion
ausgeführt. Die "preload" Funktion erlaubt es uns zum Beispiel zusätzliche Assets zu laden,
wie Schriften, Bilder oder andere Daten. Damit wir diese dann verfügbar haben, sobald
wir unsere eigentlichen Funktionen ausführen. In der "setup" Funktion führen wir einmalige
dinge aus. Hier setzen wir bestimmte Parameter oder wie jetzt hier gerade mit "createCanvas"
erstellen wir unsere eigentliche Zeichenfläche am Anfang. Wichtig ist bei diesen Funktionen damit
sozusagen etwas innerhalb der Funktion ausgeführt wird, muss es innerhalb der geschweiften Klammern
stehen. Alles was innerhalb der geschweiften Klammern steht gehört zu dieser Funktion
und wird dementsprechend mit dieser Funktion ausgeführt. Nachdem alles in "setup" fertig ist,
wird die "draw" Funktionen aufgerufen. Die "draw" Funktion, das Besondere hier ist, dass diese in
einer Schleife ausgeführt wird. Am Anfang mag das noch nicht so interessant sein, weil wir nur
einmal irgendwo bestimmte Formen hinzeichnen. Aber später wenn wir zum Beispiel Animationen
machen oder sich verändernde Objekte gestalten, dann ist das total spannend, weil wir dann
sozusagen Parameter über Zeit verändern können und dadurch dann diese Animationen generieren können.