p5js Kurs: BigData mit Klimadaten

Die Jahresdurschnittstemperaturen der Schweiz sollen dargestellt werden. Es stehen die Zahlen der Jahre 1864 bis 2019 zur Verfügung.
Die Werte sind in einer Variablen mit Namen "klimaArray" abgelegt:

Die in Rot beschrifteten Werte sind per Indexnummer ansprechbar. So liefert klimaArray[7] den Wert 3.08. Die Länge der Liste klimaArray ist 156, der maximale Index ist 155, weil der Index immer bei 0 startet.

Aufgaben

• Subtrahieren Sie im if-Statement von klimaArray.length die Zahl 100 (Zeile 11). Welche Auswirkung ist zu beobachten?
• Verändern Sie in der Funktion strokeWeight() (Zeile 13) die Zahl 5.
• Verändern Sie in Zeile 12 die Zahl 350 in 50er Schritten.
• Verändern Sie in der Funktion point() in Zeile 15 die Zahl 5.

Bei Fragen zu den einzelnen Befehlen hilft die Befehlsreferenz von p5js weiter. Die oberhalb des Editors aufgeführten blauen Links erlauben den direkten Zugriff auf die verwendeten Befehle.

Die Messwerte wurden alle am unteren Rand dargestellt. Dies wird dank einer Multiplikation des Messwertes mit einem Faktor bei der Berechnung der yPos behoben.

Aufgabe

Optimieren Sie diesen Faktor in Zeile 12.

Es soll die durchschnittliche Temperatur über alle Jahre berechnet werden.
Was ist notwendig, um alle Werte zu summieren und anschliessend durch die Anzahl Werte zu dividieren?

• Eine Variable zum Speichern der Summe.
• Einen Durchlauf durch alle Werte. Jeder Wert wird zur bisherigen Zwischensumme addiert.
• Die Anzahl vorhandenen Werte.
• Eine Variable zum Speichern des Durchschnitts.

Die beiden notwendigen Variablen summe und mittelTemp werden ganz zu Beginn deklariert (Zeile 2 und 3). In einer for-Schleife auf den Zeilen 14-16 werden alle Werte durchlaufen. Vorher wird auf Zeile 12 der Variablen summe der Wert 0 zugewiesen. In der Schleife wird der aktuelle Wert der summe um den Wert der aktuellen Stelle klimaArray[i] erhöht und der Variable summe zugewiesen summe = summe + klimaArray[i]. Zum Schluss wird der Wert der Variablen summe durch die Anzahl Werte klimaArray.length dividiert und der Variable mittelTemp zugewiesen mittelTemp = summe / klimaArray.length.

Für die Anzeige des Variablenwertes kommt die Funktion text() zum Einsatz: text(mittelTemp,20,380).

Die Anzeige der mittelTemp weist zu viele Nachkommastellen auf. Zum Formatieren von Zahlen dient die Funktion nf() [number format].

Mit folgendem Vorgehen findet man das kälteste Jahr in der Zahlenserie. Überlegen Sie bei jedem Punkt, auf welchen Zeilen im Code dieser Aspekt umgesetzt wurde.

• Eine Variable zum Speichern der minimalen Temperatur.
• Eine Schleife zum Durchlaufen aller Werte. Wenn ein Wert in der Liste kleiner als die bisherige minimale Temperatur ist, wird dieser in die Variable gespeichert.
• Die if-Programmstruktur für die Wenn-Verzweigung aus dem vorherigen Aspekt.
• Der Startwert der minimalen Temperatur muss zu Beginn auf einen Wert gesetzt werden, der mit Sicherheit grösser als die minimale Temperatur ist.

Zum Schluss wird die minimale Temperatur mit der Funktion text() angezeigt.

Aufgabe

Programmieren Sie analog die Berechnung und Anzeige der maximal Temperatur.

In diesem Beispiel ist die Berechnung und Anzeige der maximal Temperatur ergänzt.

Nun sollen die Punkte nicht einheitlich rot erscheinen, sondern je nach Temperatur im Farbbereich blau bis rot. Für dieses Anliegen kommt uns das Farbsystem HSB gelegen, welches bereits seit der ersten Version mit dem Befehl colorMode(HSB, 360, 100, 100); in der Setup-Methode festgelegt ist.

Dieses Farbsystem basiert auf einem Farbzylinder und kann in dieser 3D-Animation studiert werden: HSB-Zylinder. Für unser Anliegen benötigen wir nur den ersten Parameter Hue, der die Farbe in folgendem Spektrum mit den Werten 0 bis 359 festlegt.

Für die Temperatur soll aber nur die rechte Hälfte des Farbspektrums im Bereich der Werte 180 bis 359 verwendet werden: Blau für die kleinste Temperatur und Rot für die höchste Temperatur.
Dazu muss ein erster Wertebereich auf einen zweiten umgerechnet werden. Dazu stellt p5js die Funktion map() zur Verfügung. Mapping (englisch) heisst zuordnen, abbilden.

Folgende Darstellung zeigt die Abbildung des Wertebereichs -20 bis 40 auf den Wertebereich 180 bis 360. Der entsprechende Befehl hiesse
hueWert = map(aktTemp,-20,40,180,360);

Im konkreten Fall mit aktTemp gleich 15 liefert die map()-Funktion oben den Wert 285 zurück und dieser Wert wird der Variablen hueWert zugewiesen. Wird dieser Wert in stroke(hueWert,100,100) eingesetzt, so resultiert eine Strichfarbe nahe bei Magenta ■.

Anstatt mit point(x,y) ein Punktdiagramm wird neu mit line(x1,y1,x2,y2) ein einfaches Säulendiagramm gezeichnet.

In Anlehnung an die obige Darstellung von MeteoSchweiz sollen nun die Linien als Streifen bis zum oberen Rand der Grafik reichen.

Den Klimawandel in der Schweiz zeigen die Darstellungen von MeteoSchweiz anschaulich und variantenreich.

Wer eine Herausforderung sucht, kann die folgende Animation nachbauen: Animation. Der Erfolg ist nicht garantiert, aber grosse Lernfortschritte.

Als Ansatzpunkt kann die Systemfunktion frameRate() dienen.