Arrays
Themen: Datenstrukturen (Arrays), Arrays und Schleifen, Random
Viele verschiedene Variablen in einem Sketch zu verwalten wird schnell unübersichtlich. Betrachte den Code in diesem Beispiel:
https://editor.p5js.org/hzuellig/sketches/D8JJrHjhF
Ein Array ist dazu da, inhaltlich zusammen gehörenden Variablen gemeinsam zu verwalten.
Definition:
eine bestimmte Anzahl Daten-Elemente, welche unter dem gleichen Namen abgespeichert sind.
z.Bsp.
Gebäude der Bahnhofstrasse
Bahnhofstrasse = Name des Arrays
Gebäude = Daten-Elemente im Array
Sprüngli
Credit Suisse
> Globus
> Um die Gebäude zu finden, braucht es eine Nummerierung (Index)
Die Indexe eines Arrays beginnen bei 0. Über Arrayname und Indexnummer in eckiger Klammer wird ein Element initialisiert:
>Bahnhofstrasse [0] = Sprüngli
Bahnhofstrasse [1] = Credit Suisse
etc.
Über Arrayname und Indexnummer kann auf diesen Wert wieder zugegriffen werden.
>Bahnhofstrasse [0]
enthält den Wert 'Sprüngli'.
Jeder Eintrag, welcher in einem Array gespeichert ist, wird typischerweise als Element bezeichnet und hat einen Index, der seine Position definiert. Das erste Element innerhalb eines Arrays hat den Index 0, das zweite hat den Index 1 und so weiter; das letzte Element hat den Index gleich der Anzahl aller Elemente minus 1. Wir können beispielsweise eine Farbpalette innerhalb eines Arrays speichern:
let colors = [ "#FF0000", "#FFC000", "#E0FF00", "#7EFF00", "#21FF00" ];
Ein Array kann in jedem Eintrag Zahlen, Strings (=Buchstaben), oder auch ein weiteres Array enthalten.
Um die Anzahl der Element in einem Array herauszufinden, gibt es die Eigenschaft length, welches die Länge des Arrays als Zahl zurückgibt. Probiert mal: console.log(colors.length); auszugeben.
Sobald man die Länge eines Arrays kennt, kann man mit einer for Schleife alle Elemente einer Liste mit nur wenigen Zeilen Code auslesen.
Beispiel
Versucht, innerhalb der for Schleife Elemente zu kreieren, so dass die Farben unterschiedlich eingesetzt werden. Erstellt selber ein zweites Array und füllt es, z.Bsp. mit Zahlen für Positionen oder Grössenangaben. Benutzt das zweite Array ebenfalls in der Schleife.
Beim Programmieren gibt es keinen richtigen Zufall, aber eine Funktion, die Zufall auf Basis der Zeit simuliert. Referenz auf p5js
Studiere die Beispiele auf dem Link oben.
let rnd = random(5);
Achtung rnd ist eine Fliesskommazahl – keine Ganzzahl. In diesem Beispiel seht ihr, wie Random benutzt wird, um einen zufälligen Eintrag aus einem Array zu ziehen. Die Fliesskommazahl wird mit int() in eine Ganzzahl 'abgerundet'. Es handelt sich dabei nicht um eine mathematischen Rundung. Die Zahlen hinter dem Komma werden einfach abgeschnitten.
Betrachtet einmal dieses Muster von Annie Albers. https://en.wikipedia.org/wiki/Anni_Albers
Die Lebendigkeit und Schönheit des Musters entsteht durch ein einfaches Prinzip. Die Dreiecke sind im Raster einmal von der linken oberen Ecke des Rapports und einmal von der unteren rechten Ecke her gezeichnet. Die Abfolge erscheint jedoch nicht regelmässig. Hier findet ihr weitere Beispiele, die mit Random arbeiten: http://www.generative-gestaltung.de/2/sketches/?01_P/P_2_1_1_01, http://www.generative-gestaltung.de/2/sketches/?01_P/P_2_1_1_02
Nimm einen deiner Entwürfe, mache eine Kopie und versuche etwas 'randomness' zu integrieren. Sei es die Position, die Farbe, die Drehung ... ergänze den Entwurf mit einem Grad an Zufall. Teste, wieviel Zufall interessant ist und wo die Gestaltung chaotisch und ungeordnet erscheint.
- Übung 4 entwerfen und ins Repo pushen
- Repetition der Konzepte individuell nach Bedarf (Videos schauen, Online-Referenz Lesen, Beispiele in diesem Wiki durcharbeiten)
- Video zur Repetition Array: https://www.youtube.com/watch?v=VIQoUghHSxU
- Video zur Repetition Translate, Rotate, Scale: https://www.youtube.com/watch?v=o9sgjuh-CBM&t=11s