Processing : Régler les paramètres d’une image à l’aide de Sliders

Le traitement d’image est une pratique courante pour les photographes et les graphistes. Il permet de modifier les couleurs, les contrastes et les détails d’une image pour obtenir le résultat souhaité. Avec l’utilisation des sliders, le traitement d’image est devenu plus facile et plus précis. Les sliders sont des curseurs qui permettent de régler les paramètres d’une image avec une précision et une rapidité incroyables. Dans cet article, nous allons vous expliquer comment régler les paramètres d’une image à l’aide de sliders et comment cela peut vous aider à obtenir le résultat souhaité.

Processing : Régler les paramètres d’une image à l’aide de Sliders

Description

Plusieurs Sliders dans une fenêtre de contrôle sont utilisés pour régler les paramètres d’une Image dans la fenêtre principale.
On ne fait pas mieux que The Gimp (non, c’est vrai ? tu connais pas ???), mais çà permet de se faire la main pour l’utilisation des Sliders et la gestion des paramètres d’une image.

Ressources utilisées

La librairie controlP5 fournissant les contrôles GUI
L’objet PImage et ses fonctions
La librairie ImageAdjuster de gestion d’une image

L’image utilisée dans l’exemple est ici (à enregistrer dans le répertoire de ton programme Processing) :

Explication

Chaque Slider règle la valeur d’un paramètre :
- les trois premiers règlent les canaux RGB à l’aide de la fonction tint()
- les trois suivants règlent le contraste, la luminosité et le Gamma en se basant sur les fonctions de la librairie ImageAdjuster
Le bouton <PARCOURIR> permet de charger l’image de son choix.

Le programme

// Programme processing
// généré avec le générateur de code Processing
// X. HINAULT – Janvier 2011 – tous droits réservés

/////////////// Description du programme ////////////
// Utilise un/des objets String (chaîne de caractère)
// Utilise un/des objets PImage (conteneur d’image .jpeg .gif .png et .tga)
// Utilise la librairie GUI controlP5
// Utilise un bouton (Button)
// Utilise un champ texte (Textfield)
// Utilise un réglage linéaire (Slider)
// Ajoute un bouton et un champ pour chemin fichier
// Utilise une/des fenetres supplémentaires

// XXXXXXXXXXXXXXXXXXXXXX ENTETE DECLARATIVE XXXXXXXXXXXXXXXXXXXXXX

// inclusion des librairies utilisées

import controlP5.*; // importe la librairie GUI controlP5
// cette librairie doit être présente dans le répertoire /libraries du répertoire Processing
// voir ici : http://www.sojamo.de/libraries/controlP5/

import imageadjuster.*; // importe la librairie ImageAdjuster (réglage paramètres image)
// cette librairie doit être présente dans le répertoire /libraries du répertoire Processing
// voir ici : http://www.davebollinger.com/works/imageadjuster/

// déclaration objets

String str1 = « machaine »; // déclare un objet String (chaine de caractère)
String cheminFichier = « »; // déclare un objet String (chaine de caractère)

PImage img1, img2, monimage; // déclare un/des objets PImage (conteneur d’image)

ImageAdjuster adjust; // déclare un objet ImageAdjuster

ControlP5 controlP5; // déclare un objet principal de la librairie GUI controlP5

Button b1,b2; // déclare un/des objets Button
Button cheminButton; // déclare objet Button

Textfield tf1,tf2; // déclare un/des objets Textfield
Textfield cheminText; // déclare des objets Textfield

Slider sliderTeinteR, sliderTeinteG, sliderTeinteB ; // déclare un/ des objet Slider
Slider sliderLuminosite, sliderContraste, sliderGamma; // déclare un/ des objet Slider

ControlWindow cw1; // déclare un/des objet fenetre ControlWindow

// déclaration variables globales

int TeinteR, TeinteG, TeinteB;
float Luminositef=0.0, Contrastef=1.0, Gammaf=0.5f;

//— variables définissant taille de la fenetre wc1
int heightwc1=250;
int widthwc1=400;

// XXXXXXXXXXXXXXXXXXXXXX Fonction SETUP XXXXXXXXXXXXXXXXXXXXXX

void setup(){ // fonction d’initialisation exécutée 1 fois au démarrage

// —- initialisation paramètres graphiques utilisés
colorMode(RGB, 255,255,255); // fixe format couleur R G B pour fill, stroke, etc…
fill(0,0,255); // couleur remplissage RGB
stroke (0,0,0); // couleur pourtour RGB
rectMode(CORNER); // origine rectangle : CORNER = coin sup gauche | CENTER : centre
imageMode(CORNER); // origine image : CORNER = coin sup gauche | CENTER : centre

// — initialisation fenêtre de base —
size(640, 480); // ouvre une fenêtre xpixels x ypixels
frameRate(15);
background(0,0,0); // couleur fond fenetre

// — initialisation des objets et fonctionnalités utilisées —

//—- Initialisation des objets PImage —

monimage = loadImage(« monimage640x480.jpg »); // charge un fichier image dans l’objet PImage (conteneur d’image)
// ce fichier doit être présent dans le répertoire du programme ou à l’emplacement indiqué
image(monimage, 0, 0, width, height);// affiche l’image dans la fentre processing

//======== Initialisation Objet ImageAdjuster =========

adjust = new ImageAdjuster(this);// initialise l’objet principal de la librairie ImageAdjuster

//======== Initialisation Objets GUI ControlP5 =========

controlP5 = new ControlP5(this); // initialise l’objet principal de la librairie GUI controlP5

//======== Initialisation Objets Button =========

//—- le bouton Parcourir chemin
cheminButton=controlP5.addButton(« cheminButton »,0,widthwc1–60,heightwc1–40,50,24); // initialise et ajoute un Button au ControlP5
cheminButton.setLabelVisible(true); // affichage des labels
cheminButton.setLabel(« PARCOURIR »); // fixe label du bouton
cheminButton.setColorActive(color(255,0,0)); // fixe la couleur active
cheminButton.setColorForeground(color(0,255,255)); // fixe couleur avant

//======== Initialisation Objets Textfield =========

//—- champ texte saisie chemin fichier
cheminText=controlP5.addTextfield(« cheminText »,10,heightwc1–40,300,20); // initialise et ajoute un Textfield au ControlP5
cheminText.setAutoClear(false); // autoeffacement après return
cheminText.setValue(« monimage640x480.jpg »); // initialise Texte du champ
cheminText.setLabelVisible(true); // affichage des labels
cheminText.setLabel(« CHEMIN »); // fixe label
cheminText.setColorActive(color(255,0,0)); // fixe la couleur active
cheminText.setColorForeground(color(0,255,255)); // fixe couleur avant

//======== Initialisation Objets Sliders =========

//—- slider teinte Red —

// addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
sliderTeinteR=controlP5.addSlider(« sliderTeinteR »,0,255,127,10,10,5,150); // ajoute un Slider au ControlP5

// méthodes propres à l’objet Slider
sliderTeinteR.setNumberOfTickMarks(int(sliderTeinteR.max())+1); // fixe le nombre crans – n+1 pour n valeurs
sliderTeinteR.showTickMarks(false); // affichage des repères
sliderTeinteR.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

// méthodes communes à tous les controles (objet Controller)
sliderTeinteR.setLabelVisible(true); // affichage des labels
sliderTeinteR.setLabel(« R »); // fixe label objet
sliderTeinteR.setColorActive(color(255,0,0)); // fixe la couleur active
sliderTeinteR.setColorBackground(color(255,255,0)); // fixe couleur fond
sliderTeinteR.setColorForeground(color(0,0,255)); // fixe couleur avant
sliderTeinteR.setColorCaptionLabel(color(255,255,0)); // fixe couleur Label
sliderTeinteR.setColorValueLabel(color(0,255,255)); // fixe la couleur valeur

//—- slider teinte Green —

// addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
sliderTeinteG=controlP5.addSlider(« sliderTeinteG »,0,255,127,50,10,5,150); // ajoute un Slider au ControlP5

// méthodes propres à l’objet Slider
sliderTeinteG.setNumberOfTickMarks(int(sliderTeinteG.max())+1); // fixe le nombre crans – n+1 pour n valeurs
sliderTeinteG.showTickMarks(false); // affichage des repères
sliderTeinteG.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

// méthodes communes à tous les controles (objet Controller)
sliderTeinteG.setLabelVisible(true); // affichage des labels
sliderTeinteG.setLabel(« G »); // fixe label objet
sliderTeinteG.setColorActive(color(255,0,0)); // fixe la couleur active
sliderTeinteG.setColorBackground(color(255,255,0)); // fixe couleur fond
sliderTeinteG.setColorForeground(color(0,0,255)); // fixe couleur avant
sliderTeinteG.setColorCaptionLabel(color(255,255,0)); // fixe couleur Label
sliderTeinteG.setColorValueLabel(color(0,255,255)); // fixe la couleur valeur

//—- slider teinte Blue —

// addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
sliderTeinteB=controlP5.addSlider(« sliderTeinteB »,0,255,127,90,10,5,150); // ajoute un Slider au ControlP5

// méthodes propres à l’objet Slider
sliderTeinteB.setNumberOfTickMarks(int(sliderTeinteB.max())+1); // fixe le nombre crans – n+1 pour n valeurs
sliderTeinteB.showTickMarks(false); // affichage des repères
sliderTeinteB.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

// méthodes communes à tous les controles (objet Controller)
sliderTeinteB.setLabelVisible(true); // affichage des labels
sliderTeinteB.setLabel(« B »); // fixe label objet
sliderTeinteB.setColorActive(color(255,0,0)); // fixe la couleur active
sliderTeinteB.setColorBackground(color(255,255,0)); // fixe couleur fond
sliderTeinteB.setColorForeground(color(0,0,255)); // fixe couleur avant
sliderTeinteB.setColorCaptionLabel(color(255,255,0)); // fixe couleur Label
sliderTeinteB.setColorValueLabel(color(0,255,255)); // fixe la couleur valeur

//—- slider Luminosité —

// addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
sliderLuminosite=controlP5.addSlider(« sliderLuminosite »,-0.5,0.5,0,130,10,5,150); // ajoute un Slider au ControlP5

// méthodes propres à l’objet Slider
sliderLuminosite.setNumberOfTickMarks(100+1); // fixe le nombre crans – n+1 pour n valeurs
sliderLuminosite.showTickMarks(false); // affichage des repères
sliderLuminosite.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

// méthodes communes à tous les controles (objet Controller)
sliderLuminosite.setLabelVisible(true); // affichage des labels
sliderLuminosite.setLabel(« Lum »); // fixe label objet
sliderLuminosite.setColorActive(color(255,0,0)); // fixe la couleur active
sliderLuminosite.setColorBackground(color(255,255,0)); // fixe couleur fond
sliderLuminosite.setColorForeground(color(0,0,255)); // fixe couleur avant
sliderLuminosite.setColorCaptionLabel(color(255,255,0)); // fixe couleur Label
sliderLuminosite.setColorValueLabel(color(0,255,255)); // fixe la couleur valeur

//—- slider Contraste —

// addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
sliderContraste=controlP5.addSlider(« sliderContraste »,0.25,3.0,1,170,10,5,150); // ajoute un Slider au ControlP5

// méthodes propres à l’objet Slider
sliderContraste.setNumberOfTickMarks(100+1); // fixe le nombre crans – n+1 pour n valeurs
sliderContraste.showTickMarks(false); // affichage des repères
sliderContraste.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

// méthodes communes à tous les controles (objet Controller)
sliderContraste.setLabelVisible(true); // affichage des labels
sliderContraste.setLabel(« Cont »); // fixe label objet
sliderContraste.setColorActive(color(255,0,0)); // fixe la couleur active
sliderContraste.setColorBackground(color(255,255,0)); // fixe couleur fond
sliderContraste.setColorForeground(color(0,0,255)); // fixe couleur avant
sliderContraste.setColorCaptionLabel(color(255,255,0)); // fixe couleur Label
sliderContraste.setColorValueLabel(color(0,255,255)); // fixe la couleur valeur

//—- slider Gamma —

// addSlider(theName, theMin, theMax, theDefaultValue, theX, theY, theW, theH)
sliderGamma=controlP5.addSlider(« sliderGamma »,0.25,1.75,1,210,10,5,150); // ajoute un Slider au ControlP5

// méthodes propres à l’objet Slider
sliderGamma.setNumberOfTickMarks(100+1); // fixe le nombre crans – n+1 pour n valeurs
sliderGamma.showTickMarks(false); // affichage des repères
sliderGamma.setSliderMode(Slider.FLEXIBLE); // fonctionnement du slider FLEXIBLE ou FIX

// méthodes communes à tous les controles (objet Controller)
sliderGamma.setLabelVisible(true); // affichage des labels
sliderGamma.setLabel(« Gam »); // fixe label objet
sliderGamma.setColorActive(color(255,0,0)); // fixe la couleur active
sliderGamma.setColorBackground(color(255,255,0)); // fixe couleur fond
sliderGamma.setColorForeground(color(0,0,255)); // fixe couleur avant
sliderGamma.setColorCaptionLabel(color(255,255,0)); // fixe couleur Label
sliderGamma.setColorValueLabel(color(0,255,255)); // fixe la couleur valeur

//======== Initialisation Objets ControlWindow =========

// addControlWindow(String theWindowName,int theX, int theY, int theWidth, int theHeight,int theFrameRate)
cw1=controlP5.addControlWindow(« fenetre »,100,100,widthwc1,heightwc1);// ajoute une fenetre au ControlP5

// méthodes propres à l’objet ControlWindow
cw1.hideCoordinates(); //masque les coordonnées
cw1.setBackground(color(0,0,0));
cw1.frameRate(15); // fixe le nombre de rafraichissement par seconde de la fenetre
//cw1.setColorActive(color(255,0,0)); // fixe la couleur active
cw1.setTitle(« Reglage Image »); // titre de la fenetre
//cw1.setLocation(100, 100) ; // fixe la localisation dans la fenetre ?
//cw1..setUndecorated(true); // fixe la bordure de la fenêtre

// ajout de controles à la fenetre ControlWindow
// nomObjet.setWindow(cw1); // met l’objet dans la fenêtre
cheminButton.setWindow(cw1); // met l’objet dans la fenêtre

cheminText.setWindow(cw1); // met l’objet dans la fenêtre

sliderTeinteR.setWindow(cw1); // met l’objet dans la fenêtre
sliderTeinteG.setWindow(cw1); // met l’objet dans la fenêtre
sliderTeinteB.setWindow(cw1); // met l’objet dans la fenêtre
sliderLuminosite.setWindow(cw1); // met l’objet dans la fenêtre
sliderContraste.setWindow(cw1); // met l’objet dans la fenêtre
sliderGamma.setWindow(cw1); // met l’objet dans la fenêtre

} // fin fonction Setup

// XXXXXXXXXXXXXXXXXXXXXX Fonction Draw XXXXXXXXXXXXXXXXXXXX

void draw() { // fonction exécutée en boucle

// tout se passe dans les routines évènements slider

} // fin de la fonction draw()

// XXXXXXXXXXXXXXXXXXXXXX Autres Fonctions XXXXXXXXXXXXXXXXXXXXXX

// Gestion des évènements des objets GUI controlP5 —-

// —— gestion évènement Button ——
void buttonA(int theValue) { // fonction évènement Button de meme nom – reçoit la valeur
println(« Evènement Button A avec valeur = « +theValue);
}

void buttonB(int theValue) { // fonction évènement Button de meme nom – reçoit la valeur
println(« Evènement Button B avec valeur = « +theValue);
}

//—- evenement bouton chemin fichier

void cheminButton(int theValue) { // fonction évènement Button de meme nom – reçoit la valeur

println(« Evènement cheminButton avec valeur = « +theValue);

cheminFichier=selectInput(« Choisir un fichier »); // ouvre fenetre systeme sélection fichier
// la variable cheminFichier mémorise le chemin sélectionné

if (cheminFichier!=null) { // si un chemin fichier est sélectionné
println(« Le chemin est : « +cheminFichier);

//— ouvre le fichier image
monimage = loadImage(cheminFichier); // charge un fichier image dans l’objet PImage (conteneur d’image)
// ce fichier est à l’emplacement sélectionné
image(monimage, 0, 0, width, height);// affiche l’image dans la fentre processing

cheminText.setValue(cheminFichier+ » « ); // met à jour le champ chemin + espace propreté
}

} // fin evènement bouton fichier

// —— gestion évènement Textfield ——
public void textfieldA(String theText) { // fonction évènement Textfield de meme nom – déclenché par return – reçoit la chaine
println(« Evènement Textfield A avec valeur = « +theText);
}

public void textfieldB(String theText) { // fonction évènement Textfield de meme nom – déclenché par return – reçoit la chaine
println(« Evènement Textfield B avec valeur = « +theText);
}

//—- evenement champ texte chemin fichier

public void cheminText(String theText) { // fonction évènement Textfield de meme nom – déclenché par return – reçoit la chaine

println(« Evènement CheminText avec valeur = « +theText);

cheminFichier=theText; // mémorise le contenu du champ

println(« Le chemin est : »+cheminFichier);

} // fin evènement champ texte chemin fichier

// —— gestion évènement Slider ——

void sliderTeinteR(float valeur) { // fonction évènement Slider de meme nom – reçoit la valeur
println(« Evènement Slider avec valeur = « +valeur);

TeinteR=int(valeur); // met à jour la variable

tint(TeinteR,TeinteG,TeinteB); // fixe la teinte de l’image à utiliser
image(monimage, 0, 0, width, height);// affiche l’image dans la fentre processing
}

void sliderTeinteG(float valeur) { // fonction évènement Slider de meme nom – reçoit la valeur
println(« Evènement Slider avec valeur = « +valeur);

TeinteG=int(valeur); // met à jour la variable

tint(TeinteR,TeinteG,TeinteB); // fixe la teinte de l’image à utiliser
image(monimage, 0, 0, width, height);// affiche l’image dans la fentre processing
}

void sliderTeinteB(float valeur) { // fonction évènement Slider de meme nom – reçoit la valeur
println(« Evènement Slider avec valeur = « +valeur);

TeinteB=int(valeur); // met à jour la variable

tint(TeinteR,TeinteG,TeinteB); // fixe la teinte de l’image à utiliser
image(monimage, 0, 0, width, height);// affiche l’image dans la fentre processing
}

void sliderLuminosite(float valeur) { // fonction évènement Slider de meme nom – reçoit la valeur
println(« Evènement Slider avec valeur = « +valeur);

adjust.brightness(monimage, 0, 0, monimage.width, monimage.height, valeur–Luminositef); //Lumnisosité (-0.5f à +0.5f)
// utilise delta avec derniere valeur

Luminositef=valeur; // mémorise dernière valeur pour le prochain passage

delay(200);

image(monimage, 0, 0, width, height);// affiche l’image dans la fentre processing

}

void sliderContraste(float valeur) { // fonction évènement Slider de meme nom – reçoit la valeur
println(« Evènement Slider avec valeur = « +valeur);

adjust.contrast(monimage, 0, 0, monimage.width, monimage.height, valeur–Contrastef+1.0f); // Contraste (0.25f à 3f) – début à 1.0
// utilise delta avec derniere valeur
Contrastef=valeur;
delay(200);

image(monimage, 0, 0, width, height);// affiche l’image dans la fentre processing

}

void sliderGamma(float valeur) { // fonction évènement Slider de meme nom – reçoit la valeur
println(« Evènement Slider avec valeur = « +valeur);

adjust.gamma(monimage, 0, 0, monimage.width, monimage.height, valeur–Gammaf+1.0f); //(+ 0.25 à + 1.75) – début à 1.0
// utilise delta avec derniere valeur
Gammaf=valeur; // mémorise dernière valeur
delay(200);