TP2-Annexe2

TP HTML n°2 : Intégration d'un programme
Processing dans une page web
1°) Installer Processing sur votre ordinateur
Rendez-vous à l'adresse http://processing.org et cliquez sur le bouton Download puis activez l'option No donation (à
moins que vous vous sentiez d'humeur généreuse!). S'affiche alors la page qui vous permet de sélectionner la version de
Processing à télécharger selon votre système d'exploitation : Windows, MacOSX ou Linux. Au moment où j'écris ce
tutoriel, il s'agit de la version 2.0.2.
Vous pouvez d'ores et déjà lire et exécuter vos programmes sur votre ordinateur mais il est nécessaire d'installer
quelques compléments pour être vraiment complet.
2°) Installation de modes supplémentaires
Par défaut, Processing fonctionne en mode Java qui est le mode que vous utiliserez la plupart du temps pour
programmer et pour compiler/exécuter votre programme. Mais il existe d'autres modes bien pratiques qui vous seront
utiles. Cependant, il ne sont pas intégrés dans l'installation de base de Processing et il faut donc les ajouter ensuite.
Pour savoir dans quel mode vous fonctionnez, il suffit de regarder en haut à droite de la fenêtre de Processing : pour
l'instant, il doit être indiqué Java.
Vous allez installer deux modes supplémentaires : le mode javascript qui permettra de générer du code qui sera facile à
intégrer dans votre page web et le mode Android qui vous permettra, si vous le désirer, d'exécuter vos programmes sur
votre téléphone portable, par exemple.
Le CSS – Intégration d'un programme Processing dans une page web n°1/2
Pour installer le mode désiré, c'est très simple : cliquez sur Java et un
menu va s'ouvrir. Cliquez ensuite sur Add mode et une fenêtre
apparaîtra qui vous permettra de sélectionner le mode à installer. Il
ne vous reste plus qu'à suivre les instructions.
3°) Intégration d'un programme Processing dans votre page web
Le mode javascript permet très facilement, en deux clics, de générer le code nécessaire à l'intégration de tous vos
programmes Processing dans votre page web. Voici comment s'y prendre :
● Une fois votre programme terminé et fonctionnel,
cliquez sur la cellule en haut à droite de la fenêtre de
Processing pour passer en mode Javascript.
● Cliquez ensuite sur l'icône Export for web qui se
trouve tout à droite de la barre d'icônes.
● Dans la fenêtre qui s'ouvre alors se trouvent les
fichiers générés automatiquement et, en particulier, le
fichier index.html que vous pourrez modifier à votre
convenance pour éventuellement modifier son aspect
graphique.
Attention : pour que tout fonctionne correctement, les
trois fichiers générés doivent être placés dans le même
dossier. Il est également fortement recommandé d'utiliser
Firefox pour l'affichage.
Exemple d'affichage obtenu avec le mode Javascript.
Le CSS – Intégration d'un programme Processing dans une page web n°2/2