p5js Kurs: BigData mit Klimadaten

P5js-Referenz:

Experimente

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

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?

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.

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 den Blog-Beitrag 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 Animation von MeteoSchweiz mit den obigen Temperaturwerten nachbauen: Animation. Der Erfolg ist nicht garantiert, aber grosse Lernfortschritte.

Als Ansatzpunkte können die Systemvariable frameCount und die Restdivision % (Modulo-Operator) dienen. Z.B. liessen sich mit der Bedingung if(frameCount % 20 == 0) {...} die Anweisungen innerhalb des if-Blocks nur bei jedem 20. Durchlauf der draw()-Funktion ausfĂŒhren.

Processing Kurs | kswMedia Informatik

ksw by sci