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 :

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

2ème programme - animer son paysage :

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

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.