Wettervisualisierungen
Kickstart in die Programmierung
Brief
Das Projekt ermöglichte eine erste Auseinandersetzung mit der P5.js Bibliothek und brachte eine Einführung in die Javascript-Programmierung. In einem ersten Schritt wurden theoretische Grundlagen der Programmierung erlernt. Die praktischen Übungen in P5.js Online Editor trainieren abstraktes Denken, Beschreiben und Zerlegen von Problemen.
Darunter fallen Übungen mit Form, Farbe, Platzierung, Responsiveness und Skalierbarkeit, Animation, Sinus, Cosinus, Loops, Noise, Funktionen, Dom Elemente, Arrays, Events, Transformation, aber auch visuelle Spielereien. Beispiele sind unter Punkt * 7Theorie zu finden.
In einem zweiten Teil wurde ein grösseres Projekt konzipiert, in dem Wetterdaten abgefragt und die Parameter visuell interpretiert wurden. Mehr dazu ab Punkt 2 Prozess
Tools: p5.js, Visual Studio Code, API weatherstack.
Zeit: Theorie sechs Tage, Umsetzung 16 Tage
Ziele: Spielerisches und gestalterisches Arbeiten mit Code. Abfrage von Wetterdaten mittels API. Visualisierung von Parametetn des Wetters eines bestimmten geografischen Orts in einem p5.js Projekt.
Prozess
Mit Theorie bepackt, stellte sich in einem zweiten Schritt die spannende Frage:
Fragestellung: Wie kann man die vorhandene Information von Wetterdaten in visuelle Parameter übersetzen?
Einbindung der API
Zuerst benötigst du einen ACCESS KEY, mit dem du das aktuelle Wetter, aber auch das Wetter der nächsten 7 Tage abrufen kannst. Hier siehst du, wie ein API Request bei weatherstack aussieht.
Im zweiten Bild sieht man ein Beispiel einer API Response.
Mit loadJSON in Zeile 21 machst du einen Request und führst die Funktion gotWeather aus. In Zeile 30-32 siehst du, wie man bei einem Request bestimmte Werte eines Objekts der API ansprechen und in einer Variable speichern kann.
Sonnenstand & Himmel
Zuerst widmete ich mich der Umrechnung der aktuellen Zeit und der Visualisierung des Sonnenstands: (mapping Sunset-Sunrise to -90° +90°, einem Halbkreis entlang).
In einem nächsten Schritt wurden Hintergründe mithilfe von Farbverläufen und dem Pixel Array entworfen. So verändert sich der Hintergrund der Visualisierung nach Tageszeit.
Wettercodes
Die Wetterdaten der API Weatherstack arbeiten mit sogenannten Wettercodes. Somit kann man ermitteln, ob es gerade schneit, regnet oder die Sonne scheint. Genauso sind Daten zu Windrichtung und Niederschlagsstärke vorhanden.
Anhand dieser Parameter wurden einzelnen Wetterelemente generiert; Regen, Nebel, Wolken, Schnee, Sterne, Windrichtung und unterschiedliche Stärken der Wetterelemente wurden konzipiert.
Codebeispiel Sterne
Resultat
Durch ein Inputfeld kann der Nutzer das aktuelle Wetter eines Wunschortes abfragen. Weatherstack gibt dabei aktuelle Parameter, wie einen Weathercode zurück, welche das Programm dann visuell interpretiert. Der Hintergrund verändert sich je nach aktueller Tages- und Jahreszeit. Schnee, Regen und Nebel sind in unterschiedlichen Stärken zu erkennen und werden auch von Windrichtung und Geschwindigkeit beeinflusst.
REflexion
Unzählige Stunden des Lernens mithilfe von Tutorials, nachschlagen der Dokumentation, Fehlersuche und Behebung führten zu einem lehrreichen ersten Einstieg in die Javascript Programmierung. Die Übungen am Anfang brachten mir meine ersten Programmierkonzepte bei. Es hat Spass gemacht, gestalterisch damit zu spielen.
Eine weitere Idee war das Abspielen eines zum Wetter passenden Songs. Wäre noch mehr Zeit übrig geblieben, hätte ich gerne weiter mit der p5-Musik-Library experimentiert. Bei einem ersten Versuch stellte sich allerdings der geschriebene Code als zu rechenintensiv heraus.
Bei der Recherche dazu bin ich auf eine spannende Formel von Johan Gielis gestossen. Mit wenig Parametern können sehr spannende geometrische Animationen erstellt werden. Probier es doch selbst mal aus!
Theorie
die ersten Sketches in p5.js. Drücke auf Play um den Code auszuführen. Verändere die Parameter und experimentiere selbst.
Sinus und Cosinus
Superformula:
Oh WOW!
bis hier schafft’s nicht jeder! Ich hoffe es war spannend 😉