Jump to: navigation, search

Difference between revisions of "Course:Graphisme programmé 2018"

(Code)
(Autres approches)
Line 20: Line 20:
 
''' Linear gradient of multiple colors''' - [https://forum.processing.org/one/topic/linear-gradient-of-multiple-colors.html src]
 
''' Linear gradient of multiple colors''' - [https://forum.processing.org/one/topic/linear-gradient-of-multiple-colors.html src]
  
Le code trouvé dans le forum posait problème au moment de l'accumulation des transition dans le calcul de la couleur du pixel. Nous 'avons donc corrigé pour distinguer clairement les influences.
+
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.
 
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
 
RGB1-------->--------RGB2---------->---------RGB3--------->----------RGB4
Line 29: Line 31:
  
 
0%-----------------------33%-----------------------66%-----------------------100%
 
0%-----------------------33%-----------------------66%-----------------------100%
 +
 +
Code adapté:
  
 
  void setup() {
 
  void setup() {
Line 69: Line 73:
  
  
Le code ci-dessus correspond à la méthode de génération multi-points dans inkscape par exemple.
+
Le code ci-dessus correspond à la méthode de génération de dégradé multi-points dans inkscape par exemple.
  
 
[[File:Inkscape multi-stop-gradient.png|400px]]
 
[[File:Inkscape multi-stop-gradient.png|400px]]
 +
 +
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.
  
 
== Color picker ==
 
== Color picker ==

Revision as of 11:11, 31 January 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 code développé en classe porte sur la génération d'un dégradé à 4 points, placés aux quatre coins d'un rectangle. Les pixels de l'entièreté de la surface subisse l'influence des 4 points. L'influence des 4 points décroit de manière linéaire.

Autres approches

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.

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.

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