Créer un projet processing.js

Voici un exemple détaillant la procédure à suivre afin de mettre en ligne un sketch Processing via Processing.js.

Pour s’executer sur le web, un projet Processing.js nécessite 3 fichiers minimum :

- votre code processing sous la forme d’un .pde ou d’un .pjs
- un fichier html, celui de la page accueillant votre sketch
- le fichier processing-x.x.x.js disponible sur le site de processing.js

Ce dernier fichier ( processing-x.x.x.js ) n’a nul besoin d’être modifié.

Le html a besoin de deux balises afin de relier d’une part le script processing-x.x.x.js et d’autre part votre projet. Voici ces balises :

<script type="text/javascript" src="processing-1.0.0.js"></script>
<canvas datasrc="example.pde" width="400" height="400"></canvas>

Remplacez example.pde par le nom de votre fichier .pde ainsi que les indication concernant la largeur et la hauteur ( traditionellement identiques à celles de votre .pde ).

Une fois ceci terminé, tous trois doivent être placés sur votre serveur ftp, au même niveau. Si, par habitude, vous placez le .pde dans un dossier du même nom comme le demande Processing premier du nom, pensez à indiquer l’adresse correcte du .pde dans le html. Mais je déconseille cette manipulation car elle posera problème par la suite lors de l’importation de fichiers (images, polices, etc.).

Télécharger le dossier vierge de base



Leave a Reply