• February 25, 2021, 06:04:25 PM

Login with username, password and session length

Author Topic:  color gradient  (Read 1237 times)

0 Members and 1 Guest are viewing this topic.

Offline C0ryMcG

  • Uploader
  • *
  • Posts: 243
Re: color gradient
« 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.

Online Adam Majewski

  • Fractal Frogurt
  • ******
  • Posts: 450
Re: color gradient
« 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?





Offline C0ryMcG

  • Uploader
  • *
  • Posts: 243
Re: color gradient
« 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

Online Adam Majewski

  • Fractal Frogurt
  • ******
  • Posts: 450
Re: color gradient
« 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}); »

Offline C0ryMcG

  • Uploader
  • *
  • Posts: 243
Re: color gradient
« 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"

Online Adam Majewski

  • Fractal Frogurt
  • ******
  • Posts: 450
Re: color gradient
« 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 »

Offline C0ryMcG

  • Uploader
  • *
  • Posts: 243
Re: color gradient
« 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)

Online Adam Majewski

  • Fractal Frogurt
  • ******
  • Posts: 450
Re: color gradient
« 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 Fluff
  • *****
  • Posts: 396
Re: color gradient
« 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" :) .)

Online Adam Majewski

  • Fractal Frogurt
  • ******
  • Posts: 450
Re: color gradient
« 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




Online Adam Majewski

  • Fractal Frogurt
  • ******
  • Posts: 450
Re: color gradient
« Reply #25 on: February 28, 2020, 03:54:59 PM »

Offline v

  • Fractal Phenom
  • ****
  • Posts: 56
Re: color gradient
« 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 »

Online Adam Majewski

  • Fractal Frogurt
  • ******
  • Posts: 450
Re: color gradient
« 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: 56
Re: color gradient
« 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.

Online Adam Majewski

  • Fractal Frogurt
  • ******
  • Posts: 450
Re: color gradient
« 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
303 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
367 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
1762 Views
Last post May 24, 2020, 05:34:43 PM
by FractalAlex
xx
Color Spaces

Started by gurroa on Fractal movie gallery

0 Replies
190 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
354 Views
Last post October 13, 2017, 12:01:14 PM
by mclarekin