• Porteur du projet : Audrey Delacroix
• Date : Mars 2017
• Contexte : Cours de programmation Processing

Pour réaliser ce projet, j'ai cherché sur openprocessing.org un scketch en rapport avec le cerveau qui me plaisait et j'ai trouvé "Neurons" de Carl Vitasa. Je l'ai donc modifié (couleurs des billes/traits/fond, taille des billes, épaisseur des traits, vitesse du déplacement, nombre de billes/traits,…), mais j'ai également rajouté des éléments tels que du texte, une image en dégradé, des photographies et un bouton. Lorsque vous déplacez votre curseur de souris sur le bouton “Découvre”, des photographies apparaissent aléatoirement sur le carré dégradé. J'ai voulu illustrer des souvenirs qui nous reviennent en mémoire comme des flashs.

Typographie Colors Of Autumn

        //// Travail Processing - Audrey Delacroix

        //// Initialisation des variables

  button ton1; // Attribut des boutons

  boolean overBox = false; // Variables, attributs boolean faux pour bouton
  boolean locked = false; // Attributs boolean faux pour bouton
  boolean singlePress = false; // Attributs boolean faux pour bouton

  PFont police; // Typographie
  int total = 140; // Type. Nombre entier, nombre de points
  int lineRange = 40; // Type. Nombre de lignes

  ArrayList<Ball> ballList = new ArrayList<Ball>(); // "New" exécute le construceur de la classe

  color violet = color(240,0,255); // Couleur violet
  color blue = color(0, 0, 255); // Couleur bleu
   
        //// Initialisation des paramètres d'affichages et initialisation des variables globales

void setup() { // Les lignes de codes s'exécutent au lancement de l'animation
  
  size(995, 730, P2D); // Taille de la fenêtre, P2D pour le dégradé
  smooth (8); // Bords lisses
  frameRate (45); // Nombre d'images par secondes, lenteur du déplacement
  noStroke(); // Pas de contours
    
     //// Initialisation des boutons  
  
  ton1 = new button(); // Nouveau bouton  

  for (int i=0; i<total; i++) // Boucle, répétition
  {
    ballList.add(new Ball(int (random(100, width-100)), int (random(100, height-100)), int (random(1, 10)))); // Emplacement, direction, rapidité
  }
}

      //// Initialisation des boucles d'affichages

void draw() { // Méthode qui met en boucle l'animation, répétition sur elle-même
  
  background (0); // Couleur du fond : noir
  noStroke(); // Pas de contour sur le carré
  gradientRect(50, 50, 430, 430, violet, blue); // Emplacement, taille du carré 
   
  for (int i=0; i<ballList.size(); i++)
  {
    Ball b = ballList.get(i); 
    b.move(); // Apparition des traits, points
    b.display(); // Afficher
    for (int o=1; o<ballList.size(); o++) // Changement de valeur
    {
       Ball b2 = ballList.get(o); // Lignes
       if (abs((b.xPos - b2.xPos)) < lineRange && abs((b.yPos - b2.yPos)) < lineRange) // Condition
       {
        strokeWeight(int(random(1, 4))); // Epaisseur des traits
        stroke(lerpColor (#66efff, #ff00cc, random(1))); // Deux couleurs des traits
        line(b.xPos, b.yPos, b2.xPos, b2.yPos);
        }
  }
}
    
   ton1.draw(700,150,190,80); // Dessin du bouton à la position (700,150) et de taille (190x80)
   
    //// Le texte
   
  police = loadFont("ColorsOfAutumn-48.vlw"); // Importation typographie
     fill(255); // Couleur blanc du mot "Decouvre"
     textFont(police,33); // Taille du mot "Decouvre"
     text("Decouvre",795,200); // Position du texte "Decouvre"
   
  police = loadFont("ColorsOfAutumn-48.vlw"); // Nom de la typographie
     fill(110,255,255); // Couleur du texte
     textAlign(CENTER); // Texte centré
     textFont(police,40); // Taille du premier mot
     text("Bienvenue", 500, 600); // premier mot
     textFont(police,26); // taille du deuxième mot
     text("dans ta", 500, 622); // deuxième mot
     textFont(police,50); // taille du troisième mot
     text("memoire", 500, 660); // troisième mot


      //// Les images : importation + position + taille

      PImage brain; // Type complexe
      brain = loadImage("brain.gif"); // Importation de l'image "Brain"
      image(brain,380,370,280,200); // Position et taille de l'image "Brain"
      
      if(ton1.clicked()){ // Si je passe la souris sur le bouton, les images ci dessous d'affichent (cf. la class bouton)

         int i = floor(random(1,8)); // nombre entier aléatoire entre 0 et 7
         String nomImage = "pic"+i+".jpg";
         println(nomImage);

        PImage pic1; // Variable qui stocke une image
        pic1 = loadImage(nomImage); // Importation de l'image "pic 1"
        image(pic1,30+random(190),30+random(190),200,200);  // Position et taille de l'image
  
        fill(0,0,255,200); // bouton rectangulaire rempli de bleu
        rect(700,150,190,80); // Position et taille du rectangle
        fill(0); // Couleur du texte qui devient noir
        textFont(police,33); // Taille du premier mot
        text("Decouvre",795,200); // Position du mot "découvre"
   }
}

      //// Rectangle dégradé

 void gradientRect(int x, int y, int w, int h, color c1, color c2) { 
      beginShape(); // Début de la forme
      fill(c1); // Remplissage couleur 1
      vertex(x,y); // Formes construites en reliant une série de sommets, 
      vertex(x,y+h); // Vertex spécifie les coordonnées de sommet pour les points, lignes, triangles,..
      fill(c2); // Remplissage couleur 2
      vertex(x+w,y+h);
      vertex(x+w,y); 
      endShape(); // Fin de la forme
}       

  //// Annonce de la classe bouton

class button{
  //// attributs
  // Couleurs
  int Red; // int : variable entier (32 bits)
  int Gre;
  int Blu;
  
  // Coordonnées des boutons
  int x;
  int y;
  
  // taille du bouton
  int si1;
  int si2;
  
  //// constructeur
  button(){
    Red = 255;
    Gre = 0;
    Blu = 150;
  }
  
 
   //// Méthode pour remplir les boutons 
  
  void setFill(int R, int G, int B){
    Red = R;
    Gre = G;
    Blu = B;
  }
   
   //// Méthode pour dessiner les boutons
  
  void draw(int x1, int y1, int s1, int s2){
      x = x1;
      y = y1;
      si1 = s1;
      si2 = s2;
      stroke(0);
      fill(Red,Gre,Blu);
      rect(x1, y1, s1, s2);
  }
  
   //// États fonction du bouton 
  
  boolean clicked(){ // Boolean : vrai / faux
    if(mouseX > x && mouseX < (x+si1) && mouseY > y && mouseY < (y+si2) ){
        overBox = true;  
    if(!locked) { 
          return true;
        }
    }
    overBox = false;
    return false;
  }   
} 

     //// Classe "Ball"

class Ball { // Déclaration attributs de la classe "balle" (paramètres des balles)
  float theta = 0; // Variable : nombre avec décimale, nombre à virgule flottante (32 bits)
  float speed;
  float r = 90;
  float x, y;
  float xOffSet, yOffSet; // Décalages
  float xPos, yPos;
  int clockWise; // Sens des aiguilles d'une montre


  Ball(float _xOffSet, float _yOffSet, float _speed) // Constructeur de la ball. Affectation des attributs avec les valeurs du constructeur
  {
    this.xOffSet = _xOffSet;
    this.yOffSet = _yOffSet;
    this.speed = _speed/100;
    clockWise = int(random(2)); // Aléatoire
  }

        //// Déclaration des méthodes membres de la classe "Ball" 
        
        //// Méthode qui fait le dessin
        
  void display() {
    
    fill (#38ffff); // Couleur des boules
    noStroke(); // Pas de contour
    ellipse(xPos, yPos, 3, 3); // Tailles des boules
  }
  
      //// Méthode qui met en mouvement, vitesse

  void move() {
 
    xPos = x + xOffSet; 
    yPos = y + yOffSet;
    x = r * cos(theta);
    y = r * sin(theta);
    if (clockWise == 1) // Condition
    {
      theta += speed;
    }
    else 
    {
      theta -= speed;
    }
  }
}

(Il s'agit d'un GIF et pas d'une vidéo : le mouvement/vitesse des “neurones” n'est pas le bon !)