Article

[ Article ] dans Jeux indé, Phaser.js

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 […]

Le 03/05/2016.

Post-it

[ 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 : […]

Le 18/11/2015.

Post-it

[ Post-it ] dans P5.JS, Responsive

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 […]

Le 04/11/2015.

Post-it

[ 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 […]

Le 02/04/2015.

Article

[ 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 […]

Le 02/03/2015.

Article

[ 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 […]

Le 18/02/2015.

Article

[ Article ] dans Processing.JS

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 […]

Le 26/02/2014.

Article

[ 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 [ […]

Le 29/01/2014.

Article

[ Article ] dans Raspberry PI

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 […]

Le 06/09/2013.

Article

[ Article ] dans Processing.JS

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() […]

Le 11/06/2013.

Article

[ Article ] dans Processing.JS

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 […]

Le 10/06/2013.

Article

[ Article ] dans Processing.JS

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 […]

Le 10/06/2013.

Article

[ Article ] dans Processing, Processing.JS

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 […]

Le 06/06/2013.

Article

[ 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 […]

Le 18/12/2012.

Article

[ Article ] dans Processing.JS

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, […]

Le 24/01/2012.

Article

[ Article ] dans Processing.JS

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 […]

Le 19/01/2012.

Article

[ Article ] dans Processing.JS

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 […]

Le 17/01/2012.

Article

[ Article ] dans Processing.JS

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 […]

Le 13/01/2012.

Article

[ Article ] dans Processing.JS

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 […]

Le 11/01/2012.

Article

[ Article ] dans Processing.JS

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 […]

Le 09/01/2012.