Document ID: /fineweb-2-swissfilter-quality_10-filterrobots/filtered/03192.jsonl.gz/968

P5js-Referenz:
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
i <= klimaArray.length. Was passiert genau?
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 Informatikksw by sci