Projets

[MP01b] Animation sous Processing

Objectifs :

Cette activité à pour objectif de prendre en main l'EDI Processing à travers l'analyse de petits programmes pour enfin réaliser sa propre animation interactive.

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 une interface logicielle , un programme.

C3.3 Maîtriser l'utilisation d'outils numériques collaboratifs

Lectures et travail demandés :

Introduction :

Processing est environnement de programmation « open source » aux multiples applications : image, son, applications Web et sur téléphones mobiles, conception d'objets électroniques interactifs. Initialement développé pour servir de portfolio informatique et enseigner les principes de base de la programmation dans un contexte visuel, Processing s'est développé pour devenir un véritable "couteau suisse" de la programmation. Aujourd'hui, Processing fédère une forte communauté d'utilisateurs professionnels et amateurs : artistes, graphistes, vidéastes, typographes, architectes, web designers et designers en général.

Présentation de l’EDI Processing : 

L'interface d'utilisation de Processing est composée de deux fenêtres distinctes : la fenêtre principale dans laquelle vous allez créer votre projet et la fenêtre de visualisation dans laquelle vos créations (dessins, animations, vidéos) apparaissent.

On trouve plus précisément les éléments suivants dans l'interface :

1.  Barre d'actions

2.  Barre d'onglets

3.  Zone d'édition (pour y saisir votre programme)

4.  Console (destinée aux tests et messages d'erreur)

5.  Fenêtre de visualisation (espace de dessin)

6.  Barre de menu (non représentée sur la copie d'écran)


Le dossier de travail

C'est le dossier dans lequel seront enregistrés les sketchs et les librairies (des modules externes proposant des fonctionnalités supplémentaires). Par défaut ce dossier se nomme Processing et se trouve dans Mes Documents (sous Windows). Pour modifier ce dossier, allez dans le menu Files > Preferences. Dans la boîte de dialogue qui apparaît, cliquez sur Browse (parcourir) pour choisir le dossier qui vous convient.

Bases du langage

Processing utilise le langage Java pour créer vos programmes. Ce langage possède un certain nombre de règles de syntaxe :

  • Processing fait la différence entre les majuscules et les minuscules
  • A la fin de chaque instruction, vous devez mettre un « ; »
  • les caractères « // » permettent d'insérer un commentaire

Processing propose un grand nombre de fonctionnalités prédéfinies appelées méthodes : dessiner un rectangle, définir une couleur, calculer une racine carrée, etc :

La console (la zone 4 dans le schéma de l'interface) permet d'afficher du texte brut à des fins de test et de débogage (correction d'erreurs). Pour afficher quelque chose dans cette zone, il faut utiliser la méthode println();

Exemple :

println("Salut tout le monde!");

 

[P] Mon premier programme :

Un programme de base avec processing met toujours  en œuvre les méthodes setup() et draw(). Vous allez déterminer le rôle de ces deux principales méthodes :

1. Lancer processing et recopier le code suivant :

void setup() {
   println("Let's go!"); 
}

void draw(){
   println("Hello World !"); 
}

2. Lancer l’exécution du sketch et stopper aussi tôt. Observer le résultat dans la fenêtre de la console.

3. Déduire le fonctionnement des deux méthodes setup() et draw()

 

[P] Mon premier dessin :

1. Recopier le code suivant et éxécuter le  :

PImage isn;

void setup() {
   size(300, 300);
   isn = loadImage("http://isn.codelab.info/site/assets/files/1/isn.png");
   isn.resize(width, height);
}

void draw() {
   background(isn);
   fill(#3CFF03);
   stroke(0);
   ellipse(50, 50, 60, 60);
   fill(0,0,255);
   stroke(255,0,0);
   rect(100, 100, 80, 40);
}

2. Analyser et commenter ce programme.

3. Modifier le programme afin de :

  • changer l'image de fond.
  • changer la couleur de fond du cercle en rouge, sa bordure en blanc.
  • Déplacer le rectangle dans le coin en bas à droite.

[P] Ma première animation :

1. Recopier le code suivant et éxécuter le  :

void setup() {
  size(300, 300);
  background(0);
  frameRate(10);
}

void draw() {
  ellipse(random(300), random(300), 60, 60);
}

2. Analyser le et modifier le pour :

  • augmenter  la valeur du frameRate()
  • diminuer  la valeur du random()

3. Modifier l'animation en ajoutant une couleur de fond aléatoire au cercle.

[P] Ma première animation interactive :

1. Recopier le code suivant et éxécuter le programme :

void setup() {
  size(200, 200);
}

void draw() {
  background(102);
  fill(0,255,0);
  rectMode(CENTER);
  rect(mouseX, mouseY, 50, 50);
}

2. Analyser et commenter le.

3. Mofier le code afin de changer la couleur du rectangle si l'on clique ou non avec la souris :

 if(mousePressed) { ..... } else {...... }

[P] Pour aller plus loin !

Explorer (bidouiller!) les examples fournis par l'EDI Processing...

Ressources :