Article

Ma fille a 5 ans, et elle aimerait bien jouer à Mario comme son papa… Alors je profite de l’intérêt de mon stagiaire Jérémy pour le projet, et on est en train de fabriquer un jeu HTML5 pour apprendre aux petits à prendre en main progressivement une manette… dans mon cas une manette usb super […]

Lire la suite Lire la suite

Le 03 / 05 / 2016

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

Article

Dans Node.js

Node.js ça a l’air super, on m’a bien montré plein de trucs qui bouleversent le flux de travail habituel du web designer : compilation de fichiers sass compilation de fichiers coffeescript récupération des librairies Javascript sans aller les chercher manuellement séparation claire du code de développement et de production (minification automatique, etc) et bien d’autres […]

Lire la suite Lire la suite

Le 02 / 03 / 2015

Article

Dans Wordpress

Pour faire des blogs un peu spéciaux avec WordPress, il y a déjà pas mal de possibilités « classiques » : concevoir son propre template original en Php/HTML/CSS modifier le back-office (ajouter des champs par exmeple) grâce au plugin Advance Custom Fields pour WordPress Pour aller encore plus loin, voire créer des web-apps basées sur WordPress, il […]

Lire la suite Lire la suite

Le 18 / 02 / 2015

Article

Quel est le problème ? ProcessingJS c’est super, pour afficher un sketch Processing dans le navigateur. Mais dès qu’il s’agit d’intégrer un sketch dans un design un peu ambitieux, ça peut devenir nettement plus compliqué… Par défaut un sketch ProcessingJS n’est pas responsive, ce qui rend compliqué de l’afficher en plein écran. Par ailleurs si […]

Lire la suite Lire la suite

Le 26 / 02 / 2014

Article

Dans jQuery

  Oubliez les barres de scroll ! Scrollez n’importe quel contenu juste à la souris ou au doigt, sans aucun clic ! Une solution responsive ! Fonctionne très bien avec une grande image, et encore mieux avec n’importe quel contenu HTML de grande taille ! jquery-scrollmap-1.0.js [ 11 Ko – Lisible, non-compressé ] jquery-scrollmap-1.0.min.js [ […]

Lire la suite Lire la suite

Le 29 / 01 / 2014

Article

Edit 2016 : Tout ça n’est plus du tout d’actualité, Processing est maintenant téléchargeable en version ARM directement sur le site officiel. Il semble qu’on puisse même utiliser les GPIO via une librairie dédiée ! Que de bonheur en perpective ! [ Plus d’infos ici ]     Edit : Installer Processing sur Raspbian en […]

Lire la suite Lire la suite

Le 06 / 09 / 2013

Article

Dans l’article Pjs #7, il était question d’utiliser jQuery pour récupérer les événements souris quand Processing.js n’en est plus capable (avec une div devant la canvas par exemple). L’astuce consistait donc à intercepter la position de la souris via l’événément jQuery « mousemove, » et les clics via « mousedown » et « mouseup », pour les renvoyer sur les mousePressed() […]

Lire la suite Lire la suite

Le 11 / 06 / 2013

Article

Pour instancier un sketch Processing.js (c’est à dire lier une canvas html5 et la fonction principale de votre sketch via Processing.js), c’est simple et bien documenté sur le site Processing.js. Il suffit de faire : pCanvas = document.getElementById(« canvas1″); pjs = new Processing(pCanvas, pjsCore);   Sauf que : – je ne me souviens jamais de la […]

Lire la suite Lire la suite

Le 10 / 06 / 2013

Article

Update : on peut faire ça beaucoup plus simplement via : pjs.draw = function(){     // black background     // pjs.background(0);     // transparent background !     pjs.background(0, 0);     pjs.ellipse(250, 50, 100, 100); }; Le deuxième zéro étant l’alpha du background… comme indiqué dans la référence de Processing.js. Argh. Merci à Vincent Dubois @Vainzou […]

Lire la suite Lire la suite

Le 10 / 06 / 2013

Article

Dans 2 jours se tiendra à Rennes la 2ème édition de Processing Rennes ! L’occasion pour ceux que le sujet intéresse de : – s’initier à Processing le matin, en compagnie de Félicien Goguey et Thomas Meghe – s’initier à Processing.js + jQuery l’après-midi, en ma compagnie. Plus d’infos sur la page officielle : www.processing-rennes.com […]

Lire la suite Lire la suite

Le 06 / 06 / 2013

Article

Dans jQuery

jQuery UI Draggable c’est bien, mais ce n’est pas compatible mobile/tablette, et je dois toujours ajouter du code pour passer l’élément cliqué au premier plan (par exemple là).   jQuery easyDrag va mon loin que jQuery UI, mais il est plus facile à paramétrer et mieux adapté à une utilisation courante. Et c’est mon premier […]

Lire la suite Lire la suite

Le 18 / 12 / 2012

Article

Le site officiel de Processing.js est très imprécis sur la compatibilité des navigateurs, en particulier par rapport aux numéros de versions des navigateurs… Pour démarrer il convient donc de réunir des infos à jour sur le sujet. Le site CanIUse.com est très complet, et référence toutes les compatibilités de la plupart des balises HTML5 récentes, […]

Lire la suite Lire la suite

Le 24 / 01 / 2012

Article

Démo en image avec un travail de commande sympathique pour l’agence Kerozen…   Et un bonus, qui préfigure un prochain tuto sur les sprites animés !   Précharger les images avec Processing.js en « API Mode », c’est à dire « Full-Javascript », c’est un vrai truc de chaffouin :) Côté gestion des images, il faut d’abord comprendre que […]

Lire la suite Lire la suite

Le 19 / 01 / 2012

Article

Un nouvel écueil dans la mise en place d’un framework pjs+jquery+mootools+tweens cohérent… Pour afficher notre sketch en plein écran, et cumuler avec un contenu html par-dessus, on est obligé de placer une div « au-dessus » de la canvas pjs. Du coup, un problème inattendu se pose : on perd les clics et le mouseX/Y de processing […]

Lire la suite Lire la suite

Le 17 / 01 / 2012

Article

Arf… il y avait dans Processing une super fonction delay(), et elle n’est actuellement pas du tout supportée dans Processing.js… J’ai donc tâché de voir ce qu’on pouvait faire en Javascript pur, en particulier avec setTimeout(). Et bien non seulement setTimeout() permet de remplacer delay(), mais elle ouvre aussi des possibilités que je n’avais encore […]

Lire la suite Lire la suite

Le 13 / 01 / 2012

Article

En tant que Flasheur, j’ai pris des habitudes et pu expérimenter la puissance/souplesse des tweens, celles de greensock en particulier. Je n’envisageais donc pas de me lancer sérieusement dans Pjs si je n’avais pas la possibilité de trouver quelque chose de similaire… Ca tombe bien, remercions Michael Aufreiter qui a adapté les équations de Robert […]

Lire la suite Lire la suite

Le 11 / 01 / 2012

Article

Une des principales limitations de Processing.js (quel que soit le mode de publication choisi) c’est de ne pas pouvoir importer de librairies externes. Il y a quelques exceptions, comme les toxiclibs.js, ou Tween.lib (une librairie de tweens pour processing.js, je reviendrai sur le sujet dans un autre article), mais à l’heure actuelle ça reste très […]

Lire la suite Lire la suite

Le 09 / 01 / 2012