Projets

[MP01c] Mon Curriculum Vitaminé

Objectifs :

Réaliser une animation interactive sous Processing JS et l'insérer dans votre CV html

Critères d'évaluation :

C1.2 Détailler ce qu'effectue tout ou partie d'un programme , l'enchaînement des événements qui réalisent la fonction attendue par un programme

C2.3 Développer un programme

Lectures et travail demandés :

Canvas et Processing

La balise <canvas> fait partie de la spécification du langage HTML 5 (bien que déjà introduite de manière non standard dans HTML 4). Utilisée avec du code javascript, elle permet d'insérer des graphiques dynamiques dans une page web. Elle peut être vue comme une alternative "non propriétaire" au Flash. Pour résumer, la balise canvas crée une surface de dessin de taille fixe sur votre page dans laquelle du code javascript permettra d'animer des objets graphiques. Vous allez utiliser cette balise afin d’insérer une animation que vous aurez codée en Processing dans un fichier texte d'extension ".pde". C'est grace à l'appel de la librairie javascript "processing.js" que votre navigateur pourra interpréter le code Processing de votre animation.

Exemple d'animations ProcessingJS : animation spider animation ball
Exemple d'intégration dans une page HTML : cv_spider

Comment insérer le code Processing dans une page HTML ?

1) En insérant un appel à la librairie processing.js à l'aide d'un lien :

<script src="processing-1.4.1.min.js"></script>
  • Vous pouvez aussi trouver ce fichier à l’adresse suivante : http://processingjs.org/download
  • L'appel à cette librairie javascript doit se situé, de préférence, dans le header de votre page.

2)  En insérant ensuite la balise canvas  :

<canvas id="mon_animation" data-processing-sources="mon_animation.pde"
 width="400" height="200"> </canvas>
  • Cette balise permet de créer un cadre  de dimension 400x200 pixels, dans le lequel se déroulera votre animation.
  • Elle fait ici appel au code du fichier  mon_animation.pde (code processing.js).
  • Il est également possible d'intégrer directement votre code dans votre page à l'aide d'une balise <javascript>.

Remarque : si les attributs width et height ne sont pas renseignés, la balise canvas prendra les dimensions 300px de largeur et 150px de hauteur.

Pour simplifier et automatiser ces deux étapes, l'EDI Processing dispose d'un mode javascript :

Dans ce mode, le menu "fichier/export" va créer un dossier "web-export" contenant 3 fichiers :

  • le code source de votre animation :  mon_animation.pde,
  • la librairie javascript : processing.js
  • et une page hmtl  qui fera les liens vers ces deux derniers fichiers.

À vos claviers !

 1. Réaliser votre propre animation Processing en utilisant le mode Javascript de l'EDI

2. Insérer votre animation dans votre CV HTML (situé dans votre espace de publication web atelier data) à l'aide d'une balise canvas (voir exemples)

Ressources :