===== ANIMER POUR EXPERIMENTER =====

==== Anime ton paysage =====

--------------------------------
Porteur(s) du projet : Céline Renault
--------------------------------
Date : Mars 2017
--------------------------------
Contexte : Cours de programmation

--------------------------------

Pour ce projet, j'ai choisi de créer des images animées. Ce projet reprend l’effet de l’ombro-cinéma. A partir de forme de base (rond, carré, triangle...) que l’on dispose sur la page, on anime les éléments grâce à un filtre. 

Le programme se fait en deux parties. Le premier programme permet de créer son paysage et de l'enregistrer. Le deuxième permet d'animer le paysage. 

==== 1er programme - creer son paysage : ====

<code>
// déclaration des variables 
PImage etoile; // PImage variable 
PImage carre;
PImage triangle;
PImage cercle;
PImage moitielune;
PImage fleche;
PImage ecrou;
PImage filtrecarreb;
PImage carrefinitb; 
PImage cerclefinitb;

int value = 0; // variable pour déplacer le filtre

boolean modeDrag; // déplacement souris clique


import controlP5.*; // importation de la librairie controlP5

ControlP5 cp5;

void setup() {
  size(1000, 650); // taiille de la zone d'affichage
background(255); // couleur d'arrière plan

 cp5 = new ControlP5(this); // déclaration de la librairie P5
 
  
//////////////////////////////////////////////////////////////////////////////////////////////////////////     
  //CREATION DUN BOUTON EN LUI METTANT UNE IMAGE DE FOND
  cp5.addButton("etoile") // nom bouton
    .setPosition(0, 0) // position du bouton
    .setSize(80, 30) // taille du bouton
    .setValue(0); // valeur du bouton
   
   
  cp5.addButton("carre")
    .setPosition(0, 30)
    .setSize(80, 30)
    .setValue(0);
    
    
    cp5.addButton("triangle")
    .setPosition(0, 60)
    .setSize(80, 30)
    .setValue(0);
    
    cp5.addButton("cercle")
    .setPosition(0, 90)
    .setSize(80, 30)
    .setValue(0);
    
    cp5.addButton("moitielune")
    .setPosition(0, 120)
    .setSize(80, 30)
    .setValue(0);
    
    cp5.addButton("fleche")
    .setPosition(0, 150)
    .setSize(80, 30)
    .setValue(0);
    
    cp5.addButton("ecrou")
    .setPosition(0, 180)
    .setSize(80, 30)
    .setValue(0);
    
      cp5.addButton("taille")
    .setPosition(0, 210)
    .setSize(80, 20)
    .setValue(0)
    .setColorBackground(color(100,0,100));
     
    
     cp5.addSlider("taillec") //taille
     .setPosition(0,230)
     .setSize(80,20)
     .setRange(0,500)
     .setValue(100);
     
     cp5.addButton("rouge") // bouton nom rouge 
    .setPosition(0, 250)
    .setSize(80, 20)
    .setValue(0)
    .setColorBackground(color(255,0,0));
     
      cp5.addSlider("rougec") //ROUGE
     .setPosition(0,270)
     .setSize(80,20)
     .setRange(0,255)
     .setValue(100)
     .setColorBackground(color(255,0,0,50));
     ;
     
       cp5.addButton("vert") // bouton nom vert, sert a afficher le nom 
    .setPosition(0, 290)
    .setSize(80, 20)
    .setValue(0)
     .setColorBackground(color(0,255,0));
    
         cp5.addSlider("vertc") // slide couleur VERTE 
     .setPosition(0,310) // posiiton 
     .setSize(80,20) // taille
     .setRange(0,255) //le slide est compris entre 0 et 255 
     .setValue(100) // valeure de base donné au départ
     .setColorBackground(color(0,255,0,50)); // couleure derriere le slide et a = flou 
     
 
       cp5.addButton("bleu") // bouton nom bleu
    .setPosition(0, 330)
    .setSize(80, 20)
    .setValue(0)
     .setColorBackground(color(0,0,255));
    
      cp5.addSlider("bleuc") //BLEU
     .setPosition(0,350)
     .setSize(80,20)
     .setRange(0,255)
     .setValue(100)
     .setColorBackground(color(0,0,255,50));
     
     
         cp5.addButton("opacite")
    .setPosition(0, 370)
    .setSize(80, 30)
    .setValue(0);
    
      cp5.addSlider("alpha") //BLEU 
     .setPosition(0,400)
     .setSize(80,20)
     .setRange(0,255)
     .setValue(100)
     ; 
     
        
         cp5.addButton("reset") // bouton pour supprimer l'iamge cree et 
    .setPosition(0, 450)
    .setSize(80, 30)
    .setValue(0);
    
    
       /*     cp5.addButton("filtrecarreb") 
    .setPosition(0, 510)
    .setSize(80, 30)
    .setValue(0); */
  
   
            cp5.addButton("carrefinitb") // carre ombro cinema
    .setPosition(0, 480)
    .setSize(80, 30)
    .setValue(0);
    
            cp5.addButton("cerclefinitb") // crecle ombro cinema
    .setPosition(0, 510)
    .setSize(80, 30)
    .setValue(0);
    

//////////////////////////////////////////////////////////////////////////////////////////////////////////
   
// charger les images 

 etoile = (loadImage("étoile.png")); // importation des images
  //image(etoile,mouseX,mouseY,20,20);
  carre = (loadImage("carre.png")); 
  triangle = (loadImage("triangle.png")); 
  cercle = (loadImage("cercle.png")); 
  moitielune = (loadImage("moitié-lune.png")); 
  fleche = (loadImage("flèche.png")); 
  ecrou = (loadImage("écrou.png")); 
filtrecarreb = (loadImage("filtrecarreb.png")); 
carrefinitb = (loadImage("carrefinitb.png")); 
cerclefinitb = (loadImage("cerclefinitb.png"));




} 

//////////////////////////////////////////////////////////////////////////////////////////////////////////

void draw() {  // paramètres des boucles d'affichage 
  
}

public void etoile(int theValue) { // public void pour pouvoir appliquer une fonction à chaque bouton ici l'étoile
  float s1 = cp5.getController("taillec").getValue(); // s1=size=taille
  float r = cp5.getController("rougec").getValue(); // couleur rouge
  float v = cp5.getController("vertc").getValue(); // couleur verte
  float b = cp5.getController("bleuc").getValue(); // couleur bleu
  float a = cp5.getController("alpha").getValue(); // a= transparence
  
  
tint(r,v,b,a); // pour mettre la couleur 

  image(etoile,mouseX,mouseY,s1,s1); } // pour pouvoir déplacer librement l'image 


/////////////////////////////////////////////////////////////////

public void carre(int theValue) {
  float s1 = cp5.getController("taillec").getValue(); // float pour induire une variable
  float r = cp5.getController("rougec").getValue();
  float v = cp5.getController("vertc").getValue();
  float b = cp5.getController("bleuc").getValue();
  float a = cp5.getController("alpha").getValue();
  

  
tint(r,v,b,a); // pour mettre la couleur 


  image(carre,mouseX,mouseY,s1,s1); }



/////////////////////////////////////////////////////////////////

public void triangle(int theValue) {
   float s1 = cp5.getController("taillec").getValue();
  float r = cp5.getController("rougec").getValue();
  float v = cp5.getController("vertc").getValue();
  float b = cp5.getController("bleuc").getValue();
  float a = cp5.getController("alpha").getValue();
  

  
tint(r,v,b,a); // pour mettre la couleur pour l'appliquer



  image(triangle,mouseX,mouseY,s1,s1); }


/////////////////////////////////////////////////////////////////

public void cercle(int theValue) {
 float s1 = cp5.getController("taillec").getValue();
  float r = cp5.getController("rougec").getValue();
  float v = cp5.getController("vertc").getValue();
  float b = cp5.getController("bleuc").getValue();
  float a = cp5.getController("alpha").getValue();
  

  
tint(r,v,b,a); // pour mettre la couleur 
  
image(cercle,mouseX,mouseY,s1,s1); } // pour déplacer la forme avec la souis 


/////////////////////////////////////////////////////////////////

public void moitielune(int theValue) {
 float s1 = cp5.getController("taillec").getValue();
  float r = cp5.getController("rougec").getValue();
  float v = cp5.getController("vertc").getValue();
  float b = cp5.getController("bleuc").getValue();
  float a = cp5.getController("alpha").getValue();
  

  
tint(r,v,b,a); // pour mettre la couleur 
  

  image(moitielune,mouseX,mouseY,s1,s1); }



/////////////////////////////////////////////////////////////////

public void fleche(int theValue) {
  
 float s1 = cp5.getController("taillec").getValue();
  float r = cp5.getController("rougec").getValue();
  float v = cp5.getController("vertc").getValue();
  float b = cp5.getController("bleuc").getValue();
  float a = cp5.getController("alpha").getValue();
  

  
tint(r,v,b,a); // pour mettre la couleur 


  image(fleche,mouseX,mouseY,s1,s1); }


/////////////////////////////////////////////////////////////////


public void ecrou(int theValue) {
  float s1 = cp5.getController("taillec").getValue();
  float r = cp5.getController("rougec").getValue();
  float v = cp5.getController("vertc").getValue();
  float b = cp5.getController("bleuc").getValue();
  float a = cp5.getController("alpha").getValue();
  

  
tint(r,v,b,a); // pour mettre la couleur 

  image(ecrou,mouseX,mouseY,s1,s1); }


/////////////////////////////////////////////////////////////////

public void reset(int theValue) {

  background(255);

}

/////////////////////////////////////////////////////////////////


public void filtrecarreb(int theValue) {
   float s1 = cp5.getController("taillec").getValue();
  float r = cp5.getController("rougec").getValue();
  float v = cp5.getController("vertc").getValue();
  float b = cp5.getController("bleuc").getValue();
  float a = cp5.getController("alpha").getValue();
 
  
tint(r,v,b,a); // pour mettre la couleur 

image(filtrecarreb,mouseX,mouseY,s1,s1); }


/////////////////////////////////////////////////////////////////

public void carrefinitb(int theValue) {
   float s1 = cp5.getController("taillec").getValue();
  float r = cp5.getController("rougec").getValue();
  float v = cp5.getController("vertc").getValue();
  float b = cp5.getController("bleuc").getValue();
  float a = cp5.getController("alpha").getValue();

  
tint(r,v,b,a); // pour mettre la couleur 


  image(carrefinitb,mouseX,mouseY,100,100);
}


/////////////////////////////////////////////////////////////////

public void cerclefinitb(int theValue) {
   float s1 = cp5.getController("taillec").getValue();
  float r = cp5.getController("rougec").getValue();
  float v = cp5.getController("vertc").getValue();
  float b = cp5.getController("bleuc").getValue();
  float a = cp5.getController("alpha").getValue();
  

  
tint(r,v,b,a); // pour mettre la couleur 


  image(cerclefinitb,mouseX,mouseY,100,100);
}

 /////////////////////////////////////////////////////////////////////////////////////////////////////


void keyPressed() {
  if (key == ENTER) { //prendre une photo avec le bouton ENTRÉE pour pouvoir enregistrer l'image crée
   
    saveFrame("paysage-"+hour()+minute()+second()+".png"); // renomer les images automatiquement avec le nom paysage et un chiffre
    //img.save("image-"+hour()+minute()+second()+".png");
  }
}
</code>

{{:wiki:projets:projets-processing-dsaa1:paysage4.png?300|}}
{{:wiki:projets:projets-processing-dsaa1:paysage5.png?300|}}



==== 2ème programme - animer son paysage : ====

<code>
// déclaration des variables 

float bx;  // position initial de la boite en x
float by;
int boxSize = 400; // taille boîte filtre 
boolean overBox = false; // variable vrai ou faux
boolean locked = false; // variable vrai ou faux
float xOffset = 0.0; 
float yOffset = 0.0; 
PImage paysage; // PImage variable  
PImage filtre; // filtre ombro-cinema


      
     

void setup() {
  size(1000,650); // taille de la fenêtre d'affichage
  bx = width/2.0; // bx = largeur divisé par 2
  by = height/2.0; //  by = longueur divisé par 2
  rectMode(RADIUS); //
  
paysage = loadImage("paysage5.png"); // importation des images crée
filtre = loadImage("filtrecarre1.png"); // importation du filtre ombro cinéma
}

void draw() { 
  
image(paysage,0,0); // position de l'image en x,y 
  
  // Tester si le curseur est sur la boîte du coup la boîte est vrai 
  if (mouseX > bx-boxSize && mouseX < bx+boxSize && 
      mouseY > by-boxSize && mouseY < by+boxSize) {
    overBox = true;  
    if(!locked) { 
      stroke(255); 
      fill(153);
    } 
  } else {
    stroke(153);
    fill(153);
    overBox = false;
  }
  
  // dessiner la boîte
  image(filtre,bx, by, boxSize, boxSize);
}

void mousePressed() { // identifier que la souris clique
  if(overBox) { 
    locked = true; 
    fill(255, 255, 255);
  } else {
    locked = false;
  }
  xOffset = mouseX-bx; // déplacement de la souris en x
  yOffset = mouseY-by;  // déplacement de la souris en x

}

void mouseDragged() { // déplacer la boîte
  if(locked) {
    bx = mouseX-xOffset; 
    by = mouseY-yOffset; 
  }
}

void mouseReleased() { // pour remettre à jour le bouton
  locked = false;
}
</code>


{{:wiki:projets:projets-processing-dsaa1:proessing_wiki_.png?300|}}


Détail : 

La souris déplace le filtre lorsqu'elle est sur le carré. Elle calcule sa dimension par rapport au repère x,y en haut à gauche.

 {{:wiki:projets:projets-processing-dsaa1:img_6951.jpg?300|}}