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

Article

[ Article ] dans Processing.JS

C’est une des premières choses que j’ai testé après avoir associé JQuery, MooTools et Pjs : « cette canvas au format limité c’est la plaie, je veux l’afficher pleine page ! » Alors j’ai testé plusieurs techniques, et ça ne s’est pas fait tout seul ! (j’aurais sans doute moins galéré si j’avais rencontré hascanvas.com plus tôt…) […]

Le 05/01/2012.

Article

[ Article ] dans Processing.JS

Processing.js est basé sur un schéma de fonctionnement linéaire du genre : Depuis Javascript, on va donc commander une canvas HTML5 par l’intermédiaire de Processing.js; ça marche bien, mais dans un seul sens… Il m’est tout de suite venu à l’esprit qu’en passsant en full-Javascript et en y ajoutant JQuery (et MooTools pour les classes), […]

Le 20/12/2011.

Article

[ Article ] dans Processing.JS

Premier problème pour utiliser Processing.js en « API mode » (full Javascript) : Où sont passées les classes de Processing ? La documentation officielle n’aborde même pas le sujet, et la démo s’en passe tout simplement… et impossible d’utiliser la déclaration d’une classe via l’objet canvas/processing.js, du genre canvas.class {…   Hors, Javascript ne propose aucun système […]

Le 20/12/2011.

Article

[ Article ] dans Processing.JS

Si vous arrivez sur cette page, c’est que vous connaissez sans doute Processing. Pour moi la découverte est très récente, j’ai fait mes premiers pas sur le sujet lors du workshop « Master Class » de Processing Rennes, les 4 et 5 novembre 2011. Une découverte enthousiasmante, puisque Processing me permettait enfin de réaliser des choses que […]

Le 20/12/2011.