Head

[ Post-it ] dans P5.JS, le [ 18/11/2015 ]

Content

P5js dispose déjà d’une implémentation de l’accéléromètre et du gyroscope en natif, mais… ça ne marche pas bien sur mon téléphone.

Du coup je me propose d’utiliser Gyrojs, une petite librairie très efficace, que j’ai eu l’occasion de tester auparavant sans aucun problème.

Gyrojs s’occupe de récupérer pour vous accéléromètre et gyroscope, très simplement :

gyro.frequency = 10; // rafraichir 10 fois par secondes
gyro.startTracking(function(o) {
    // o.x, o.y, o.z for accelerometer
    // o.alpha, o.beta, o.gamma for gyro
});

Ensuite à vous d’utiliser les valeurs obtenues comme vous le souhaitez.

L’accéléromètre transmet les mouvements de l’appareil, mais la plupart du temps du temps c’est plutôt au gyroscope que vous voudrez vous intéresser (comme dans mon exemple).
Le gyoscope transmet l’inclinaison de l’appareil, c’est à dire les angles (x, y, z), la façon dont il est penché.

Voici une image qui explicite les différences entre alpha, gamma et beta.

Pour le gyroscope, les valeurs obtenues semblent être entre -180 et 180 (à vérifier), dans mon exemple je les divise par 50 pour obtenir une « force » appliquée à des bulles.

L’accéléromètre transmet les mouvements de l’appareil, mais la plupart du temps

Démo avec P5js, pour mobile ou tablette

Et le code source associé.

Dernier point : c’est super Gyrojs, mais je n’ai toujours pas trouvé le lien de téléchargement de la librairie !

J’ai fini par trouver quelque chose ici, et voici un lien direct vers la lib hébergé sur mon serveur (sans passer par le zip).