Post-it

Dans P5.JS

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).

 

Le 18 / 11 / 2015

Post-it

Le genre de truc qu’on a facilement envie de faire quand on se met à P5js, mais on ne sait pas trop par où commencer… et Google n’est pas d’une grande aide sur la question !

Et bien c’est possible !
Voici un exemple fonctionnel, et le zip avec la source de cet exemple.

P5js dispose des fonctions windowResized() et resizeCanvas(), et met aussi à disposition les variables windowWidth et windowHeight qui contiennent les dimensions de la fenêtre, à jour.

Pour superposer la canvas responsive et le html, l’astuce se trouve donc :

– dans le code HTML, où il faut mettre tout le contenu HTML dans une div principale (ici avec l’id « contenu »)

– dans la feuille de style

canvas { position:fixed; top:0; left:0; z-index:1; }
#contenu { position:relative; z-index:2; }

– dans le setup() du sketch :

createCanvas(windowWidth, windowHeight);

– et dans le corps du sketch en ajoutant un bloc

function windowResized() {
	resizeCanvas(windowWidth, windowHeight);
}

Et voilà !

Le 04 / 11 / 2015

Post-it

Dans P5.JS

Ca recommence !

Il y a pas mal de temps je m’étais heurté à cette question avec Processing.js

A l’époque la conclusion était toute simple :

background(0, 0);

Du coup re-belotte avec p5.js, sauf que ce coup-ci ça ne marche pas !
Ou plutôt si, ça fait un fond transparent, qui laisse bien visible les frames précédente :/

Du coup je reviens à la solution de Makio135, mais pas facile de trouver l’accès au « contexte » natif de la canvas…

Quelques recherches sur le forum p5.js, mais rien.
A croire que personne n’a essayé de faire un sketch transparent avec p5.js !

J’ai fini par aller faire un tour dans le code source de p5.js, et j’ai trouvé la réponse dans la fonction background() :

this.drawingContext

permet donc d’accéder au contexte de la canvas dans laquelle on travaille.

Voici donc la solution pour écraser les frames précédentes avec un fond transparent :

this.drawingContext.clearRect(0 , 0, width, height);

Et hop fond transparent !

PS : je suis aussi allé voir du côté de la fonction clear(), mais elle fait trop bien le boulot et plus ne s’affiche ensuite.

Le 02 / 04 / 2015