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


  1. At this time it seems like Movable Type is the top blogging platform out there
    right now. (from what I’ve read) Is that what you are using on your blog?

  2. Olen Ishihara dit :

    Thankyou for this post, I am a big big fan of this internet site would like to go on updated.

  3. Alita Aull dit :

    Hey there would you mind letting me know which webhost you’re using? I’ve loaded your blog in 3 completely different internet browsers and I must say this blog loads a lot faster then most. Can you recommend a good hosting provider at a honest price? Thanks, I appreciate it!

  4. Real superb visual appeal on this website, I’d value it
    10.

  5. Like dit :

    Auto Like, auto liker, ZFN Liker, Autolike International, Autoliker, Photo Liker, autoliker, Status Liker, Auto Liker, Working Auto Liker, Increase Likes, Autoliker, auto like, Photo Auto Liker, autolike, Autolike, Status Auto Liker

  6. Like!! Really appreciate you sharing this blog post.Really thank you! Keep writing.

  7. Google dit :

    Please go to the sites we comply with, which includes this one particular, as it represents our picks through the web.

Leave a Reply