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

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

Article

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

Lire la suite Lire la suite

Le 05 / 01 / 2012

Article

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

Lire la suite Lire la suite

Le 20 / 12 / 2011

Article

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

Lire la suite Lire la suite

Le 20 / 12 / 2011

Enregistrer