✖ La mémoire

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.

✖ À télécharger

Typographie Colors Of Autumn

Photo 1 Photo 2 Photo 3 Photo 4 Photo 5 Photo 6 Photo 7 Photo cerveau

✖ Programme

//// 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
}

✖ Bouton

//// 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;
}
}

✖ Class Ball

//// 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;
}
}
}

✖ Résultat

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