• Porteur(s) du projet : Fannie Chanavat
• Date : 14/01/2019
• Licence : libre !
• Contexte : Rendu semestre 1

http://www.tonerkebab.fr/wiki/doku.php/wiki:tutoriels:processing_3:processing_3 https://www.flossmanualsfr.net/media/files/processing/processing.web.pdf

Importer des images dans Processing
Redimensionner les images
Importer du texte dans processing
Faire bouger le texte avec la boucle “if”
Créer une classe avec des images

Processing

On va rajouter des animation autour d'une peinture. Pour cela nous allons utiliser un projecteur pour projeter l'animation. Le but de cette animation est de montrer les différences entre une conversation par textos et une conversation orale.
La question se pose : Une conversation par texto est-elle aussi sensible qu'une conversation orale ?
Quelles sont les différences et les similitudes?

Cette animation va donc comporter deux parties qui auront néanmoins un lien entre elles
- La première :
* Des Image qui apparaissent au fur et à mesure ( = elle montre les réaction des personnes qui parlent, la spontanéité).
* Du texte qui s'affiche comme des sous titres ( = qui rendent compte des paroles de chaque personnages, ils fusent et témoignent de la vitesse de captation de l'information dans un discours oral )
La conversation orale est matérialisée par un clic de souris

- La deuxième :
* Du texte statique (= l'affichage des textos sur le téléphone : on peut revenir dessus et préparer sa réponse)
* Des images de “messages” qui apparaissent et se déplacent (= elles témoignent de la vitesse d'arriver du message et de sa réponse)
La conversation texto est matérialisée par un clique de clavier

Entre les deux partie on retrouve un élément qui fait le lien. Malgré la différence de média, la conversation quelle soit numérique ou orale reste sensible. On peut faire interagir les partie entre elle en appuyant sur la souris (partie orale) ou le clavier (partie texto)

On télécharge les images en les glissant du dossier source sur la fenêtre Processing, en faisant cela nous allons créer un dossier avec des datas. Le fichier data comporte tous les éléments externes (image, vidéo, son) que nous allons utiliser dans le code.

POUR COMMENCER

Ici on créer les lignes de codes qui nous servirons tout au long du codes et qui permettent aux objets d'interagir. Ce sont en quelque sorte les invariants.

// Attributs
int v; // variable mousepressed
int e= 0; //variable keypressed

// Void Setup () {
size(1600, 900); //la taille de l'écran
}

// Void Draw () {
background(#FFFFFF); //couleur du fond

void mousePressed() { // animation avec la souris
  v+=1;               // on rajoute 1 à la variable afin de créer un ordre d'apparition lors de l'utilisation de la souris
}

void keyPressed() { //animation avec la souris
  e += 1; // on rajoute 1 à variables afin de créer un ordre d'apparition lors de l'utilisation de la souris
}
}

IMPORTER DES IMAGES:

Ici on va importer des images et les faire apparaître à l'écran grâce à la souris

// Attributs 
int x; //position x de l'image
int y; // position y de l'image 
int a = 318; //longueur de l'image
int b = 128; //largeur de l'image
PImage photo; //créer la classe de l'image 1 qui nous permet ensuite de la modifier
PImage photo1; //créer la classe de l'image 2 qui nous permet ensuite de la modifier

// Dans le set up on instancie l'image (qui se trouve dans le dossier data)
void draw () {
size(1600, 900); // taille de l'écran
photo1 = loadImage("1.jpg"); // image "1.jpg"
photo2 = loadImage("2.jpg"); // image "2.jpg"
}

// Dans le void draw on fait vivre l'image

void draw () {

image(); //appeler les actions de l'image1
image1(); //appeler les actions de l'image2 


void image() { // FAIRE bouger l'image
  if (v>0) {
    image(photo1, 80, 138, a, b);
    
}

void image2() { // FAIRE bouger l'image
  if (v>1) {
    image(photo2, 700, 276, a, b);
    fill(0, 0, 0, 120) // Le rectangle sera noir avec de la transparance
    rect(80, 138, 398, 138); //afficher un rectangle pour cacher l'image d'avant
  }
}

IMPORTER DES TEXTES:

Attention ce code permet d'utiliser la boucle “pour” il est intéressant si nous n'avons pas beaucoup de texte sinon il est préférable d'utiliser une classe.

//Attributs
int g;     //position x du texte1 
int f = 300 ;  //position y du texte1
int j; //position x du texte2
int h = 435; //position y du texte2 

//void draw

texte(); //appeler le void du texte1
texte1(); //appeler le void du texte2

void texte() {  // faire apparaitre et avancer le texte 
  if (v>0) {    //le texte 1 apparaît en même temps que l'image 1 
    fill(#FFF300); //ajouter de la couleur au texte (ici jaune)
    text("Il a carrément baissé sont froc il l'a sorti genre regardes ce petit oiseau ", g*-1, f); 
//incrémentation du texte, grâce à la variable g le texte part de la droite de l'écran  
    g+=2; //le texte se déplace de 2 pixels de droite à gauche 
  }
} 

void texte1() { //FAIRE APPARAÎTRE ET BOUGER LE TEXTE 2
  if (v>1) {   //le texte 2 apparaît en même temps que l'image 2
    fill(#F002D8); //ajouter une couleur au texte (ici rose)
    text("alors tu as couché avec ce type ?", j, h); 
//incrémentation du texte, grâce à la variable j, le texte s'affiche à gauche
    j+=2; //le texte se déplace de 2 pixels de droite à gauche
  }
}

UTILISER UNE CLASSE AVEC DES IMAGES:

Pour fabriquer la classe nous allons ouvrir une autre fenêtre que nous appelons “class_telephone” :
Les attributs de la classe : position x, position y, déplacement x, déplacement y, string (pour nommer l'image), PImage (pour importer l'image).
La méthode de l'image : Afficher et faire avancer l'image dans l'espace.

 

class téléphone extends PImage {
  // attributs
  int x; // position x de l'image
  int y; // position y de l'image
  int dx; // déplacement x de l'image
  int dy; // déplacement y de l'image
  PImage tel; 
  String n; // nom du fichier de l'image

  // constructeur 
  rectangle(int _x, int _y, int _dx, int _dy, String _n) {
    x = _x; 
    y = _y;
    dx = _dx;
    dy = _dy;
    n= _n;
    tel = loadImage(_n);
  }


  // méthodes
  // afficher l'image
  void afficher() {
    image(tel, x, y, dx, dy);  
  }

  // faire avancer l'image
  void avancer() { 
    if (y<700) { //l'image s'arrête dans l'écran
    y++; // déplacement verticale de l'image
    x++; // déplacement horizontale de l'image

Nous retournons ensuite dans la première fenêtre

//instancie l'objet donné naissance à l'objet/créer de l'espace mémoire
téléphone [] téléphone= new téléphone[nb];

//dans les attributs 
int nb = 9; //nombres d'images

// dans le void setup 
//créer une nouvelle image 
for (int i = 0; i<nb; i++) { //la variable i permet de gérer le nombre d'image
//instanciation des images et appel au constructeur : leurs tailles seront les mêmes mais elles se déplaceront aléatoirement dans l'écran grâce à la fonction random.
    téléphone[i] = new téléphone(100, 100, floor(random(30)), floor(random(30)), "2.jpg"); 
  }
} 

// Dans le voiddraw

if (e>2) { //afficher une image par keypressed
    for (int i = 2; i<nb; i++) { //touche du clavier
      rectangle[i].afficher();
      rectangle[i].avancer();
      // on rajoute des actions à la classe qui apparaissent en même temps que l'image
      textSize(20); //taille du texte
      fill(#050000); // couleur du texte
      text("- Alors tu as couché avec ce type ?", x*0, 790); //Afficher du texte

if (e>1) { //afficher une image par keypressed
    for (int i = 2; i<nb; i++) { //touche du clavier
      rectangle[i].afficher();
      rectangle[i].avancer();
      textSize(20); //taille du texte
      fill(#050000); // couleur du texte
      text("- Bah évidement, je viens de te dire que c'est un photographe super connu", x*0,820); //Afficher du texte
    }
  }
  
  if (e>0) {  //afficher 1 image par keypressed 
    for (int i = 0; i<nb; i++) { 
      rectangle[i].afficher();
      rectangle[i].avancer();
       textSize(50);  //taille du texte 
       fill(#F700CB);  // couleur du texte
    text("Connasse.", 700, y); //texte et position dans l'écran
   if (y<870) { //Le texte s’arrête en bas de l'écran 
     y++; //déplacer le texte verticalement 
   }
    
    }
}