In p5js haben wir ganz viele verschiedene Möglichkeiten wie wir Farben definieren. Das Erste
ist in dem einfach nur eine einzige Zahl angegeben wird. In dem Fall wird ein Grauwert definierte:
von 0 schwarz bis 255 weiß reicht. Also wenn ich jetzt mal 255 eintrage wird das ganze
weiß und wenn ich dann irgendwas dazwischen wähle bekommen wir entsprechend einen Grauton
ausgegeben. Darüber hinaus können wir auch das RGB-Spektrum nutzen, was wir auch aus anderen
Grafikanwendungen kennen. Also wenn ich jetzt hier drei Werte für RGB eingebe werden die auch
wieder von null bis 255 definiert, so wie es auch in fast allen anderen Programmen ist.
Darüber hinaus können wir auch einen vierten Wert hinzufügen und dieser vierte Wert ist der Alpha-,
der Opacity-Wert, also wie stark deckend unsere Hintergrundfarbe ist. Dieser wird
ebenfalls von null bis 255 definiert. Wenn ich das jetzt hier mache, wir erinnern uns,
das Ganze wird in einem Loop abgespielt, sehe ich diese Transparenz nicht, weil er ganz viele
blaue Flächen aufeinander zeichnet. Wenn ich das jetzt in dem Fall tatsächlich sehen will,
dann müsste ich jetzt einmal sozusagen erst eine weiße Fläche zeichnen, auf die dann
sozusagen unsere leicht transparente Fläche obendrauf gezeichnet wird. An der Stelle kann
man schon mal sehr gut als beispielhaft sehen die Reihenfolge in der wir unseren Code schreiben ist
natürlich total wichtig, weil der Code wird von oben nach unten abgearbeitet. In diesem Fall wird
sozusagen zuerste der Hintergrund weiß gefüllt und danach dann mit einem leicht transparenten
blau gefüllt das Ganze. Wir können Transparenzen und Farben auch genauso angeben wie sie in CSS
angegeben werden. Zum einen, um direkt bei unserer RGB-Schreibweise zu bleiben, können wir einmal die
RGB-Schreibweise nutzen, also zum Beispiel so um ein Blau zu definieren, können auch zusätzlich
eine Transparenz angeben. Bei Transparenz ist es dann RGBA hier ist allerdings wichtig,
dass bei CSS Alpha/Opacity nicht von 0 bis 255 definiert wird, sondern von 0 bis 1. Also
anders als bei der anderen Funktion ist. Hier schon ganz gut zu sehen, der CSS-Farbwert wird
als Text übergeben und nicht als Zahlen. Wenn irgendwo Texte übergeben werden, dann müssen
diese immer in Anführungszeichen gesetzt werden, damit das was innerhalb des Textes übergeben wird,
nicht als Code interpretiert wird. Ihr könnt hierbei einfache und doppelte Anführungszeichen
benutzen. Wichtig ist nur, dass am Ende und am Anfang des Strings dieselben Anführungszeichen
sind, weil das Ganze sonst nicht funktioniert. Neben dieser Schreibweise können wir auch die
HEX-Schreibweise nutzen. Dafür gibt man erst eine Raute an und gibt dann sozusagen den HEX-Wert für
eine bestimmte Zahl an. Die findet ihr auch in den meisten Grafikbearbeitungsprogramm wird das
mittlerweile angegeben als eine Möglichkeit und können so dann sozusagen andere Farben generieren.
Es gibt darüber hinaus noch mehr Schreibweisen die ihr dann in der p5js-Reference findet.