Abo
  • Services:
Anzeige
Pedalboard.js: Kreischende Gitarren im Browser
(Bild: Nico Ernst/Golem.de)

Gestensteuerung

Anzeige

So ganz hat uns aber auch die Tastatur- und Maussteuerung nicht überzeugt, wir mussten immer noch zu genau mit dem Finger "zielen".

Die Leap Motion hat trotz ihres moderaten Preises keinen Durchbruch für die Gestensteuerung am PC bedeutet. Trotzdem - oder deshalb - arbeitet das Unternehmen recht rührig an der Softwareunterstützung. So bietet die Leap Motion inzwischen eine Javascript-API für den Einsatz im Browser.

Und genau darauf wollen wir aufsetzen. Die Umsetzung einer Gestensteuerung ist darüber recht einfach. Dazu laden wir in unserem Skript zusätzlich noch die Leap-Motion-API. Die Aktivierung beschränkt sich auf wenige Zeilen Code:

  1. var leapController = new Leap.Controller({ enableGestures: true });
  2.  
  3. leapController.on( 'animationFrame' , function(frame) {
  4. // reagiere auf Gesten
  5. });
  6. leapController.connect();

Viel komplizierter ist es festzulegen, welche Hand-Interaktion wir benutzen wollen. Für die Umschaltung zwischen den Effekten ist ein Key- oder Screen-Tap geeignet. Für das Verringern und Erhöhen eines Parameterwertes wird es schwieriger.

Intuitiv liegt es nahe, Wischgesten nach links und rechts einzusetzen. In der Praxis erweist sich das aber als unpraktisch und zu ungenau, um einen bestimmten Wert festzulegen, insbesondere, wenn wir dabei eine Gitarre in der Hand halten. Zwar wäre es möglich, über die Low-Level-Methoden des Leap Motion und eigene Berechnungen Wischgesten genauer zu interpretieren, aber wir überlegten, ob es auch einfacher ginge.

Schließlich kamen wir tatsächlich auf eine einfache Lösung: Um einen Wert zu verringern, werden drei Finger gezeigt, zum Erhöhen fünf Finger. Damit umfasst die Gestenerkennung nur 13 Zeilen Code:

  1. if(frame.gestures.length) {
  2. var gesture = frame.gestures[0];
  3. if('keyTap' == gesture.type || 'screenTap' == gesture.type) {
  4. nextPedal();
  5. }
  6. } else {
  7. var finger = frame.fingers.length;
  8. if(3 == finger) {
  9. decrease();
  10. } else if(5 == finger) {
  11. increase();
  12. }
  13. }

Eine musikalische Revolution werden Pedalboard.js und Leap Motion vermutlich nicht auslösen. Aber es ist eine kleine Andeutung dessen, was heute schon mit nur wenigen Codezeilen in einem Browser möglich ist.

 Lärm aufgehübscht

eye home zur Startseite
Paykz0r 19. Dez 2013

ich Stimme dir bei Firefox leider absolut zu. aber ein html5 vide player Tag...

Crapple 19. Dez 2013

Man muss nur unter Develop->User Agent auf Chrome umstellen - zumindest bei pedals.io...

Realist_X 19. Dez 2013

Ja oder an einem PC :)

mw_blond 19. Dez 2013

... sagt alles.

Paykz0r 18. Dez 2013

eigentlich wären auch mod plug tracker ala s3m jetzt schon möglich. ist zwar nicht das...



Anzeige

Stellenmarkt
  1. Dataport, Hamburg, Altenholz bei Kiel
  2. Evangelischer Oberkirchenrat Stuttgart, Stuttgart
  3. Hornbach-Baumarkt-AG, Großraum Mannheim/Karlsruhe
  4. Capgemini Deutschland, verschiedene Standorte


Anzeige
Hardware-Angebote
  1. (reduzierte Überstände, Restposten & Co.)

Folgen Sie uns
       


  1. Hauptversammlung

    Rocket Internet will eine Bank sein

  2. Alphabet

    Google-Chef verdient 200 Millionen US-Dollar

  3. Analysepapier

    Facebook berichtet offiziell von staatlicher Desinformation

  4. Apple

    Qualcomm reduziert Prognose wegen zurückgehaltener Zahlungen

  5. Underground Actually Free

    Amazon beendet Programm mit komplett kostenlosen Apps

  6. Onlinelexikon

    Türkische Behörden sperren Zugang zu Wikipedia

  7. Straßenverkehr

    Elon Musk baut U-Bahn für Autos

  8. Die Woche im Video

    Mr. Robot und Ms MINT

  9. Spülbohrverfahren

    Deutsche Telekom "spült" ihre Glasfaserkabel in die Erde

  10. Privacy Phone

    John McAfee stellt fragwürdiges Smartphone vor



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Elektromobilität: Wie kommt der Strom in die Tiefgarage?
Elektromobilität
Wie kommt der Strom in die Tiefgarage?
  1. e.GO Life Elektroauto aus Deutschland für 15.900 Euro
  2. Elektroauto VW testet E-Trucks
  3. Elektroauto Opel Ampera-E kostet inklusive Prämie ab 34.950 Euro

In eigener Sache: Die Quanten kommen!
In eigener Sache
Die Quanten kommen!
  1. In eigener Sache Golem.de führt kostenpflichtige Links ein
  2. In eigener Sache Golem.de sucht Marketing Manager (w/m)
  3. In eigener Sache Golem.de geht auf Jobmessen

Snap Spectacles im Test: Das Brillen-Spektakel für Snapchat-Fans
Snap Spectacles im Test
Das Brillen-Spektakel für Snapchat-Fans
  1. Kamera Facebook macht schicke Bilder und löscht sie dann wieder
  2. Snap Spectacles Snap verkauft Sonnenbrille mit Kamera für 130 US-Dollar
  3. Soziales Netzwerk Snapchat geht an die Börse - und Google profitiert

  1. Re: Musk denkt letztlich verkehrspolitisch...

    Dadie | 14:48

  2. Wer kein Geld mehr hat macht ne Bank auf

    Mopsmelder500 | 14:44

  3. Re: an alle Debian Mitarbeiter ...

    ArcherV | 14:36

  4. Stichwort: Äpfel und Birnen vergleichen!

    xbutan | 14:29

  5. Re: Top stabile Server Distro

    ArcherV | 14:25


  1. 13:08

  2. 12:21

  3. 15:07

  4. 14:32

  5. 13:35

  6. 12:56

  7. 12:15

  8. 09:01


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel