J’essaie ici d’afficher un visuel écrit en processing (fichier .pde) tel quel sur mon site WordPress. J’utilise l’extension ProcessingJS for WordPress
Installer et activer l’extension
Installer et activer l’extension ProcessingJS for WordPress
Sous le nom de l’extension, dans la page des extensions, il y a un lien vers une page « instructions ». C’est là que j’ai copié puis collé les shortcodes à utiliser. Mais c’est la même chose que sur la page de présentation de l’extension.
Essai n°1 : taper le code directement dans le contenu WordPress
Je copie et colle ce qui est proposé par l’auteur de l’extension :
[pjs4wp] void setup(){
size(200, 200);
text(« Hello world! », 50, 50);
}
[/pjs4wp]
Et voilà le résultat, moche mais simple !
Essai n°2 : lire un fichier processing (.pde)
J’ai un fichier d’essai sollewitt4.pde. Je le renomme sollewitt4.js sans rien changer d’autre que le type de fichier (pde devient js).
Dans la bibliothèque de média, je charge ce fichier puis je note son url (https://knowledge.parcours-performance.com/wp-content/uploads/2017/11/sollewitt4.js).
Ensuite je saisis le shortcode suivant :
[pjs4wp url="/wp-content/uploads/2017/11/sollewitt4.js" bordercolor="#000"][/pjs4wp].Voici le résultat :
On voit que l’écran ne s’adapte pas à la page (pas responsive) – L’écran fait 1200 px par 800 px comme défini dans le sketch.
Avec un éditeur de texte type notepad++, je modifie donc la taille de l’écran défini dans setup, pour le ramener à 600px par 400 px, je charge le nouveau fichier dans les médias, sollewitt4-600-400.js et j’utilise le shortcode [pjs4wp url="/wp-content/uploads/2017/11/sollewitt4-600-400.js" bordercolor="#000"][/pjs4wp]
Et voilà !
Les limites de l’extension
L’écran de visualisation du sketch Processing ne paraît pas responsive, en tous cas pas lorsqu’il est défini en « dur », en disant explicitement size(1200, 800);
Si j’essaie en remplaçant la taille de l’écran par fullScreen();
Ca ne fonctionne pas du tout…
Donc pour l’instant les limites de cette extension sont :
- impossible d’utiliser une fenêtre responsive ;
- pas de possibilité d’avoir des fichiers associés au script.
Mais je suis déjà très contente d’obtenir ce résultat.
Je ferai d’autres essais ultérieurement.
