Road to Bachelor | Coding Schritt 2 – Processing
907
post-template-default,single,single-post,postid-907,single-format-standard,ajax_fade,page_not_loaded,,qode-title-hidden,qode-theme-ver-10.1,wpb-js-composer js-comp-ver-5.0.1,vc_responsive
Coding-2

Coding Schritt 2 – Processing

Die Variablen der »Datenerfassung« werden in grafische Formen mittels »Processing«1 übersetzt. Um eine Verbindung zwischen Javascript und Processing herzustellen wird »jQuery.WebSocket«2 verwendet. Dadurch besteht die Möglichkeit, Werte der Variablen permanent in Processing zu übertragen, um dort mit ihnen weiterzuarbeiten. Um die Messung der Variablen auf jeder beliebigen Website zu gewährleisten, mache ich mir das Mozilla Firefox AddOn »GreaseMonkey«3 zu Nutze. Dieses ermöglicht es für den betrachtenden Benutzer eigenes Javascript auf eine Website zu implementieren. Die Visualisierung selbst basiert auf einer Processing Library namens »Pixelflow«4 von Thomas Diewald, welche ich punktuell an meine Anforderungen anpassen werde. Im Folgenden möchte ich entscheidene Codeabschnitte hervorheben und sie genauer beschreiben.

 

Websocket

Zunächst einmal wird in Javascript das Websocket initiiert und ein Port festgelegt, auf welchem gesendet wird. In diesem Fall 8025. Die Werte aus Javascript werden immer in der gleichen Formatierung gesendet:

 

Wichtig dabei sind die Strichpunkte. In Processing teilt folgende Zeile Code anhand dieser Strichpunkte die gesendete Nachricht in ein Array auf. Die stetig gleiche Formatierung der Nachricht stellt sicher, dass auf der ersten Position immer die Art der Interaktion gesendet wird. Somit kann mit einer einfachen if-Funktion geprüft werden, welche Interaktion denn gerade gesendet wird. Je nachdem welche eben dieser Informationen gesendet werden, erhalten deklarierte Variablen in Processing den gesendeten Wert. Jener ergibt sich aus der Position im Array. Dieser Vorgang bildet die Basis für das weitere Vorgehen. Ab jetzt, kann mit sämtlichen Variablen, die in Javascript erfasst wurden auch in Processing gearbeitet werden.

 

Mauspfad und Anpassung

Kommen wir nun zu der eigentlichen grafischen Generierung in Processing. Folgender Code zeigt die Generierung des Mauspfades. Zunächst wird ein radius des Pfades festgelegt. Er bestimmt in welcher Breite die Partikel die Möglichkeit haben zu entstehen. Vscale legt fest wie stark die Bewegung andere bereits bestehende Partikel fluid beeinflusst. px und py legen die Koordinaten des Pfades fest. mouseCoordX und mouseCoordY sind die erwähnten gesendeten Variablen aus Javascript. BrowserHeight, BrowserWidth, viewport_h und viewport_w möchte ich genauer erläutern. Die Werte viewport_h und viewport_w entsprechen den von Processing ausgehenden Daten für die Fenstergröße der Visualisierung. BrowserHeight und BrowserWidth entsprechen dahingegen der Fenstergröße des aktuell verwendeten Browserfensters und werden ebenfalls vom Websocket gesendet. Um sicherzustellen, dass die Visualisierung unabhängig des Browserfensters funktioniert werden diese Werte in Relation gesetzt. Somit erhält man immer den relativen Wert der Koordinate zum Viewport. Hätte das Browserfenster beispielsweise ein Größenverhältnis von 1:1, das Fenster der Visualisierung jedoch 16:9, so würden die Koordinaten trotzdem proportional übertragen werden. Die Visualisierung verhält sich mit Hilfe dieser Methode sozusagen responsiv. Dies wird vor Allem bei der Feinjustierung in der Black Box eine Rolle spielen, da man dann die Freiheit hat, die Visualisierung perfekt an den Beamer anzupassen. fluid.addDensity und fluid.addVelocity legen dabei die physikalischen Werte für Dichte und Geschwindigkeit der generierten Partikel fest. Particels.spawn initiiert die Entstehung der Partikel.

Klick

Der Klick funktioniert ähnlich wie der Mauspfad. Jedoch mit dem wichtigen Unterschied, dass die Partikel statisch gespawnt werden und nicht in Bewegung sind, da fluid.addDensity und fluid.addVelocity bei der Generierung fehlen.

 

Inaktivität

Die Inaktivität wird ausgelöst, sobald der Benutzer mindestens zwei Sekunden keine Handlung durchführt. An der Mauskoordinate steigen Partikel auf. Hierbei wird zusätzlich der Faktor temperature genutzt. Er ist dafür zuständig, dass die Partikel während ihrer Entstehung aufsteigen. Dieser Faktor wird in Relation zur Standzeit gesetzt. Je länger die Standzeit dauert, desto stärker steigen die Partikel nach oben. Ebenso beeinflusst Dauer der Standzeit die Anzahl der generierten Partikel.

 

Scroll

Das Scrolling bewegt vorhandene Partikel im Umkreis von scrollDiff entsprechend der Scrollbewegung nach oben oder unten. Die Variable scrollDiff beschreibt den Unterschied zur letzten Scrollposition und somit die Stärke der Scrollbewegung. Je kraftvoller der Benutzer also scrollt, desto mehr Partikel werden bewegt. Zusätzlich wird geprüft, ob scrollDiff kleiner oder größer Null ist. Kleiner Null entspricht einer Scrollbewegung nach unten, größer Null dementsprechend nach oben. Abhängig davon pulsieren Partikel nach oben oder nach unten.

 

Tastatur

Den Code zur Visualisierung der Tasten möchte ich am Beispiel »e« erklären. Die Variable pressedKey beeinhaltet den gesendeten Wert aus Javascript. Die Position der Generierung ist abhängig der Anzahl der relevanten tasten in der Breite und in der Höhe. Mit anderen Worten: Die längste Zeile der Tastatur fasst 14 Buchstaben. Alle nötigen Tasten bauen sich in der Höhe in fünf Reihen auf. Der Buchstabe »e« ist der dritte Buchstabe in der Breite und befindet sich in der viert-obersten Zeile der Tastatur. Dementsprechend werden diese in Relation zu viewport_w und viewport_h gesetzt. Das Gleiche geschieht mit allen anderen Tasten auf Gleiche Weise.

 

Obstacles (Hindernisse)

Da die Visualisierung ein geschlossenes System darstellen soll, in dem spätere Interaktionen stets Vorangegangene beeinflussen können, ist es wichtig, dass jeder generierte Partikel dem System erhalten bleibt. Folgender Code erstellt ein pg_obstacles.rect. Ein 1px starkes Rechteck, welches sich genau an den Rahmen anpasst. Es dient als Hindernis, welches das Verflüchtigen der Partikel zum Rand verhindert. Es besitzt die gleiche Farbe, wie der Hintergrund, da es optisch kein Teil der Visualisierung ist. Es ist rein funktional.



 

Globale Werte und APM

Es gibt fünf globale Werte welche permanent das gesamte System beeinflussen. Die Geschwindigkeit (velocity), Dichte (density), Temperatur (temperature), Wirbligkeit (vorticity) und die Zeitschritte (timestep). Alle diese Faktoren besitzen beim Start der Anwendung einen festgelegten Wert und würden diesen auch behalten, wenn man ihn nicht verändern würde. An dieser Stelle wird der apm-Wert eingesetzt. Damit man wirklich einen Wert pro Minute erhält beeinflusst er erst nach 60 Sekunden die Geschwindigkeit der Partikel der gesamten Visualisierung.

 

Dieser Zustand des Codes ist noch nicht von Versuchen innerhalb der Black Box beeinflusst. Sobald bekannt ist, wie sich die Visualisierung in der Box entfaltet, möchte ich noch weitere Anpassungen vornehmen um das Gesamtbild optimal auf die Black Box abzustimmen.


https://processing.org/

https://github.com/clickalicious/jQuery.WebSocket

http://www.greasespot.net/

http://thomasdiewald.com/processing/libraries/pixelflow/

Keine Kommentare

Schreibe einen Kommentar