Jump to: navigation, search

Course:Graphisme programmé 2018

Graprog18-cover.png

Le cours de cette année porte sur l'exploration graphique de dégradés complexes, produit procéduralement.

Dépôt

Le code développé au cours et l'exemple fonctionnel se trouvent dans la boîte à outils d'Arts2 sur bitbucket:

  • processing/C1_GradientBasics - génération d'un dégradé linéaire RGB simple;
  • processing/C1_GradientGenerator - génération d'un dégradé à 4 points.

Code

Le code développé en classe porte sur la génération d'un dégradé à 4 points, placés aux quatre sommets d'un rectangle. Les pixels de l'entièreté de la surface subissent l'influence de ces 4 couleurs. L'influence des 4 points décroit de manière linéaire.

Voir processing/C1_GradientGenerator dans la boîte à outils pour la version fonctionnelle du code.

Recherches

Les étudiants ont identifié d'autres manière de répondre à la demande de création d'un dégradé à 4 points. Voir ici pour les notes.

Première tentative de résolution

Dans une tentative de résolution du problème, deux étudiants ont proposé la formule suivante.

Dénition de 4 couleurs sous forme d'un tableau de 3 floats:

  • color1, 2, ,3 et 4.


En fonction de la position du pixel dans l'image, définie sur l'axe X et l'axe Y (horizontalement et verticalement):

  • calcul du pourcentage sur l'axe X en fonction de la largeur de l'image, power_x, compris dans l'espace [0,1]
  • calcul du pourcentage sur l'axe Y en fonction de la largeur de l'image, power_y, compris dans l'espace [0,1]


La couleur résultante est calculée comme suit:

pixel[i] = color1 * (1-power_x) + color2 * power_x + color3 * (1-power_y) + color4 * power_y

Le gros problème de cette approche est que la somme des power_ et de leur inverse est égale à 2! Il y a donc 200% d'influence totale à chaque pixel, ce qui implique des dépassements systématiques du maximum des couleurs. En effet, au point 0, 0 (au-dessus à gauche de l'image), la somme de 1 - power_x et de 1 - power_y vaut 2. Lors de l'addition des couleurs pondérées, si les couleurs color1 et color3 ont le canal rouge au maximum, on se retouve avec deux fois le maximum de rouge! De même, si une des deux couleurs est noire, et donc que tous ses canaux sont à 0, l'autre couleur la remplace entièrement.

Linear gradient of multiple colors - src

Le code trouvé dans le forum posait problème au moment de l'accumulation du résultat des transitions. Nous l'avons donc corrigé pour distinguer clairement les influences.

Avec 4 couleurs, trois zones de dégradés se forment. La répartition des couleurs (points de contrôle) est homogène sur la largeur de l'image.

///////// degradé 1 ////////////// degradé 2 ////////////// degradé 3 //////////

RGB1-------->--------RGB2---------->---------RGB3--------->----------RGB4

|----------------------------|----------------------------|----------------------------|

0%-----------------------33%-----------------------66%-----------------------100%

Code adapté:

void setup() {
 size(500, 500);
 smooth();
 frameRate(30);
 background(226, 225, 215);
 PImage pincelmar; 
 pincelmar = createImage(300, 20, RGB);
 pincelmar.loadPixels();
 color c1 = color(255, 0, 0);
 color c2 = color(0, 255, 0);
 color c3 = color(0, 0, 255);
 color c4 = color(255, 255, 0);
 for (int i = 0; i < pincelmar.height; i++) {   
   for (int j = 0; j < pincelmar.width; j++) {
     int index = j + i * pincelmar.width;
     color sc = color( 0, 0, 0 );
     float pc = (float) j / (float) pincelmar.width;
     float third = 1.f/3;
     if ( pc <= third ) {
       sc = lerpColor(c1, c2, pc * 3);
     } else if ( pc <= 2*third ) {
       sc = lerpColor(c2, c3, ( pc - third) * 3);
     } else {
       sc = lerpColor(c3, c4, ( pc - 2*third) * 3);
     }
     pincelmar.pixels[index] = sc;
   }
 }
 pincelmar.updatePixels();
 translate(100, 200);
 image(pincelmar, 0, 0);
}


Résultat après correction du code:

Four points gradient.png


Le code ci-dessus correspond à la méthode de génération de dégradé multi-points dans inkscape par exemple.

Inkscape multi-stop-gradient.png

Les limitations du dégradé linéaire sur les trois canaux RGB apparaissent clairement: des "bosses" lumineuses se forment aux alentours du vert par exemple, dû à la différence de luminosité des mélanges. D'autres méthodes de passage d'une couleur à l'autre existent mais nécessite la transformation des valeurs RGB dans un autre système, le HSL par exemple.

Solution proposée

Graprog18-resolution-schema.png

La solution programmatique proposée dans le sketch C1_GradientGenerator se base sur une découpe en deux paliers.

Les couleurs sont positionnées à chaque sommet du rectangle. L'axe X est horizontal et Y vertical.

  • La couleur 1 est positionnée à l'origine, c'est-à-dire 0,0.
  • La couleur 2 est positionnée aux coordonnées W (largeur du rectangle),0.
  • La couleur 3 est positionnée aux coordonnées W (largeur du rectangle), H (hauteur du rectangle).
  • La couleur 4 est positionnée aux coordonnées 0, H.


Deux couleurs temporaires sont calculées sur l'axe Y, en fonction de la coordonnée Y du pixel courant. Elles correspondent aux couleurs extêmes en X, aux coordonnées 0 (Color A) et W (Color B).

La deuxième étape est de calculer le pourcentage de la Color A et B en fonction de la coordonnée X du pixel courant.

Dans un but d'optimisation, qui sera très utile lors du calcul de grandes surfaces ( >1000 pixels de côté ), le calcul de la Color A et B peut être fait en dehors de la boucle sur l'axe X, ces deux couleurs étant valides pour tous les pixels de la ligne.

Pseudo-code

for Y in [ 0, H ]:
    process color A
    process color B
    for X in [ 0, W ]:
        process pixel color

Related

Color picker

La plupart des progammes graphiques utilisent des dégradés complexes pour faciliter la sélection des couleurs. Les représentations de l'espace RGB sont assez variés. Quelques exemples ci-dessous.

Gimp

Gimp, color picker Gimp, color picker Gimp, color picker

Blender

Blender, color picker

Voir la définition du color picker sur wikipedia:Color_picker wikipedia

Resources


Fleur Isbell - Code-generated colour pattern – Belarus.jpg

Fleur Isbell, graphiste londonienne, couverture pour D&AD - voir la version interactive ici


Carsten nicolai raster gradient 01.jpg

Cartsen Nicolai, artiste allemand, Raster gradient, 2009.


Wegner-guillotine.jpg

Peter Wegner, artiste américain, GUILLOTINE OF SUNLIGHT, GUILLOTINE OF SHADE , 2008