var temperatur = "14";
var luftdruck = "1020";
var lokalonline = "100";
var dax_halbleiter = "1.3";
var dax_daimler = "2.0";
var feinstaub = "60";
var admin = "300";Die Visualisierung generiert sich aus live-Daten. Ihr Ursprung liegt in der künstlerischen Intelligenz.
Eine Kernaufgabe des Projekts ist es ausgelesenen Daten kunstvoll zu präsentieren. Dafür haben wir viele Tage recherchiert, getüftelt und hart gearbeitet. Die erfassten daten sollten sich gegenseitig beeinflussen und zu einem Endwert verrechnen, der sich möglichst nicht mehr in seine Ursprungsmasse zurückverfolgen lässt, sodass wir selbst von den entstehenden Visualisierungen überrascht und begeistert werden. Ein weiterer Schritt in Richtung künstlerischer Intelligenz.
Das Ergebnis ist ein sichtbarer Prozess basierend auf aktuellen, rohen Daten. In diesem Beitrag zeigen wir, welche Daten wir genau erfassen, wo wir sie beziehen und wie sie für die Animation bereitgestellt werden. Außerdem zeigen wir euch, wie die Daten sich in den finalen Schritten zusammenfügen und die Visualisierung entstehen lassen.
Datenerfassung
Um Festzulegen, welche Daten wir erfassen wollen, mussten wir erst einmal recherchieren, welche wir auch realistischerweise sammeln können. Als Kollektiv mit blühenden Künstlerfantasien ist es naheliegend, dass wir zuerst fast unmöglich umsetzbare Ideen hatten. Solche wie Wetterdaten mit denen wir täglich in Berührung kommen, erschienen uns zunächst nicht so interessant. Dadurch, dass sich die Daten aber gegenseitig beeinflussen sollten, einigten wir uns schnell darauf, erst leicht erfassbare Daten zu sammeln und uns anschließend der künstlerischen Verarbeitung zu widmen. Durch diese Schwerpunkt Verlagerung engagierten wir zum Auslesen der Daten professionelle externe Hilfe.
Zum sammeln der Daten nutzen wir die OpenSource Software openHABian.
Bisher beziehen wir folgende Daten
- Temperatur
- Luftdruck
- Im Kunstverein Wagenhalle-Netzwerk eingeloggte Geräte
- Börsenwert von Halbleitern im vergleich zum Vortag
- Börsenwert des Automobilherstellers Mercedes im vergleich zum Vortag
- Feinstaubwert
- Die Entfernung des Admins (via Smartphone eines Kollektiv Mitglieds) zur Zelle Alpha
Zu den externen Datenursprüngen gelangen Sie über die Schaltflächen:
Daten zum Abstand des Admins zur Telefonzelle Delta, sowie die Anzahl der lokal eingeloggten Geräte im Kunstverein Wagenhalle sind mittels Programmschnittstellen durch unsere externe Hilfe realisiert worden:
Alle Daten werden nach dem Auslesen mittels der REST-API zur Verfügung gestellt. Das bedeutet, es gibt Links zu den einzelnen Werten, die man auch via Browserzeile ansehen kann. Dadurch können sie von anderer Stelle innerhalb des Netzwerks wieder abgerufen werden.
Was hier so bedeutungslos erscheint, ist die Vorlage der Daten zum Generieren der Visualisierung. Dieser Schritt bildet die Schnittstelle zur Weiterverarbeitung. Durch dieses Verfahren können wir auch zukünftig weitere Werte bereitstellen und den Animationsgenerator füttern. Mehr zum erfassen der Daten erfährst du in dem Beitrag zum Hackathon, bei diesem wir uns zu dem Thema getroffen haben:
Datenverarbeitung
Die Visualisierung ist durch JavaScript realisiert und wird wie eine Webseite via Browser dargestellt. Dazu haben wir in den drei Zellen jeweils ein Raspberry Pi4 installiert auf dem das Betriebssystem Raspberian läuft. Die Schritte Datenverarbeitung und Visualisierung gehen technisch gesehen innerhalb eines Programmdokumentes miteinander einher. Da die Werte sich beeinflussen, können wir so unmittelbar testen, wo die Grenzen der technischen Anzeigbarkeit liegen und die Werte entsprechend eingrenzen. Darum sind diese beiden letzten Schritte "Datenverarbeitung” und "Visualisierung" nicht separat behandelbar.
Durch einen kurzen php-Abschnitt lesen wir die wie oben beschriebenen Links zu den Daten aus:
$temperatur = file_get_contents('http://10.9.4.180/LocalTemperatur/state');
$luftdruck = file_get_contents('http://10.9.4.180/LocalPressure/state');
$lokalonline = file_get_contents('http://10.9.4.180/LocalEingeloggt/state');
$dax_halbleiter = file_get_contents('http://10.9.4.180/Gold_Kurs_Diff/state');
$dax_daimler = file_get_contents('http://10.9.4.180/Daimler_Kurs_Diff/state');
$feinstaub = file_get_contents('http://10.9.4.180/LocalAirQuality_PM25/state');
$admin = file_get_contents('http://10.9.4.180/iphoneAdmin_Distance/state');... und erstellen mit Ihnen Javascript Variablen:
var temperatur = "<?=$temperatur?>";
var luftdruck = "<?=$luftdruck?>";
var lokalonline = "<?=$lokalonline?>";
var dax_halbleiter = "<?=$dax_halbleiter?>";
var dax_daimler = "<?=$dax_daimler?>";
var feinstaub = "<?=$feinstaub?>";
var admin = "<?=$admin?>";Nun können wir mit den Beeinflussungen der Werte beginnen. Als erstes erstellen wir Variablen in denen die Werte miteinander verrechnet werden. Aber wie oben beschrieben brauchen wir "Wertbegrenzungen" um den technischen Anforderungen gerecht zu werden. Denn für eine Visualisierung ist Rechenleistung nötig, und diese ist immer begrenzt. Darum ist es wichtig beim programmieren der Visualisierung zu testen wo diese maximalen und minimalen Werte liegen dürfen. Soll abhängig zu den eingeloggten Geräten beispielsweise auch mehr angezeigt werden, wenn mehr Geräte eingeloggt sind, kann das schnell zu einer Prozessorüberlastung des Computers kommen.
Um die Grenzen zu erfahren, müssen wir einfach mal loslegen und gucken was passiert.
var Endwert = (dax_halbleiter*admin)/feinstaub;Hier wird beispielsweise ein Endwert definiert, der den Börsenwert des Halbleiters mit dem Abstand des Admins multipliziert, und das Ergebnis durch den Feinstaubwert teilt.
Diesem Endwert können wir einen Zuständigkeitsbereich in der Visualisierung zuordnen. Nehmen wir an, wir ordnen den Endwert einem Geschwindigkeitsfaktor zu, so wird diese extrem schnell ausfallen, wenn sich der Admin mal im Urlaub, also ziemlich weit weg befindet. Darum muss entweder der Adminwert vor der obigen Berechnung, oder der Endwert nach der obigen Berechnung begrenzt werden.
Visualisierung
Zunächst ein par Bildschirmaufnahmen von ein und der selben Visualisierung die sich durch die eingespeisten Daten stetig ändert. Momentan ist es noch so, dass sich vor Ort von einem auf den anderen Moment nicht viel regt. Das liegt daran dass unsere live ausgelesenen Daten sich auch nicht von einem auf den anderen Moment drastisch verändern. Es ist eine aus der Realität übersetzte Darstellung. Über längere Zeit hinweg sieht man deutliche Unterschiede, die uns die künstlerische Intelligenz geschenkt hat:
Das Projekt trägt den Untertitel "vernetzte Kommunikationsschichten". Das bedeutet überwiegend den Austausch über unterschiedliche technische Sprachen. Dieser Austausch ist nur mit Schnittstellen möglich die den Inhalt von einer Sprache in die andere übersetzen. Um eine kunstvolle Visualisierung zu erzeugen, haben wir eine weitere imaginäre Ebene erschaffen auf der sich die Visualisierung ausdrückt.
Diese Imaginäre Ebene ist ein Konstrukt aus verhaltenstypischen menschlichen Beobachtungen in Bezug auf die einzelnen Bereiche der erfassten Daten. Als Beispiel das Wetter: Scheint die Sonne und es ist Warm, gehen Menschen raus. Es ergeben sich Konversationen, die aus rein zufälligen Begegnungen verursacht werden. Imaginär ist hier die "Verbindung" die zwischen zwei sich treffenden Menschen entsteht. Betrachtet man die Anzahl der Menschen, ergibt sich ein Höherer Wert bei steigender Temperatur bis ca. 30C° und ein sinkender bei höheren Temperaturen, sowie einem sinkenden Wert bei niedrigeren Temperaturen als 5C°.
Dieses Verhalten kann man szenisch nachstellen. Anstatt Menschen nehmen wir Objekte mit der Bezeichnung Kenyanthropus und stellen diese als simple Punkte dar. Zunächst erstellen wir eine Zeichenfläche. Die Zeichenfläche entspricht der Größe des Monitors vor euch. Die Punkte bewegen sich linear durch die Zeichenfläche, jeder Punkt in seine eigene Richtung. Die Punkte, die sich annähern, treten in Konversation miteinander. Das visualisieren wir mit einer Linie, die sie verbindet.
Als nächstes definieren wir den Konversations-Startwert, also den Wert der Entfernung ab dem die Punkte sich verbinden sollen. Sagen wir mal 100 Pixel. Wir schicken die Punkte los und sie bewegen sich kontinuierlich in eine Richtung. Sobald die Entfernung von 100 Pixeln unterschritten wird, treten sie in eine imaginäre Konversation. Diese wird nun durch eine Linie dargestellt, die beide Punkte verbindet.
Danach verlassen Sie den Konversationsbereich und die Verbindung löst sich wieder. Die Elemente in diesem Visualisierungsentwurf bieten einige Faktoren, die beeinflusst werden können:
- Anzahl der Punkte
- Form und Farbe der Punkte
- Geschwindigkeit der Punkte
- Mindestentfernung der entstehenden Verbindung
- Form und Farbe der Verbindung
Auf diesem Entwurf basiert die Endgültige Visualisierung. Dabei wird sie von den Daten nicht nur beeinflusst sondern komplett generiert. Folgend ein par Berechnungen aus dem Programmcode. Hier im ersten Beispiel ist es noch simpel - der Punktumfang wird festgelegt.
if (luftdruck > 980){
balldicke = 2;
if (luftdruck > 985){
balldicke = 3;
if (luftdruck > 990){
balldicke = 5;
if (luftdruck > 995){
balldicke = 7;
if (luftdruck > 1000){
balldicke = 8;
if (luftdruck > 1005){
balldicke = 10;
if (luftdruck > 1010){
balldicke = 12;
if (luftdruck > 1015){
balldicke = 17;
if (luftdruck > 1020){
balldicke = 23;
if (luftdruck > 1025){
balldicke = 28;
if (luftdruck > 1030){
balldicke = 32;
if (luftdruck > 1035){
balldicke = 36;
if (luftdruck > 1040){
balldicke = 46;
}
}
}
}
}
}
}
}
}
}
}
}
}Bei den Verbindungen zwischen den Punkten wird es schon etwas anspruchsvoller. Hier haben wir das Programm so geschrieben dass die Verbindungen nicht nur eine lineare Linie zwischen zwei Punkten ziehen, sondern mittels Bezier-Kurve dargestellt werden. Details zu dieser Kurve kommen weiter unten. Es gibt eine Grundverbiegung die durch die Anzahl der eingeloggten Geräte verursacht wird. Die Linie wird noch zusätzlich am ersten Bezier-Kontrollpunkt verzogen, umso höher der Börsenkurs von Gold ist.
Der Grund dieser Berechnung basiert auf dem Szenario die Kenyanthropus würden Arbeiten und leben, ungefähr so wie Menschen. Ihre Arbeit übt eine Grundlast auf die Konversation im direkten Umfeld aus. In unserem Szenario gehen wir weiter davon aus, dass es sich um eine harte Arbeit handelt, die auch Körperlich anspruchsvoll ist. Die Verbindungen, welche sich auf die Konversationen beziehen, werden also leicht beeinflusst. Drastisch wird diese durch eine Überarbeitung, in unserem Beispiel durch einen extrem steigenden Börsenkurs.
var kurve_1 = eingeloggt*3;
var kurve_2 = eingeloggt*(-3);
if (dax_halbleiter > 2){
var kurvenverzerrer = dax_halbleiter*100;
}
if (dax_halbleiter > 3){
var kurvenverzerrer = dax_halbleiter*300;
}Und nun die Erstellung der Bezierkurve zwischen zwei Punkten.
ctx.bezierCurveTo(balls[j].x+kurve_1, balls[j].y+kurve_2, balls[j].x+kurvenverzerrer, balls[j].y, balls[j].x, balls[j].y);Ein Abschnitt über Bezierkurven würde hier den Rahmen sprengen. Darum nur ein kurzes externes Video, damit sie sich ein Bild davon machen können worum es hier geht:
autor: https://commons.wikimedia.org/wiki/User:Bert_Niehaus
Durch die Daten werden alle Grundlegenden Faktoren der Visualisierung generiert. Die Farbe der Zeichenfläche, die einen linearen Farbverlauf bildet der sich überwiegend aus den Temperaturdaten ergibt, wird zum Großteil durch die Anzahl Lokal eingeloggter Geräte beeinflusst. Wird es kälter, wird es bläulicher, sind wenig Geräte da, gibt es weniger Kenyanthropus und die Farbe wird insgesamt Blasser. Sind mehr Geräte eingeloggt, bedeutet das automatisch dass auch mehr Menschen vor Ort sind, so werden die Farben gleich Knalliger. Die Punktgröße basiert wie oben beschrieben maßgeblich auf dem Luftdruck. Die Geschwindigkeit der Punkte stagniert gegen 0C°, wird es wärmer, wird es auch lebendiger und schneller, bis 100C°, dann fangen sie förmlich an zu kochen, aber ab 30C° aufwärts verschwinden die Kenyanthropus nach und nach da es ihnen zu heiß wird. Die Berechnungen beeinflussen sich durch viele viele kleine Details.
Der Raspberry Pi4 ist in den Clubtelefonen installiert. Eine weitere Aufgabe des Einplatinencomputers ist auch die Steuerung des Kollektivmonitors und die Funktion des Telefons. Mehr dazu findet ihr hier: