====== Les zones du cerveau et leur rôle : affiche interactive ======

  * Porteur(s) du projet : Océane Gardet-Pizzo
  * Date : 14/01/2019
  * Licence : libre !
  * Contexte : Cours de Processing avec Damien Muti

====== Intention ======

Voulant que mon macro projet de deuxième année s'inscrive dans une logique de vulgarisation médicale, j'ai souhaité que mon affiche interactive me permette dès maintenant de travailler dans ce type de démarche, à travers un support didactique. 
J'ai choisi de réaliser une affiche qui explique de manière très simplifiée comment se divisent les différentes zones qui composent notre cerveau et le rôle qu'elles jouent. Sur l'affiche, des boutons sont positionnés sur ces mêmes zones et lorsque l'on appuie sur l'un d'entre eux, une vidéo comprenant une animation et un texte explicatif se lance.

J'ai également choisi de proposer un jeu de mémoire. Parmi cinq cercles colorés, trois s'affichent dans un ordre aléatoire et l'utilisateur doit ensuite reconstituer cet ordre en appuyant sur les boutons correspondant (cette partie est en cours de programmation).

==== Affiche ====

{{ :wiki:projets:les-zones-du-cerveau:affiche.jpg?nolink&300 |}}


==== Animations ====

{{ :wiki:projets:les-zones-du-cerveau:largeur_temp.gif|}}
{{ :wiki:projets:les-zones-du-cerveau:largeur_occi.gif|}}
{{ :wiki:projets:les-zones-du-cerveau:largeur.gif|}}
{{ :wiki:projets:les-zones-du-cerveau:gif.gif|}}

==== Programme ====

<code>

// librairies
import processing.video.*; 

// variables globales
Movie vid;
cercle[] cercles; // déclaration du tableau de cercles
IntList selectionCercles; // numéro des cercles sélectionnés parmi l'ensemble {0,1,2,3,4}
int nbCerclesSelectionnes=3; // nb de cercles sélectionnés parmi la liste

// bouton video 
boolean video_active = false ;

void setup() {

  // paramètres d'affichage
  size(displayWidth, displayHeight); // affichage plein écran

  // création du tableau
  cercles = new cercle[5];

  // initialisation du tableau de cercles
  int dep =60; // nombre de pixels entre chaque cercle
  for (int i = 0; i<5; i++) { // créer cinq cercles
    cercles[i] = new cercle(color(#F38196), 900+i*dep, 600, i);
  }
  // couleur de chaque cercle
  cercles[1].c=color(#f0eb65);
  cercles[2].c=color(#67bf75);
  cercles[3].c=color(#ee3a43);
  cercles[4].c=color(#855098);
}

void draw() { 

  // paramètres d'affichage pendant la lecture des videos
  if (video_active) {
    image(vid, 0, 0);
  } else {
    background(255); // fond blanc

    // affichage des cinq cercles
    for (int i = 0; i<5; i++) {
      cercles[i].display();
    }
  }

  lancerJeu(3); 
}


void movieEvent(Movie movie) {
  vid.read();
}

</code>

Classe cercles

<code>

class cercle { 
  color c; // couleur
  float xpos; //position x
  float ypos; // position y
  float d; // diamètre
  int i; //indice du cercle

  // constructeur
  cercle(color tempC, float tempXpos, float tempYpos, int _i) { 
    c = tempC;
    xpos = tempXpos;
    ypos = tempYpos;
    d = 40;
    i = _i;
  }

  // affichage
  void display() {
    noStroke () ;
    fill (c) ;
    ellipse(xpos, ypos, d, d);
  }

  boolean isSelectionned() { // méthode qui permet de dire si on a cliqué sur un cercle
    float dist = sqrt(sq(xpos-mouseX)+sq(xpos-mouseY));// distance entre le centre du cercle et le cuseur de la souris
    boolean valeur=false;
    if (dist<d/2) {
      valeur = true;
    }
    return valeur;
  }
}

</code>

Gestion des vidéos

<code>

// Diffusion des videos
void keyPressed() {

  if (keyCode == UP) { // video 1
    if (video_active == false) { // la vidéo 1 ne tourne pas
      vid = new Movie(this, "Lobe frontal.mov"); // chargement de la video 1
      video_active = true;
      vid.loop(); // tant que la condition est respectée, la video tourne en boucle
    } else {
      vid.stop(); // arret de la video
      clear(); // la video disparait
      video_active = false;
    }
  } 

  if (keyCode == DOWN) { // video 2
    if (video_active == false) { // la vidéo 2 ne tourne pas
      vid = new Movie(this, "Lobe occipital.mov"); // chargement de la video 2
      video_active = true;
      vid.loop(); // la video tourne en boucle
    } else {
      vid.stop(); // arret de la video
      clear(); // la video disparait
      video_active = false;
    }
  }

  if (keyCode == RIGHT) { // video 3
    if (video_active == false) { // la vidéo 3 ne tourne pas
      vid = new Movie(this, "Lobe temporal.mov");  // chargement de la video 3
      video_active = true;
      vid.loop(); // la video tourne en boucle
    } else {
      vid.stop(); // arret de la video
      clear(); // la video disparait
      video_active = false;
    }
  }

  if (keyCode == LEFT) { // video 4
    if (video_active == false) { // la vidéo 4 ne tourne pas
      // chargement de la video 4
      vid = new Movie(this, "Cervelet.mov");
      video_active = true;
      vid.loop(); // la video tourne en boucle
    } else {
      vid.stop(); // arret de la video
      clear(); // la video disparait
      video_active = false;
    }
  }
}
</code>

Gestion du jeu (en cours de programmation)

<code>

void lancerJeu(int NbCerclesSelectionnes) {
  IntList listeTotale = new IntList();
  IntList selectionCercles = new IntList(); // numéro des cercles sélectionnés parmis l'ensemble {0,1,2,3,4}
  for (int i=0; i<5; i++) { 
    listeTotale.append(i);
  }

  // rendre aléatoire la liste
  listeTotale.shuffle();

  for (int i=0; i<NbCerclesSelectionnes; i++) { 
    selectionCercles.append(listeTotale.get(i));
  }

  // afichage des cercles sélectionnés
  for (int i=0; i<NbCerclesSelectionnes; i++) { 
    float x = cercles[selectionCercles.get(i)].xpos;
    float y = cercles[selectionCercles.get(i)].ypos + 60;
    fill(cercles[selectionCercles.get(i)].c);
    float d = cercles[selectionCercles.get(i)].d;
    ellipse(x, y, d, d);
  }
}

</code>