Colors/Color gradient

Theory

Example of intresting color gradient

Introduction

• Playing with Gradient by rockraikar
• gimp concepts : gradients
• Ultra Fractal Gradient Hints by Janet Parke
• Image gradient at wikipedia
• Color gradient at wikipedia

Types of color gradient

Color gradients can be named by :

• dimension
• color model
• number of segments of gradient
• function used to create gradient
• Number of colors

Dimension

1D

Here color of pixel is proportional to 1D variable. For example in 2D space ( complex plane where point z = x+y*i) :

• position with respect to x-axis of Cartesian coordinate system : x
• distance to origin : r=abs(z)
• complex angle angle=arg(z)

An example of a function to return a color that is linearly between two given colors:

 
colorA = [0, 0, 255] # blue
colorB = [255, 0, 0] # red
function get_gradient_color(val):
# 'val' must be between 0 and 1
for i in [1,2,3]:
color[i] = colorA[i] + val * (colorB[i] - colorA[i])
return color

• 

  1D gradient with color proportional to x

• 

  1D gradient with color proportional to radius

• 

  1D gradient with color proportional to angle

2D

Domain coloring plot of the function
ƒ(x) =(x² − 1)(x − 2 − i)²/(x² + 2 + 2i). The hue represents the function argument, while the saturation represents the magnitude.

Because color can be treated as more than 1D value it is used to represent more than one ( real or 1D) variable. For example :

• Robert Munafo uses 2 values from HSV model of color
• John J. G. Savard uses own function

• Domain coloring is a technique for visualizing functions of a complex variable
• matrixlab  : rgb-images in MAtlab

3D

• Hans Lundmark page

Function

One can use any function in each segment of gradient. Output of function is scaled to range of color component.

Number of colors

Number of color is determined by color depth : from 2 colors to 16 mln of colors.

• 

  6-bit RGB uniform palette with black borders

• 

  Image:6-bit RGB uniform palette

• 

  256 VGA color gradient

Repetition and offset

Direct repetition :

Color is proportional to position <0;1> of color in color gradient. if position > 1 then we have repetition of colors. it maybe useful

Mirror repetition  :

"colorCycleMirror - This will reflect the colour gradient so that it cycles smoothly "

Offset :

How to use color gradients in computer programs

Palette graphics, palette replacement mechanism

First find what format of color you need in your program.

After that there are 3 ways making gradient :

• gradient functions
• gradient files
• palette

Gradient functions

Examples :

• Javascript using jQuery

Linear RGB gradient with 6 segments

Result and diagram of GiveRainbowColor function

Here gradient consists from 6 segments. In each segment only one RGB component of color is changed using linear function.

Delphi version

// Delphi version by Witold J.Janik with help Andrzeja Wąsika from [pl.comp.lang.delphi]
//  [i] changes from [iMin] to [iMax]
 
function GiveRainbowColor(iMin, iMax, i: Integer): TColor;
var 
  m: Double;
  r, g, b, mt: Byte;
begin
  m := (i - iMin)/(iMax - iMin + 1) * 6;
  mt := (round(frac(m)*$FF));
  case Trunc(m) of
  0: begin
      R := $FF;
      G := mt;
      B := 0;
    end;
  1: begin
      R := $FF - mt;
      G := $FF;
      B := 0;
    end;
  2: begin
      R := 0;
      G := $FF;
      B := mt;
    end;
  3: begin
      R := 0;
      G := $FF - mt;
      B := $FF;
    end;
  4: begin
      R := mt;
      G := 0;
      B := $FF;
    end;
  5: begin
      R := $FF;
      G := 0;
      B := $FF - mt;
    end;
end; // case
 
  Result := rgb(R,G,B);
end; 
/////

C version

Input of function are 2 variables :

• position of color in gradient, (a normalized float between 0.0 and 1.0 )
• color as an array of RGB components ( integer without sign from 0 to 255 )

This function does not use direct outoput ( void) but changes input variables color. One can use it this way:

GiveRainbowColor(0.25,color);

/* based on Delphi function by Witold J.Janik */
void GiveRainbowColor(double position,unsigned char c[])
{
  /* if position > 1 then we have repetition of colors it maybe useful    */
 
  if (position>1.0){if (position-(int)position==0.0)position=1.0; else position=position-(int)position;}
 
 
 
 
  unsigned char nmax=6; /* number of color segments */
  double m=nmax* position;
 
  int n=(int)m; // integer of m
 
  double f=m-n;  // fraction of m
  unsigned char t=(int)(f*255);
 
 
 
switch( n){
   case 0: {
      c[0] = 255;
      c[1] = t;
      c[2] = 0;
       break;
    };
   case 1: {
      c[0] = 255 - t;
      c[1] = 255;
      c[2] = 0;
       break;
    };
   case 2: {
      c[0] = 0;
      c[1] = 255;
      c[2] = t;
       break;
    };
   case 3: {
      c[0] = 0;
      c[1] = 255 - t;
      c[2] = 255;
       break;
    };
   case 4: {
      c[0] = t;
      c[1] = 0;
      c[2] = 255;
       break;
    };
   case 5: {
      c[0] = 255;
      c[1] = 0;
      c[2] = 255 - t;
       break;
    };
    default: {
      c[0] = 255;
      c[1] = 0;
      c[2] = 0;
       break;
    };
 
}; // case
}

Cpp version

// C++ version
// here are some my modification but the main code is the same 
// as in Witold J.Janik code
//
 
Uint32 GiveRainbowColor(double position)
 
// this function gives 1D linear RGB color gradient 
// color is proportional to position 
// position  <0;1> 
// position means position of color in color gradient
 
{
  if (position>1)position=position-int(position);
  // if position > 1 then we have repetition of colors
  // it maybe useful
  Uint8 R, G, B;// byte
  int nmax=6;// number of color bars
  double m=nmax* position;
  int n=int(m); // integer of m
  double f=m-n;  // fraction of m
  Uint8 t=int(f*255);
 
 
switch( n){
   case 0: {
      R = 255;
      G = t;
      B = 0;
       break;
    };
   case 1: {
      R = 255 - t;
      G = 255;
      B = 0;
       break;
    };
   case 2: {
      R = 0;
      G = 255;
      B = t;
       break;
    };
   case 3: {
      R = 0;
      G = 255 - t;
      B = 255;
       break;
    };
   case 4: {
      R = t;
      G = 0;
      B = 255;
       break;
    };
   case 5: {
      R = 255;
      G = 0;
      B = 255 - t;
       break;
    };
 
}; // case
 
 
  return (R << 16) | (G << 8) | B;
}

Gradient files

File types for color gradient

There are special file types for color gradients:

• The GIMP uses the files with .ggr extension
• Fractint uses .map files.
• UltraFractal uses .ugr - These files can contain multiple gradients
• ual - old Ultra Fractal gradient file

Gnofract4D saves gradients only inside the graphic file, not as separate file.

Gimp ggr files

Gimp gradients can be created thru :

• GUI
• manually in text editor ( use predefined gradients as a base)
• in own programs

Gimp gradient file format is described in:

• GIMP Application Reference Manual
• source files :
  • app/gradient.c and app/gradient_header.h for GIMP 1.3 version.
  • gimp-2.6.0/app/core/gimpgradient.c

Gimp Gradient Segment format :

typedef struct {
  gdouble                  left, middle, right;

  GimpGradientColor        left_color_type;
  GimpRGB                  left_color;
  GimpGradientColor        right_color_type;
  GimpRGB                  right_color;

  GimpGradientSegmentType  type;          /*  Segment's blending function  */
  GimpGradientSegmentColor color;         /*  Segment's coloring type      */

  GimpGradientSegment     *prev;
  GimpGradientSegment     *next;
} GimpGradientSegment;

In GimpConfig style format:

<proposal>
# GIMP Gradient file

(GimpGradient "Abstract 1"
        (segment 0.000000 0.286311 0.572621
                (left-color (gimp-rgba 0.269543 0.259267 1.000000 1.000000))
                (right-color (gimp-rgba 0.215635 0.407414 0.984953 1.000000))
                (blending-function linear)
                (coloring-type rgb))
        (segment ...)
        ...
        (segment ...))
</proposal>

GIMP Gradient
Name: GMT_hot
3
0.000000 0.187500 0.375000 0.000000 0.000000 0.000000 1.000000 1.000000 0.000000 0.000000 1.000000 0 0
0.375000 0.562500 0.750000 1.000000 0.000000 0.000000 1.000000 1.000000 1.000000 0.000000 1.000000 0 0
0.750000 0.875000 1.000000 1.000000 1.000000 0.000000 1.000000 1.000000 1.000000 1.000000 1.000000 0 0

First line says it is a gimp gradient file.

Second line is a gradient's name.

Third line tells the number of segments in the gradient.

Each line following defines the property of each segment in following order :"

[position of left stoppoint] [pos. of middle point] [pos. of right stoppoint] [R for left stoppoint] [G for left stoppoint] [B for left stoppoint] [A for left stoppoint][R for right stoppoint] [G for right stoppoint] [B for right stoppoint] [A for right stoppoint] [Blending function constant] [coloring type constant]

There are only two constants at the end of each line: the blending function constant of the segment (apparently 0=Linear, 1=Curved, 2=Sinusoidal, 3=Spherical (increasing), 4=Spherical (decreasing)) and the second constant is the coloring type of the segment (probably 0=RGB, 1=HSV (counter-clockwise hue), 2=HSV (clockwise hue), most of those shipped with Gimp are RGB).

How to use gradient files in computer programs

• Reading gimp ggr files in python by Ned Batchelder
• Python Pil library functions for reading GIMP gradient files ( in file GimpGradientFile.py)
• perl scripts to convert gimp-1.2.x palettes and gradients into a 1.3 form by Jeff Trefftzs
• Gimp Python plugin: make-gradient.py by Giuseppe Conte
• gimp gradient files - lisp code from Polypen by Yannick Gingras
• Perl functions from GIMP pdb - gradient.pdb

Collections of gradients

• gradcentral
• Cpt-city
• gimp gradients (ggr files) are in directory : /usr/share/gimp/2.0/gradients/