Bisher haben wir in unserem Code alle Angaben zu Farben, Positionen immer fix gemacht. Heisst wie
in diesem Beispiel hier zu sehen, haben wir die Farbe für unseren Kreis hier definiert als 255.
Danach haben wir einen Kreis gezeichnet und haben auch dafür die x/y Position,
als auch den Durchmesser unseres Kreises fix durch Zahlen definiert. Die Idee des parametrischen
Designs ist es aber sozusagen nicht all diese Operationen manuell zu definieren, sonst könnten
wir auch einfach eine Grafik-Software benutzen und alle Objekte manuell auf der Zeichenfläche
positionieren. Sondern das sich Position, Größe, etc durch Parameter definieren und dadurch dann
zum Beispiel wir ganz ganz viele Objekte zeichnen können und nicht für jedes einzelne Objekt alles
genau definieren müssen. Sondern das sich dies aus Berechnungen ergeben. Ein ganz einfaches Beispiel.
Das erste ist sozusagen die Zeichenfläche. Die Zeichenfläche könnten wir auch als Parameter
definieren. Können sagen: okay die Zeichenfläche hat eine bestimmte Breite und eine bestimmte Höhe.
Und diese Zeichenfläche ist dann zum Beispiel interessant, wenn wir auf dieser Zeichenfläche
etwas mittig positionieren wollen. Denn dann müssen wir wissen, wie groß ist das Objekt,
wie groß ist die Zeichenfläche, um dann zu berechnen wie groß der x/y Wert für unser Objekt
ist. Dann könnten wir zum Beispiel einen weiteren Parameter nehmen, um die Größe eines Objektes in
diesem Fall ein Quadrat zu definieren. Und dann vielleicht sogar noch einen Schritt weiter gehen
und ein weiteres Objekt definieren das gar nicht mehr explizit durch uns definiert wird, sondern
dass sich durch die Abhängigkeit anderer Objekte ergibt, indem wir zum Beispiel sagen: okay,
wir wollen ein weiteres Quadrat, ein weiteres Rechteck haben, dass 50% in der Breite unserer
definierten Box ist und 25% in der Höhe. Um solche Dinge zu machen haben wir in JavaScript sogenannte
Variablen. Variablen kann man sich vorstellen als Container in denen wir Informationen abspeichern
können. Diese Container können noch nachträglich verändert werden, manipuliert werden, so dass sich
die Werte innerhalb einer Variable auch durchaus verändern können. Um eine Variable anzulegen,
haben wir zwei verschiedene Schreibweisen, zwei verschiedene Typen von Variablen. Das eine sind
die sogenannten Konstanten, die werden mit "const" definiert und dann können wir nun
einen Variablennamen nehmen, zum beispiel können wir unseren sketchHeight definieren,
das als 400 und sketchWidth mit ebenfalls 400 definieren. Was wir hier haben ist sozusagen
einmal die Definition was für einen Variablentypen wir haben in dem fall soll es eine Konstante sein
und dann geben wir der Variable einen Namen. Bei den Namen seid ihr relativ frei, ihr müsst
darauf aufpassen, dass in euren Namen keine Leerzeichen oder Minuszeichen auftauchen. Ich
empfehle euch generell der einfachheitshalber gar keine Sonderzeichen zu benutzen, sondern nur Text,
Unterstrich und Zahlen zu benutzen. Idealerweise sollten Variablen auch nicht mit einer Zahl vorne
anfangen, sondern zahlen irgendwo im Text haben. Wenn ihr euch an die Standards halten wollte,
die in JavaScript genutzt werden, in JavaScript nutzt man in der Regel eine Schreibweise wo man
die Wörter nicht durch Unterstreiche voneinander trennt, sondern indem man sozusagen wenn ein neues
Wort anfängt, das man den ersten Buchstaben groß schreibt. Das ist anders zum Beispiel
in Python. In Python benutzt man zum Beispiel Unterstriche um Wörter voneinander zu trennen.
Sonst seid ihr aber völlig frei wie ihr eure Variablen benennt. Könnte das sozusagen ganz
frei machen. Die Konstanten, wenn wir das so definieren, sind Werte die wir einmal
definieren und die wir danach nicht mehr ändern können. Damit ist sozusagen sichergestellt,
egal wo wir in unserem Programm auf diese Variable zugreifen, es ist immer der Wert, den wir einmal
definiert haben. Aber es gibt vielleicht auch Werte die man nachträglich noch verändern möchte,
zum Beispiel soll bei jeder Operation in der die "draw" Schleife durchgeführt wird,
der Wert größer werden. Dann müssen wir das ganze mit "let" definieren und hier könnten wir
jetzt zum beispiel unsere Box-Größe angeben. Die boxWidth setzen wir mal auf 200 und die boxHeight
ebenfalls auf 200. Jetzt haben wir auch hier zwei Variablen die wir nachträglich verändern können.
Wenn wir diese Variablen irgendwo benutzen wollen, können wir einfach den Namen benutzen, also damit
zum Beispiel jetzt hier bei "createCanvas" auf unsere sketchHeight und sketchWidth
zugreifen wollen, können wir jetzt einfach hier schreiben sketchWidth und sketchHeight
und greifen so jetzt sozusagen auf die Werte zu,
die wir am Anfang definiert haben. Wenn man sich irgendwann im Code nicht mehr sicher ist,
was eigentlich in den Variablen gespeichert wurde, dann kann man sich die auch einfach
ausgeben lassen, zum Beispiel hier mit sketchWidth. Speicher das jetzt
mal. Öffne die Developer Tools damit wir es sehen können, was hier der Output ist.
Und können jetzt hier zum Beispiel sehen, dass 400 ausgegeben wurde, also die Zahl die wir am
Anfang definiert haben. In variablen kann man grundsätzlich fast alles speichern,
können Texte speichern, können Zahlen speichern. Wir werden uns später auch noch komplexere Typen
von Variablen anschauen. Grundsätzlich in der Programmierung unterscheidet man zwischen
erstmal vier Haupttypen an Variablen das sind einmal Texte sogenannte Strings im englischen.
Das hatten wir schon mal, wenn man einen text irgendwo im Code benutzen will, muss man den
immer in Anführungszeichen setzen. Ihr könnt dabei einfache oder doppelte Anführungszeichen
nutzen. Und können jetzt hier zum Beispiel einen Text reinschreiben und können dann
auf diesen Text später zugreifen, ihn zum Beispiel irgendwo als Text wieder ausgeben.
Der zweite Typ sind die Zahlen, bei den Zahlen wird allerdings unterschieden,
in JavaScript ist das nicht so wichtig, weil dort wird einfach nur der Zahlentyp genutzt,
aber in vielen anderen Programmiersprachen wird dann ein bisschen stärker darauf geachtet. Dort
gibt es nämlich dann die sogenannten integer. Integer sind einfach ganze zahlen und dann gibt
es noch die float, das sind Kommazahlen. Ganz wichtig, im Deutschen werden Kommazahlen mit
einem Komma geschrieben, im Englischen aber mit einem punkt .Also ganz wichtig wenn ihr
irgendwo eine Kommazahl benutzt, benutzt einen Punkt, um das Ganze zu trennen. In JavaScript
ist es aber wie gesagt nicht so wichtig weil da zwischen float und integer in der Regel nicht
unterschieden wird. Ein weiterer einfacher Variablentyp sind die sogenannten Boolean.
Booleans sind ganz einfache Variablen. Die können true oder false sein. Also wahr oder falsch. Die
kann man zum Beispiel benutzen, wenn man etwas ein- und ausschalten möchte, also wenn in einer
Einstellung etwas gezeichnet werden soll und in einer anderen Einstellung zum Beispiel nicht. Mit
diesen Variablen können wir jetzt arbeiten. Also wenn ich hier nochmal auf das Beispiel zurückgehe,
wir wollten hier eine Box zeichnen die in der Mitte unseres Canvas angelegt sein soll. Wenn
ich das machen möchte, gehe ich jetzt mal hier unten rein. Sagen okay, wir wollen ein Rechteck
zeichnen. Wir brauchen jetzt hier die X und die Y Koordinaten und dann hatte ich hier oben
definiert boxWidth und boxHeight. Jetzt müssen wir uns irgendwie das x und das y berechnen. In
dem Fall haben wir sozusagen die Größe unseres gesamten Canvas. Das hatten wir oben definiert.
Davon ziehe ich jetzt die boxWidth ab und teile das Ganze dann noch durch zwei und
habe dann sozusagen hier den Abstand den wir hier links von der Kante haben und dasselbe
muss ich dann nochmal für Y machen. Damit man das jetzt noch ein bisschen besser lesen kann,
werde ich das einfach mal in mehrere Zeilen setzen.
Und kopiere mir das jetzt einfach von hier oben.
Und muss das jetzt einfach nur durch height ersetzten.
Speicher das Ganze und jetzt haben wir eine mittige box .Das tolle daran, dass wir jetzt
berechnen wo die X/Y Position ist, dass wir nun im Code ganz einfach zum Beispiel hier die Größe
auf 100 ändern können und das Ganze trotzdem wieder durch unsere mathematische Formel die wir
unten haben, automatisch in den Mitte platziert wird. In unserem Beispiel sind wir noch einen
Schritt weiter gegangen. Dort haben wir noch eine weitere Box erstellt, die abhängig von der ersten
Box ist. Dafür kopiere ich mir einfach mal das hier. Füge das unten ein und erstelle mir jetzt
zwei neue Variablen. Ich könnte das jetzt auch direkt in den Code unten reinschreiben, aber der
übersichthalber mache ich mal neue Variablen und nennen das dann einfach smallWidth und smallHeight
und dann nehme ich einfach dann boxWidth, bei der Größe haben wir 50% gesagt,
also mal 0,5 und bei der Höhe haben wir 25% gesagt, also 0.25. Das einzige was ich jetzt noch
machen muss ist einfach hier die boxWidtht durch unsere smallWidth und smallHeight zu ersetzen.
Und damit wir das sehen können, sollten wir dem vielleicht eine andere Farbe geben. Ich
mach das jetzt einfach mal rot. Und wenn wir das abspeichern, haben wir jetzt hier sozusagen in
der Mitte eine weitere Box, die abhängig ist, von der größeren Box. Und da das Ganze funktioniert,
können wir auch mal hier oben andere Werte eintragen. Können ja vielleicht auch mal
unterschiedliche Höhen- und Breiten-Angaben machen und sehen sozusagen dass sich das jetzt
schön proportional verändert, abhängig von den Werten die wir definiert haben,
dadurch dass wir sozusagen hier unten diese Berechnungen durchführen