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. FTI Touristik GmbH, München
  2. ING-DiBa AG, Nürnberg
  3. Bundeskriminalamt, Wiesbaden
  4. Robert Bosch GmbH, Stuttgart


Anzeige
Hardware-Angebote
  1. ab 799,90€

Folgen Sie uns
       


  1. Minecraft

    Eine Server-Farm für (fast) alle Klötzchenbauer

  2. Kabelnetz

    Unitymedia bringt neue Connect App, Booster und Sprachsuche

  3. PowerVR 9XE/9XM und PowerVR 2NX

    Imagination Technologies bringt eigenen AI-Beschleuniger

  4. Auslastung

    Wenn es Abend wird im Kabelnetz

  5. Milliarden-Deal

    Google kauft Teile der HTC-Smartphone-Sparte

  6. MPEG

    H.265-Nachfolger kann 30 bis 60 Prozent Verbesserung bringen

  7. Liberty Global

    Giga-Standard Docsis 3.1 kommt im ersten Quartal 2018

  8. Apache-Sicherheitslücke

    Optionsbleed bereits 2014 entdeckt und übersehen

  9. Tianhe-2A

    Zweitschnellster Supercomputer wird doppelt so flott

  10. Autonomes Fahren

    Japan testet fahrerlosen Bus auf dem Land



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Apples iPhone X in der Analyse: Ein iPhone voller interessanter Herausforderungen
Apples iPhone X in der Analyse
Ein iPhone voller interessanter Herausforderungen
  1. Face ID Apple erlaubt nur ein Gesicht pro iPhone X
  2. iPhone X Apples iPhone mit randlosem OLED-Display kostet 1.150 Euro
  3. Apple iPhone 8 und iPhone 8 Plus lassen sich drahtlos laden

Metroid Samus Returns im Kurztest: Rückkehr der gelenkigen Kopfgeldjägerin
Metroid Samus Returns im Kurztest
Rückkehr der gelenkigen Kopfgeldjägerin
  1. Doom, Wolfenstein, Minecraft Nintendo kriegt große Namen
  2. Nintendo Das NES Classic Mini kommt 2018 noch einmal auf den Markt
  3. Nintendo Mario verlegt keine Rohre mehr

Galaxy Note 8 im Test: Samsungs teure Dual-Kamera-Premiere
Galaxy Note 8 im Test
Samsungs teure Dual-Kamera-Premiere
  1. Galaxy S8 und Note 8 Bixby-Button lässt sich teilweise deaktivieren
  2. Videos Youtube bringt HDR auf Smartphones
  3. Galaxy Note 8 im Hands on Auch das Galaxy Note sieht jetzt doppelt - für 1.000 Euro

  1. Es wird wie in der Autoindustrie nichts passieren

    trolling3r | 11:04

  2. natürlich ist das sinnvoll

    Pecker | 11:02

  3. Re: 1. Eindruck: Vergleich HEVC/AV1

    PaulchenPanther | 11:02

  4. Re: iCloud Backup wurde zum 3. Mal wieder aktiviert

    Niaxa | 11:02

  5. Re: Ein Beitrag voller Grenzfälle

    as (Golem.de) | 11:01


  1. 10:03

  2. 10:00

  3. 09:00

  4. 08:00

  5. 07:10

  6. 07:00

  7. 18:10

  8. 17:45


  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