Fractalforums

Hi
I have made a page and program about color gradients ( types, conversions, use):

https://gitlab.com/adammajewski/color_gradient

What do you think about it ?

Any comments/contrributions are welcome !

TIA

Linkback: https://fractalforums.org/programming/11/color-gradient/3261/

Nice! I think this will be very useful.
  bonus points for code 

Nice page. What is the Linas map for? Looks like someone aimlessly scribbled on the color position plot. Either that or some numerical computation for a particular purpose?

I like to use sine based gradients as they can be implemented in a single line of code, no need for a bunch of conditionals

Thx for your comment

What is the Linas map for?

Linas gradient is gradient used by Linas Vepstas in his page: http://linas.org/art-gallery/index.html

I had another repo where I wanted to understand the algorithms by creating the same images : https://gitlab.com/adammajewski/LinasArtGallery_MandelbrotSet

It is not finished : after some time even Linas doesn't  know how to create some images ( the source code is lost) so help is welcome

I like to use sine based gradients as they can be implemented in a single line of code, no need for a bunch of conditionals

OK. Looks nice and it is easy to implement.

One thing that I have learned from it ( see Kovesi page for example) that there is a difference between good scientific gradient and art gradient. Make a diagram of luminance of sine gradient using :

Y = 0.299 * r + 0.587 * g + 0.114 * b;

and see how Y is changing.

Lightness of the gradient should change similary to data you want to highlight

BTW Linas gradient has not  strictly monotonic lightness so it is not good for some tasks.

Make a diagram of luminance of sine gradient using :

Y = 0.299 * r + 0.587 * g + 0.114 * b;

and see how Y is changing.

In this case it would just be a sum of sinusoids, it looks very sinusoidal

Linas gradient is gradient used by Linas Vepstas in his page: http://linas.org/art-gallery/index.html

I had another repo where I wanted to understand the algorithms by creating the same images : https://gitlab.com/adammajewski/LinasArtGallery_MandelbrotSet

Really neat images, I was amazed to see similar images to what I've generated, but with very different methods!
Here's one among several: (someone called her "princess")
http://linas.org/art-gallery/cirtrac/thumbnail/movcir0.gif

The spectral analysis page http://linas.org/art-gallery/spectral/spectral.html is also a topic I've attempted to discuss here

One can use/check  Fractint map files in Gnuplot:

  set palette file "Skydye07.map" using ($1/255):($2/255):($3/255) # Read in a palette of RGB triples each in range [0,255]
  test palette

I like to use sine based gradients as they can be implemented in a single line of code, ...

Do you know :
http://www.iquilezles.org/www/articles/palettes/palettes.htm

New cubehelix gradient ( c code from gnuplot)




/*
 GNUPLOT - stdfn.h
 Copyright 1986 - 1993, 1998, 2004   Thomas Williams, Colin Kelley
*/
#ifndef clip_to_01
#define clip_to_01(val) \
    ((val) < 0 ? 0 : (val) > 1 ? 1 : (val))
#endif

/*
 input : position
 output : c array ( rgb color)
 
the colour scheme spirals (as a squashed helix) around the diagonal of the RGB colour cube

https://arxiv.org/abs/1108.5083
A colour scheme for the display of astronomical intensity images by D. A. Green
*/
void GiveCubehelixColor(double position, unsigned char c[]){



/* GNUPLOT - color.h
* Petr Mikulik, December 1998 -- June 1999
* Copyright: open source as much as possible
*/

// t_sm_palette
  /* gamma for gray scale and cubehelix palettes only */
  double gamma = 1.5;

  /* control parameters for the cubehelix palette scheme */
  //set palette cubehelix start 0.5 cycles -1.5 saturation 1
//set palette gamma 1.5
  double cubehelix_start = 0.5; /* offset (radians) from colorwheel 0 */
  double cubehelix_cycles = -1.5; /* number of times round the colorwheel */
  double cubehelix_saturation = 1.0; /* color saturation */
double r,g,b;
double gray = position;
 



/*
  Petr Mikulik, December 1998 -- June 1999
  * Copyright: open source as much as possible
  */
// /* Map gray in [0,1] to color components according to colorMode */
// function color_components_from_gray
// from gnuplot/src/getcolor.c
double phi, a;

phi = 2. * M_PI * (cubehelix_start/3. +  gray * cubehelix_cycles);

// gamma correction
if (gamma != 1.0)    gray = pow(gray, 1./gamma);


a = cubehelix_saturation * gray * (1.-gray) / 2.;

// compute
r = gray + a * (-0.14861 * cos(phi) + 1.78277 * sin(phi));
g = gray + a * (-0.29227 * cos(phi) - 0.90649 * sin(phi));
b = gray + a * ( 1.97294 * cos(phi));

// normalize to [9,1] range
r = clip_to_01(r);
g = clip_to_01(g);
b = clip_to_01(b);

// change range to [0,255]
  c[0] = (unsigned char) 255*r; //R
  c[1] = (unsigned char) 255*g; // G
  c[2] = (unsigned char) 255*b; // B

}

 and 3D profiles



...
One thing that I have learned from it ( see Kovesi page for example) that there is a difference between good scientific gradient and art gradient. Make a diagram of luminance of sine gradient using :

Y = 0.299 * r + 0.587 * g + 0.114 * b;

and see how Y is changing.

Lightness of the gradient should change similary to data you want to highlight
...

I'm glad to see this strategy being used. Those numbers are the same ones I use in my gradients in several different places. They line up with how our eyes interpret the lightness of color. I thought those reading here might find the following link interesting. I came across this article while researching alternate color modes... The author calls this HSP, for Hue, Saturation, Perceptive-brightness, and it really does produce some fantastic looking art gradients!
http://alienryderflex.com/hsp.html

ccc tool website looks interesting. Is this related to your project, or just thematically appropriate? I like the gradient description specification they describe, it seems like it could be useful.

One thing on my to-do list for my own projects is to build a gradient editor that, conceptually, maps a spline (cubic? haven't decided yet) through HSP space, so with a few inputs, you'd get a gradient that bends in natural-looking way from one color to another. Hopefully this can avoid the appearence of points and triangles that we sometimes notice in linear gradients.

look also at hsluv

https://www.hsluv.org/

Here you can find implementations in many programing languages
https://github.com/hsluv

======================
https://en.wikipedia.org/wiki/Color_gradient

I have put here a links to 2 papers about ( mostly) continous color gradients
how to create, analyse ....

HTH

look also at hsluv

https://www.hsluv.org/

Here you can find implementations in many programing languages
https://github.com/hsluv
...

Very interesting! I see the relationship to CEILab, which I've always found to be frustratingly unintuitive. It is also modelled on human perception, of course, but without an interface that can be understood by the average user, it wasn't very helpful.

I like how this interface works like the standard HSV colorwheels we're used to seeing, and also offers that window of the possbile color gamut that CEILab interfaces usually show.
(As a side note, I am delighted by the idea of colors that can't be shown with screens, and colors that can't be shown with pigments, and how the real world has examples of both)

I might try implementing HSLuv into my project, if only to see how it compares to the "HSP" formula I posted a link to above. As a side note, one thing I changed in my implentation of HSP was to also bend the Hue value (using polynomial interpolation) to try to 'spread out' the different colors in a more natural-looking way. I find that especially during the shift from yellow to cyan, going through the shades of Green, these colors feel like they're changing much less dramatically than the blue-red section. So rather than interpreting H as a direct decimal value, I like to bend it so the red-orange space is a bit wider, the yellow-cyan is shorter, and the blue-red is wider.

It ends up looking like this:
(You can see a bit of banding around the lightest Blue section, this is where Saturation maxes out and the effect is broken, but I thought it would be more interesting to leave this in, and show the limitations, than to re-render with less brightness or saturation to avoid that limit)

...
It ends up looking like this:
(You can see a bit of banding around the lightest Blue section, this is where Saturation maxes out and the effect is broken, but I thought it would be more interesting to leave this in, and show the limitations, than to re-render with less brightness or saturation to avoid that limit)

Nice. How have you made it ? Can you post the code ?
I can add it to my repo
https://gitlab.com/adammajewski/color_gradient

as a HSP gradient.

I ahve put some links and info :

https://gitlab.com/adammajewski/color_gradient/-/blob/master/doc/DICTIONARY.md

Can you check if it is OK?

I'd be happy to post the code, I just need a little time to get it more finished.
Mine is written in Javascript, I don't know if that's useful for you or not, looks like your repo is mostly C.
Let me know! I'm happy to share.

I'd be happy to post the code, I just need a little time to get it more finished.
Mine is written in Javascript, I don't know if that's useful for you or not, looks like your repo is mostly C.
Let me know! I'm happy to share.

JavaScript is OK

What I do is a function which takesas an
input  real number in range [0.0 , 1.0] ( i call it position)
and gives rgb color as an output