color gradient

  • 29 Replies
  • 936 Views

0 Members and 1 Guest are viewing this topic.

Online C0ryMcG

  • *
  • Uploader
  • *
  • Posts: 217
« Reply #15 on: February 17, 2020, 01:02:57 AM »
Here it is on Github
https://github.com/C0rymcg/HSP

Just like yours, it uses [0-1] to describe the h s and p values

RGB is handled by the functions as being integers within [0-255] (although that would be easy to change if needed)

I also included a demo html file that shows the results of these functions nicely.

Offline Adam Majewski

  • *
  • Fractal Fluff
  • *****
  • Posts: 352
« Reply #16 on: February 19, 2020, 05:07:22 PM »
Cool. Works well
I see color stripe and example gradient
Both looks great

Lets call coordinate of the color stripe (x,y)
I use x as a gradient position ( real number from 0 to 1). So it is 1D gradient
Pixels with the same y ( vertical line) have the same color

In your program the color is not the same . Do you use 2D gradient?





Online C0ryMcG

  • *
  • Uploader
  • *
  • Posts: 217
« Reply #17 on: February 20, 2020, 04:04:32 AM »
Partly yes... In my demo there is some simple shading on the top and bottom edge of the image just to make it look pretty.

So when it renders, I use the gradient array and HSPtoRGB(), to get R, G, B values, and multiply those by a value between 0 and 1 chosen with y

Offline Adam Majewski

  • *
  • Fractal Fluff
  • *****
  • Posts: 352
« Reply #18 on: February 20, 2020, 06:09:44 PM »
Partly yes...


Ok . So I have changed your HSP 2D gradeint to 1D by simply moving brightnes from the y loop ( j) to x loop ( i) and setting it to the constant values = 1

Now it does not look so nice, but it is really 1D gradient

Usually gradients (  a set of colors arranged in a linear order ) are based of monocity of some parameter, like lightnes

https://gitlab.com/adammajewski/color_gradient/-/blob/master/doc/THEORY.md#taxonomy-of-color-gradients


Can you describe the idea of HSP gradients ?

In the colorstripe ther is :

var color = HSPtoRGB({h: i / canv.width, s: 0.8, p: lerp(0.2,0.5,bright)});

So it is HSP Rainbow with H from o to 1 . Am I right ?

 p: lerp(0.2,0.5,bright)

 is  Perceived brightness.


So new :

var color = HSPtoRGB({h: 1.0, s: 0.8, p: i / canv.width});




« Last Edit: February 20, 2020, 07:52:56 PM by Adam Majewski, Reason: var color = HSPtoRGB({h: 1.0, s: 0.8, p: i / canv.width}); »

Online C0ryMcG

  • *
  • Uploader
  • *
  • Posts: 217
« Reply #19 on: February 21, 2020, 04:23:46 AM »
Yes, you understand correctly!

You can simplify the loop further, now, by replacing the P setting in the HSPtoRGB function call to "0.5" instead of "lerp(0.2,0.5, bright)"
Then you won't need Bright to be defined at all, and it will stay at 0.5 perceptual brightness.

"Lerp" is short for "Linear Interpolation" and was only included to quickly add that shadowing effect.

...
Can you describe the idea of HSP gradients ?
...
I've had to think about this... First of all, I'd say that a regular gradient is a series of colors where some or all of the properties that define those colors change gradually and consistently over that series.

This is similar to what you said, but I don't normally think of a gradient as necessarily needing one aspect of the color series to stay the same. As long as the changes are not sudden, and don't show obvious acceleration or deceleration, it fits my idea of a gradient.

With this in mind I'd say that an HSP gradient is a type of  gradient (or color series) where the defining properties are chosen to represt how humans see color, rather than by how our devices display it.
The result is that gradients in this colorspace (Or any good perception-based colorspace) will look more natural and convincing as gradients, and less "Computer generated"

Offline Adam Majewski

  • *
  • Fractal Fluff
  • *****
  • Posts: 352
« Reply #20 on: February 22, 2020, 11:13:34 AM »
I have  made linear P gradient using c code from http://alienryderflex.com/hsp.html


Code: [Select]
void GiveHSPColor(double position, double c[]){

double r;
double g;
double b;
double h = 1.0;
double s = 1.0;
double p = position;


// var color = HSPtoRGB({h: i / canv.width, s: 0.8, p: lerp(0.2,0.5,bright)});
// p is changing from 0 to 1
// s and h are fixed to 1
HSPtoRGB(h,s,p, &r, &g, &b);

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


  c[0] = r; //R
  c[1] = g; // G
  c[2] = b; // B
}


I can change s to lower values like 0.5
« Last Edit: February 22, 2020, 01:11:44 PM by Adam Majewski, Reason: mod »

Online C0ryMcG

  • *
  • Uploader
  • *
  • Posts: 217
« Reply #21 on: February 22, 2020, 09:50:48 PM »
This makes sense. I find it's often necessary to limit either S or P in order to get nice looking results, since the function will quickly reach the limits of our monitors' color gamut if these values are both high.
While it's often nice to have bright and saturated colors, I think a properly chosen mix or blend is even nicer.

It looks like your graph is reflecting this... in the first one you have hue set to 1 or 0, so the result is red, and it can ramp in intensity up to 1 without showing limtiations.
But in your second example you have a different value for S, I'm guessing, and you can see R reach full intensity before B can, which results in that bend in Y at around p = 0.65... That would correspond to a visually detectable change in the gradient for a human viewer, too, although it may be quite subtle.

So that would be an example of where high brightness, even when saturation is at 0.5, would reveal the inability of our monitors to display certain HSP gradients.
(Of course, there are limitations in every colorspace, theoretically... in RGB, our monitors can't display any color that has a channel brighter than 255, for example... The difference here is just that HSP is a little bit more limited than RGB for certain hues)

Offline Adam Majewski

  • *
  • Fractal Fluff
  • *****
  • Posts: 352
« Reply #22 on: February 23, 2020, 09:25:29 AM »
....
The more I read the less I know (:-)) I seemed a easy topic to me when I started ...

Offline hobold

  • *
  • Fractal Flamingo
  • ****
  • Posts: 307
« Reply #23 on: February 23, 2020, 02:01:05 PM »
There is actually quite a bit of literature on this topic. Relevant buzzwords: "color calibration" should lead to information on the limitations of the various display devices. "Color correction" is about different color spaces and mapping between them. "Tone mapping" is about making the best of the limitations of a given display device.

I found it surprising how deep that particular rabbit hole is, compared to our thoughtlessness when we talk about color in everyday life.

(Bonus buzzword: "tetrachromacy" :) .)

Offline Adam Majewski

  • *
  • Fractal Fluff
  • *****
  • Posts: 352
« Reply #24 on: February 23, 2020, 02:40:56 PM »
Here is a cubehelix gradient on the HSV color wheel
https://opendarkroom.com/color-wheel-rendering/

The curve is  wrong, I still working on it




Offline Adam Majewski

  • *
  • Fractal Fluff
  • *****
  • Posts: 352
« Reply #25 on: February 28, 2020, 03:54:59 PM »

Offline v

  • *
  • Fractal Phenom
  • ****
  • Posts: 42
« Reply #26 on: March 03, 2020, 08:47:11 PM »
I want to leave this program here:
Code: [Select]
#lang "fblite"
dim pi as double
pi = 2*asin(1)

sw = 800
sh = 600
screenres sw,sh,32

dim as double x, yr, yg, yb, yy
for x=0 to 1 step 0.001
   
    yr = 0.5 - 0.5*sin(2*pi*x - pi/2)
    yg = (0.5 + 0.5*sin(2*pi*x*1.5 - pi/2)) * -(x < 0.66)
    yb = (0.5 + 0.5*sin(2*pi*x*1.5 + pi/2)) * -(x > 0.33)
   
    pset (sw*x, sh/4 - 100*yr), rgb(255,0,0)
    pset (sw*x, sh/4 - 100*yg), rgb(0,255,0)
    pset (sw*x, sh/4 - 100*yb), rgb(0,0,255)
       
    yy = 0.299 * yr + 0.587 * yg + 0.114 * yb
    pset (sw*x, sh/2 - 200*yy)
   
    line (sw*x, 3*sh/4 - 100)-step(0, 100), rgb(255*yr, 255*yg, 255*yb)
next

sleep
system
« Last Edit: March 03, 2020, 09:11:55 PM by v »

Offline Adam Majewski

  • *
  • Fractal Fluff
  • *****
  • Posts: 352
« Reply #27 on: March 03, 2020, 08:57:01 PM »
I want to leave this program here:

Can you post image ?

Offline v

  • *
  • Fractal Phenom
  • ****
  • Posts: 42
« Reply #28 on: March 03, 2020, 09:13:52 PM »
I added it, it is similar to previous images. I had lost this program and needed it but now found it on another computer so it will have a second home here.

Offline Adam Majewski

  • *
  • Fractal Fluff
  • *****
  • Posts: 352
« Reply #29 on: March 15, 2020, 02:44:22 PM »
new Sine, LSine, LSineExp maps:

https://gitlab.com/adammajewski/color_gradient


clip
Mandelbrot gradient repeating help

Started by lukaxh on Noob's Corner

1 Replies
115 Views
Last post August 07, 2020, 12:30:30 AM
by mrrudewords
clip
numerical aproximation of the scalar field gradient

Started by Adam Majewski on Programming

0 Replies
313 Views
Last post July 29, 2018, 09:22:17 PM
by Adam Majewski
xx
Windows Gradient Converter, Apophysis to Kalle's Fraktaler

Started by Mandel Meute on Programming

21 Replies
1398 Views
Last post May 24, 2020, 05:34:43 PM
by FractalAlex
xx
Color Spaces

Started by gurroa on Fractal movie gallery

0 Replies
155 Views
Last post February 27, 2019, 11:43:07 AM
by gurroa
xx
color trial s13

Started by mclarekin on Fractal Image Gallery

0 Replies
309 Views
Last post October 13, 2017, 12:01:14 PM
by mclarekin