TONER KEBAB WIKI

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== MELANGE ======

    Porteur(s) du projet : Lisa Guillermin
    Date : Mai 2017
    Contexte : cours de “Culture & pratiques techniques”
    Source : OpenProcessing


===== BUT =====

Je travail autour de la relation que nous avons avec les images qui nous entourent dans l'espace public. 
Nous sommes sans cesse confrontés à un nombre incalculable d'images qui s’entremêlent et se perdent dans la multitude. J'ai donc cherché un programme pouvant nous mettre en confrontation avec ce phénomène.
Le programme développé par Tomasz Sulej (generateme.blog@gmail.com, http://generateme.tumblr.com, Licence: http://unlicense.org/) se rapproche de celui développé par le Studio HELMO.
Leur travail //Stratigraphie//, suit une logique d’empilement de couches, de stratification. L’accumulation de sens, de plans, et d’encres produit au final un « feuilleté» dense. Ceci retranscrit l'équivocité du monde, un monde sur un plan, dans lequel on ne distingue plus les formes ni l’enjeu. Des images porteuses de sens au départ, qui se perdent dans la multitude.

===== TRAVAIL D'HELMO =====

{{:wiki:projets:projets-processing-dsaa1:helmo_stratigraphie3-low.jpg?200|}}
{{:wiki:projets:projets-processing-dsaa1:c1bbb30fb4ffe1e586efe5227ea67d9b.jpg?200|}}
{{:wiki:projets:projets-processing-dsaa1:helmo_stratigraphie3-low.jpg?200|}}

===== IMAGES UTILISEES =====

{{:wiki:projets:projets-processing-dsaa1:bl1005.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:bl1000.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:bl1001.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:bl1002.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:bl1003.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:bl1004.jpg?100|}}

===== CODE (avec problèmes) =====
Les classes (3) sont intégrées au code.
Il n'est encore pas fini d'être commenté.

// Usage:
//   * Appuyer sur espace pour sauvegarder
//   * Cliquer pour changer les paramètres de manière aléatoire

// Configurer le nom de fichier de la cible
String filename = «test»; // Nom de l’image de base
String fileext = «.jpg»; // Son format
String foldername = «./»; // nom du dossier

// Mélange de la couleur et du canal
int mode = BLEND_VALUE;     // BLEND_VALUE ou BLEND_COLOR
                            // Si on veut faire varier la valeur, il faut définir ce que l’on veut faire varier
int VALUE_FOR_BLEND = HUE;  // On fait ceci seulement si on veut faire varier la valeur des images
                            //green() blue() alpha() hue() saturation() >> Vert () bleu () alpha () teinte () saturation ()

// nombre aléatoire de source utilisé
boolean random_source = false; // Initialisation de la variable boolean utilisée pour les tests conditionnels

int max_display_size = 1000; // Taille de la fenêtre de visualisation (quelle que soit la taille de l’image)

boolean do_blend = false;   // Fusionner l’image après le processus
int blend_mode = OVERLAY;   // Type de mélange > Mélange une région de pixels d’une image à une autre 
                            //(ou en elle-même à nouveau) avec un support de canal alpha complet. >>https://processing.org/reference/blend_.html
                            //Il existe un choix des modes suivants pour mélanger les pixels source (A) avec ceux de pixels dans l’image de destination (B):
                            // BLEND, ADD, ADD, SUBTRACT, DARKEST, LIGHTEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT - SCREEN, MULTIPLY, SOFT_LIGHT, DODGE, BURN

//Configurer l’ensemble des images sources
// utiliser les noms de dossier des variables ci-dessous pour construire l’ensemble
// exemple: mes images ont des noms: bl1000.jpg, bl1001.jpg etc ...
// et sont situés dans le dossier ‘bl /’
// J’ai 6 d’entre elles avec un préfixe constant: «bl / bl100» (pattern_prefix)
// alors chaque fichier a un chiffre de séquence de 0 à 5 (pattern_init et pattern_length)
// avec les chiffres ‘pattern_size’ pour la séquence (ici: un chiffre)
// à la fin ‘file_ext’ est ajouté
// ci-dessous le réglage produit six noms: bl / bl1000.jpg, bl / bl1001.jpg, bl / bl1002.jpg, bl / bl1003.jpg, bl / bl1004.jpg, bl / bl1005.jpg

//»final static» et le mot-clé utilisé pour définir une variable comme une «variable de classe» et une méthode comme «méthode de classe». 
//Lorsqu’une variable est déclarée avec le mot-clé statique, toutes les instances de cette classe partagent la même variable. 
//Lorsqu’une classe est définie avec le mot-clé statique, 
//ses méthodes peuvent être utilisées sans créer une instance de la classe. 

final static String pattern_prefix = «bl/bl100»;
final static String file_ext = «.jpg»;// Format
final static int pattern_init = 0;    // Numéro de départ
final static int pattern_length = 6;  // Nombre d’images qui composent l’ensemble, ne pas en utiliser plus de 10.
final static int pattern_size = 1;    // Nombre de chiffre

final static int BLEND_COLOR = 0;
final static int BLEND_VALUE = 1;

// Initialisation de la classe Mémoire tampon du travail : PGraphics
PGraphics buffer;

// Initialisation de la classe PImage
PImage img;

String sessionid; // Variable chaine de caractères, permet de stocker du texte, nom de la variable

PImage[] sset = new PImage[pattern_length]; // Création d’un nouvelle objet Image correspondant à une des images définit avec un chiffre dans patern_length



void setup() { // Initialisation de la Méthode Void Setup afin de déclarer les fonctions valables tout au long du programme.

  sessionid = hex((int)random(0xffff), 4); //hex permet de convertir un nombre entier en  une chaine
                                           // contenant la notation hexadécimale équivalente. Ici, cela correspond à une apparition aléatoire) CHANGER LE 4 NE CHANGE RIEN ???
  img = loadImage(foldername+filename+fileext); //chargement de l’image (nom du dossier, nom du fichier, extension du fichier)
  img.loadPixels();                        // La classe PImage contient des champs pour la largeur et la hauteur de l’image, ainsi qu’un tableau appelé pixels [] qui contient les valeurs pour chaque pixel dans l’image. 
                                           //Cette méthode permet d’accéder facilement aux pixels de l’image et au canal alpha et à simplifier le processus de composition.
                                           //Avant d’utiliser le tableau pixels [], il faut avoir utiliser la méthode loadPixels () sur l’image pour que les données de pixels soient correctement chargées.

  buffer = createGraphics(img.width, img.height); //Une fois que la class a été créée, il suffit de mettre «create» pour stocker de nouvelles infos.
  buffer.loadPixels();

  // Calcul de la taille de la fenêtre
  float ratio = (float)img.width/(float)img.height;// Calcul du ratio largeur sur hauteur de l’image (w et h = n’importe quel nombre sur IR)
  int neww, newh;                                  // nouvelles variables de type entier : neww (= nouvelle largeur) et newh (= nouvelle hauteur)
  if (ratio < 1.0) {
    neww = (int)(max_display_size * ratio); // Nouvelle largeur = max_display_size (= 1000 = Taille de la fenêtre de visualisation)
                                            // multipliée par la largeur de l’image (lorsque la largeur divisée par la hauteur est strictement inférieur à 0) pour que l’image s’adapte à la taille de la fenêtre
    newh = max_display_size;                // Pareil avec la hauteur de l’image
  } else {
    neww = max_display_size;                // Alors la nouvelle largeur de l’image est égal à la largeur de la fenêtre
    newh = (int)(max_display_size / ratio); // et la nouvelle heuteur et un nom entier correspondant à la taille de la fenêtre divisé par le ratio
  }

  size(neww, newh);                          // Donne la nouvelle taille

  
  for (int i=0; i<pattern_length; i++) {     // Lorsque i=0 (conditions initiales), avec i strictement inférieur au nombre d’images qui composent l’ensemble (=6 images) (condition d’arrêt)
                                             // alors i s’incrémente de 1 (condition d’incrémentation)
    String suf = nf(i+pattern_init, pattern_size);  // nf : Fonction utilitaire pour le formatage des nombres en chaînes. Car chaque fichier a un chiffre de séquence de 0 à 5 (pattern_init et pattern_length)
                                                    // avec les chiffres ‘pattern_size’ pour la séquence
                                                   
    String fname = pattern_prefix + suf + file_ext;
    sset[i] = loadImage(fname);                     // Chargement d’une autre image avec fname qui signifie qu’il faut charger
                                                    // une image avec le préfixe «bl / bl100» + suf (le numéro de l’image précédent (ex : 1 ) dans un dossier extérieur (en .jpg)
    sset[i].loadPixels();                           // L’incrémentation permet donc, en additionnant les différents paramètres d’une image 
                                                    //en utilisant les chiffres caractérisant leur noms, de créer les nouvelles variables
    printArray(fname + « loaded»);                  // Une image s’ajoute à la première, println ()(avant) et mtn printArray () permet d’écrire des données de tableau dans la console.
  }

  processImage();           // Traitement de l’image?
}

void draw() {
  // Remplir pour un traitement itératif, c’est à dire qui se répète. 
  // Void Draw est une méthode permettant d’afficher les sous-fonctions, c’est une boucle d’affichage appelée 30fois/seconde.
  //Elle permet de modifier le contenu de la fenêtre d’affichage à chaque apparition pour creer l’animation. 
}

void mouseClicked() {
  random_source = true;     // A chaque clic, une image apparait de manière aléatoire. Bouléen vrai.
                            // Les événements de souris (et de clavier) ne fonctionnent que lorsqu’un programme a Draw(). Sans avoir dessiné, le code ne s’exécute qu’une seule fois puis arrête d’écouter les événements.                      
 
  mode = random(1)<0.5?BLEND_COLOR:BLEND_VALUE;            // CREER D’AVANTAGE D’ALEATOIRE en définissant mode mais qu’est-ce que 0.5?
 
  if(mode == BLEND_VALUE) VALUE_FOR_BLEND = (int)random(6);// Si mode est égale au mélange de la valeur, alors il se créer de l’aléatoire en mélangeant une autre image 
                                                           // Ici : (6) renvoie des valeurs entre 0 et 6 (commençant à zéro, et jusqu’à, mais pas inclus, 6).
                                                           //(int) permet de retranscrire un nbr aléatoire à virgule en nombre entier.

  do_blend = random(1)<0.1;                                // TOUJOURS PAS COMPRIS LE NBR A VIRGULE
  blend_mode = blends[(int)random(blends.length)];         // Mélange aléatoire des images
  processImage();
}

PVector getVector(color c) { // Classe PVecteur utilisée pour décrire une position, une vitesse ou une accélération.
                             //Ici, la couleur. Le Pvecteur permet de créer des décalages de bits.
  PVector v = new PVector();
  v.x = (c >> 16) &0xff; //0x défini une couleur hexadécimale en RGB et ff signifie qu’elle est codée sur 1 (255/255) 
                         // x sur 16 bits
  v.y = (c >> 8) &0xff;  // y sur 8
  v.z = c &0xff;         // z sur 4
  return v;
}

void processImage() {         //Initialisation d’une nouvelle variable (qui n’est pas reconnue?) qui renvoie au processus de l’image 


  int[] idx = new int[pattern_length]; //  déclaration de la variable changement d’image (de 0 à 5) (dx = déplacement)
  for (int i=0; i<pattern_length; i++) idx[i] = i; // Pour i=0, avec i strictement inférieur à pattern_length, c’est à dire 6 si pattern_length = (bl100)5(.jpg)
                                                   // On incrément i de 1, ce qui créé une nouvelle image, ou idx retourne à l’état initial i
                                                   //Condition vrai
  int nidx = pattern_length;                       //Ces lignes permettent de créer de l’aléatoire dans l’affichage des images, mais également de faire en sorte 
                                                   // qu’il y en ai plusieurs qui s’affichent
  if (random_source) {                             // Test conditionnel validé lorsque l’on clique, mais Si validée, alors
    nidx = (int)random(2, pattern_length+1);       // il y a au moins deux images qui s’affichent + pattern + 1 ?? ...
    for (int i=0; i<pattern_length-1; i++) {       // Lorsque i=0, avec i strictement inférieur au nombre d’images qui composent l’ensemble (=6 images) -1 
                                                   // alors i s’incrémente de 1
      int ri = (int)random(i+1, pattern_length);   // Comprends pas, mais certainement une petite technique pour combiner plusieurs images et creer de l’aléatoire dans l’apparition des images.
      int tmp = idx[i];
      idx[i] = idx[ri];
      idx[ri] = tmp;
    }
  }
  println(«Using « + nidx + « images.»);           //Une nouvelle image s’ajoute à la place

  for (int x=0; x<img.width; x++) {                //Boucle double!! : Pour x=0 avec x stritement inferieur à la largeur de l’image alors x s’incrémente de 1
                                                   
    for (int y=0; y<img.height; y++) {             //Et si pour y=0 avec y strictement inf à la hauteur alors y s’incrémente de 1
      int p = y*img.width+x;
      color c = img.pixels[p];
      PVector cv = getVector(c);
      float cval = getChannel(c,VALUE_FOR_BLEND);
      float currd = 1.0e10;
      color currc = c;
      for (int i=0; i<nidx; i++) {
        PImage _img = sset[idx[i]];
        int _x = (int)map(x, 0, img.width-1, 0, _img.width-1);
        int _y = (int)map(y, 0, img.height-1, 0, _img.height-1);
        int _p = _y * _img.width + _x;
        color _c = _img.pixels[_p];
        float d = currd;
        if (mode == BLEND_COLOR) {
          d = cv.dist(getVector(_c));
        } else {
          d = abs(cval - getChannel(_c,VALUE_FOR_BLEND));
        }
        if (d<currd) {
          currd = d;
          currc = _c;
        }
      }
      buffer.pixels[p] = currc;
    }
  }

  // Fin du code
  buffer.updatePixels();

  if (do_blend)
    buffer.blend(img, 0, 0, img.width, img.height, 0, 0, buffer.width, buffer.height, blend_mode);

  image(buffer, 0, 0, width, height);
}

void keyPressed() {
  // SPACE to save
  if (keyCode == 32) {
    String fn = foldername + filename + «/res_» + sessionid + hex((int)random(0xffff), 4)+»_»+filename+fileext;
    buffer.save(fn);
    println(«Image «+ fn + « saved»);
  }
}

//

final static int[] blends = {
  ADD, SUBTRACT, DARKEST, LIGHTEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN
};

// ALL Channels, Nxxx stand for negative (255-value)
// channels to work with
final static int RED = 0;
final static int GREEN = 1;
final static int BLUE = 2;
final static int HUE = 3;
final static int SATURATION = 4;
final static int BRIGHTNESS = 5;
final static int NRED = 6;
final static int NGREEN = 7;
final static int NBLUE = 8;
final static int NHUE = 9;
final static int NSATURATION = 10;
final static int NBRIGHTNESS = 11;

float getChannel(color c, int channel) {
  int ch = channel>5?channel-6:channel;
  float cc;

  switch(ch) {
  case RED: 
    cc = red(c); 
    break;
  case GREEN: 
    cc = green(c); 
    break;
  case BLUE: 
    cc = blue(c); 
    break;
  case HUE: 
    cc = hue(c); 
    break;
  case SATURATION: 
    cc = saturation(c); 
    break;
  default: 
    cc= brightness(c); 
    break;
  }

  return channel>5?255-cc:cc;
}


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


===== RENDU =====

{{:wiki:projets:projets-processing-dsaa1:res_f81233a8_test.jpg?300|}}
{{:wiki:projets:projets-processing-dsaa1:res_6a2e0ab3_test.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:res_6a2e08ce_test.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:res_6ebefba1_test.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:res_59acc3aa_test.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:res_81d52e6d_test.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:res_184d3753_test.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:res_c85efd6e_test.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:res_e49eea52_test.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:res_f812e922_test.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:res_f812fbcc_test.jpg?100|}}
{{:wiki:projets:projets-processing-dsaa1:res_f81233a8_test.jpg?100|}}
TONER KEBAB WIKI

Outils pour utilisateurs

Outils du site

Outils de la page
