Oder Text markieren und Enter drücken…

Programmiersprachen 3

Tags
Backlinks
» Tags: "Programmiersprachen 3" is tagged as
» Backlinks: These Wikipages link to "Programmiersprachen 3"

In diesem kleinen Projekt ging es darum, wie man ein Balkendiagramm mit verschiedenen Filtern anlegt und wie die Daten dabei hinterlegt werden. Bei dem Übergang zwischen zwei Status wachsen beziehungsweise schrumpfen die einzelnen Balken mithilfe von TweenLite. 

Status1

 

Um nähere Informationen der Grafik abrufen zu können, entsteht bei einem MouseOver über die Balken eine Infobox auf. Die Datengrafik enthält keinen logischen Inhalt, sondern zeigt nur, mögliche Funktionen und deren Aufbereitung.

status3

 

//interaktive grafiken

//luisa.wentland@hfg-gmuend.de 

 

 

 

 

Der Code erkennt den vordersten Punkt (Finger) und gibt seine Position in seinen drei Koordinaten aus.

 

Kinecthack AS3

 

Um die Kinect zu lesen, muss zunächst die Kinect an Rechner und Strom angeschlossen werden. Anschließend muss das Programm flKinect gestartet werden, das ebenfalls im angehängten Ordner hinterlegt ist.

Dann kann die Gestures.swf gestartet werden. 

 

Derzeit ist das Programm so eingestellt, dass der Finger als roter Punkt dargestellt wird. Es kann aber leicht abgewandelt werden, indem man die Variablen im scanHandler verwendet.

 

Kinecthack for AS3

 

Cora Droysen von Hamilton, Ines Reichle

Flash lädt die Bilder die jeweils in individueller Originalgröße vorliegen, auf die Stage. Durch Masken werden die Bilder Rastertauglich gemacht.

Eine allgemeine Maske zeigt den Ausschnitt aus vielen maskierten Bildinhalten um ein Scrollen im Inhalt möglich zu machen.

Anwendung der Bildergalerie am Screen

Code I

Code II

 

//download:

//http://dl.dropbox.com/u/2231259/david_abele.zip

 

//david_abele

//pleasured to work with @david_nickel

Die Bedienung eines Buttons mithilfe eines Abstand Sensors unterscheidet sich in mehreren Punkten von der gewohnten Maus/Touch Interaktion.
Da es auf diesem Gebiet noch keine Standarts gibt, haben wir ein Button Labor für Abstandssensoren in Processing/Eclipse entwickelt. Hier lassen sich verschiedene Grundlegende Einstellungen untersuchen.
Dabei sind neben mehreren GUI Elementen auch eine Möglichkeit entstanden, wie der Mappingbefehl verändert werden kann um die Transition zwischen den Status genau

einstellen zu können.

Buttons einstellen

Die Kurven bestimmen, wie ein Status in den nächsten morpht. Diese Kurven lassen sich vollständig anpassen.

Wurden vier Status ausgewählt kann man sie im "Button testen" Modus ausprobieren.

Button testen

 

Im Folgenden wird erklärt, wie man solche Bezierkurven Funktionen erstellt.

Durch das verwenden der Bezier Kurve und der bezierpoint funktion kann der mapping befehl verändert werden. Im ButtonLab wurden immer zwei bezier Kurven hintereinander gelegt, um die Kurve genauer einstellen zu können. Das Prinzip sieht folgendermaßen aus.

Bezier mapping

float t = map ( input, inputLow, inputHigh, 0, 1 );
float x = bezierPoint( x1, x2, x3, x4, t );
float y = bezierPoint( y1, y2, y3, y4, t );

valueMap = map( y, y1, y2, targetValueLow, targetValueHigh );

 

 

Wenn man mehrere Bezier Kurven aneinander legt, muss man die gesamte Länge kennen, um gleichmäßig mappen zu können. Mit dieser Funktion kann man die ungefähre Länge einer Bezier Kurve berechnen.

Aus zwei aneinanderliegenden BezierKurven wird der Mittelpunkt berechnet. mX1 - mX2 und mX3 und mX4 sind die Start und Endpunkte der Kurven.

float l1 = getBezierLength(x1, y1, Acnx1, Acny1, Acnx2, Acny2, x2, y2);
float l2 = getBezierLength(x3, y3, Acnx3, Acny3, Acnx4, Acny4, x4, y4);
float l = l1 + l2;
         
         mX1 = map(x1,70,683,40,0 );
         mX4 = map(x4,70,683,40,0 );

         mX2 = map(l1,0,l,mX1,mX4 );
         mX3 = mX2;

 

// Die Länge wird annäherunsweise betimmt.

float getBezierLength(float x1, float y1, float ax1, float ay1, float ax2, float ay2, float x2, float y2) {
        float oldx = x1;
        float oldy = y1;
        float sum = 0;
       

// wird das maximum der for schleife erhöht, wird die Länge genauer berechnet
        for (int i = 1; i<=20; i++) {
            float t = map(i, 0,20, 0,1);
            float nextx = bezierPoint(x1, ax1, ax2, x2, t);
            float nexty = bezierPoint( y1, ay1, ay2, y2, t);
            sum += dist(oldx, oldy, nextx, nexty);
            oldx = nextx;
            oldy = nexty;
        }

        return sum;
       
    }

Eclipse

http://ig.hfg-gmuend.de/Members/antonio_kraemer/ButtonLab2.1.zip/view

http://ig.hfg-gmuend.de/Members/antonio_kraemer/GUIclasses.zip/view

Processing

http://ig.hfg-gmuend.de/Members/antonio_kraemer/mapCostum2.pde/view

http://ig.hfg-gmuend.de/Members/antonio_kraemer/lengthOFbezier.pde/view

 

//

antonio.kraemer@hfg

patric.sterrantino@hfg

marcel.mueller@hfg

im beispiel befindet sich eine weltkarte auf der 4 positionen angezeigt werden, die beim darübersliden auf der zeitleiste die jeweiligen informationen anzeigen.

zusätzlich gibt es rechts eine textanzeige in der man ablesen kann, wo man sich befindet.

 

man kann diesen slider für verschiedene projekte nutzen, da es ein simpler slider ist, welcher infos anzeigt und modifizierbar ist.

 

dieser code nutzt zusätzlich den tweenlite für as3 von greensock und ist in flash cs5 geschrieben.

 

weltkarte_neu

 

 

code