ButtonLab 2.1

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.

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.

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.

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