Dégradé de couleur en RGB Résolu

Question

Bonjour.

Voila pour représenter des températures je dois dans un programme je dois faire un dégradé de couleurs du jaune au rouge. Il faut donc que je fasse ça avec les RGB. Comment faire pour obtenir un dégradé uniforme avec n couleurs différentes? 

Je demande pas l'algorithme tout fait (bien que je ne sois pas contre) mais au moins le principe :" tu ajoutes deux au rouge et trois au vert" enfin quelque chose comme ça que je puisse ensuite généraliser dans un algorithme.

Donc voila si quelqu'un peut me donner la méthode de création d'un dégradé merci bien.

 Quand la merde vaudra de l'or les pauvres naitront sans trou du cul. Coluche.

Pistol_Pete · Answer

Salut

Il faut que tu convertisses tes couleurs en HSL (Hue saturation Luminance) Ainsi en ne modifiant qu'un unique parametre, Hue, tu auras ton jolie degrader.
Il faut donc que tu codes la convertion du HSL en RGB, (C'est pas tres difficile)

A+

cs_laurent1024 · Answer

Cela doit pouvoir aussi marcher :
Rouge = [255, 0, 0]
jaune = [255, 165, 0] (d'apres http://fr.wikipedia.org/wiki/Orange_(couleur))
n = nombre de couleur intermédiaire
 0 <= x <=  n 
Couleur intermédiaire x = [255, x * 165/n, 0]

Cdt

vecchio56 · Answer

D'accord avec laurent, pourquoi passer par HSL?

_____________________________________

Miquel75 · Answer

> Il faut que tu convertisses tes couleurs en HSL 

Pas de rapport.
Les gradients se sont toujours faits en bouclant sur RGB

moumouteb · Answer

Pour avoir tester la méthode de Laurent je suis ok.
A la seule condition de remplacer jaune par jaune=[255,255,0] (le lien qui ait mis est celui du orange ^^).
Enfin la technique marche très bien ici (et me suffit j'en demande pas plus) mais c'est vrai que si le degradé devait se faire entre d'autres couleurs ça deviendrait peut être un peu plus problèmatique (si il faut jouer sur plusieurs couleurs en même temps).

Mais pour ma part ça me va très bien merci.

<hr width="100%" size="2" />
Quand la merde vaudra de l'or les pauvres naitront sans trou du cul. Coluche.

Pistol_Pete · Answer

Salut Vecchio

Pourquoi passer par HSL? Essaie simplement de faire un dégrader du rouge au violet en RGB et tu comprendras. (Regardes la boite de dialogue "couleurs personnalisées" avec Paint c'est plus parlant.)

Miquel75 >>je pense que tu parles trop vite. J'ai toujours fais mes dégrader en HSL et c'est pas près de changer. 

A+

vecchio56 · Answer

Je fais toujours mes dégradés en RGB, et ca n'a rien de sorcier
Et je ne comprends pas pourquoi avec ta méthode on ne joue que sur le paramètre Hue

_____________________________________

Pistol_Pete · Answer

J'aimerai bien voir ta méthode pour faire de large dégrader. Du rouge au violet par exemple. Moi je ne change que la teinte (Hue) la saturation et l'éclairement reste constant. Je n'ai donc qu'un unique paramètre sur lequel je boucle. En RVB Rouge (206,0,0) <-------------> Vert(20,206,0)<---------->Violet(206,0,206) En HSL Rouge(0,240,97)<-------------> Vert(76,240,97)<---------->Violet(200,240,97) C'est flagrant. D'ailleurs ce n'es pas par hasard que Paint utilise HSL pour générer sont dégrader: En abscisse la teinte, en ordonnée la saturation et en z la luminance. Je trouve que cet espace de couleur est très instinctif et devrait être plus utilisé.C'est bien plus facile de segmenter des images couleurs dans cet espace. A+

vecchio56 · Answer

Mais en HSL, tu ne peux pas faire de dégradé entre 2 couleurs quelconques...

_____________________________________

Pistol_Pete · Answer

Il faut que les couleurs aient la même saturation et la même luminance pour faire facilement un dégrader. Après il faut feinter comme en RGB. 

A+

luhtor · Answer

Bas c'est clair. Pour un soft scientifique hors de question de faire un dégradé avec du rgb directement alors que pour du rendu temps réel 3D, ca peut s'imaginer.

Miquel75 · Answer

> Paint utilise HSL pour générer sont dégrader:

Evite de dire n'importe quoi.
J'ai le source de MSPaint sous les yeux...

luhtor · Answer

Il semble pourtant clair que le dégradé est généré dans l'espace HSL. Une seule des composantes varient suivant chaque axe, alors que ce n'est pas le cas pour les composantes rgb.

vecchio56 · Answer

D'après ce que je comprends, le HSL n'est utile que dans des cas très particuliers (si on prend un dégradé entre 2 couleurs quelconques, il y a forcément plusieurs composantes qui varient...)

_____________________________________

Pistol_Pete · Answer

Oui ca c'est certain que si on prend 2 couleurs aleatoirement et que l'on veux faire un dégrader entre ces deux couleurs, il y aura plusieurs composantes qui changeront.
Mais je maintiens que c'est plus facile de faire un dégrader en HSL

A+

vecchio56 · Answer

J'aimerais bien savoir en quoi c'est plus facile, car à part amener des calculs supplémentaires (pour faires les conversions), je ne vois pas ce que ca apporte.

_____________________________________

Pistol_Pete · Answer

Salut
Je te propose un petit jeu pour voir laquelle des deux méthodes est la plus facile a réaliser.
Le but du jeu est de reproduire à l'identique le dégradé de la boite de dialogue," modifier les couleurs" de MSPaint.
Miquel75 nous assurant (en ayant les code sous les yeux)  qu'il est généré sans passez par le systeme HSL cela ne devrait pas posser de probleme pour le coder en RGB.

Il nous restera plusqu'a comparer la méthode la plus facile a implementer.

A+

vecchio56 · Answer

Pourquoi ne pas comparer les algos permettant de faire un dégradé entre 2 couleurs (puisque c'est le sujet de la discussion)?

_____________________________________

Pistol_Pete · Answer

Oui je veux bien mais le probleme c'est que l'on aura jamais le meme degrader avce nos deux alogorithmes... Alors que la tu sais ce que tu dois obtenir. Voila ma version HSL: #define _WIN32_WINNT 0x0501 #define _WIN32_IE 0x0501 #include //#include "resource.h" HINSTANCE hinst; HWND hmain; char szappname[] = "Degrader"; HBITMAP hBmp; UCHAR *ucBits=0; double Hue_2_RGB(double v1,double v2,double vH ) //Function Hue_2_RGB { if ( vH < 0 ) vH += 1; if ( vH > 1 ) vH -= 1; if ( ( 6 * vH ) < 1 ) return ( v1 + ( v2 - v1 ) * 6 * vH ); if ( ( 2 * vH ) < 1 ) return ( v2 ); if ( ( 3 * vH ) < 2 ) return ( v1 + ( v2 - v1 ) * ( ( 0.666666 ) - vH ) * 6 ); return v1; } void HSL_to_RGB(double H,double S,double L,double *R,double *G,double*B) { double tmp1,tmp2; H=(double)H/239; //h,s,l compris entre 0 et 1 S=(double)S/240; L=(double)L/240; if(S==0) { *R = 255 * L; *G = 255 * L; *B = 255 * L; } else { if(L<0.5)tmp2 = L * (1 + S); else tmp2 = (L + S) - (L * S); tmp1=2 * L - tmp2; *R = 255 * Hue_2_RGB( tmp1, tmp2, H + ( 0.333333 ) ); *G = 255 * Hue_2_RGB( tmp1, tmp2, H ); *B = 255 * Hue_2_RGB( tmp1, tmp2, H - ( 0.333333) ); } } void DegraderHSL(UCHAR *ucBits) { int i,j; double R,G,B; for(i=0;i<240;i++) for(j=0;j<240;j++) { HSL_to_RGB(i,240-j,120,&R,&G,&B); ucBits[(i+j*240)*4]=(int)B; ucBits[(i+j*240)*4+1]=(int)G; ucBits[(i+j*240)*4+2]=(int)R; } } LRESULT CALLBACK AppWndProc(HWND hwnd, UINT mssg, WPARAM wParam, LPARAM lParam) { static int cx=800,cy=600; switch(mssg) { case WM_CREATE: ucBits = new UCHAR[240*240*4]; if(ucBits==0)exit(0); hBmp=CreateBitmap(240,240,1,32,ucBits); memset(ucBits,0,240*240*4); DegraderHSL(ucBits); SetBitmapBits (hBmp,240*240*4,ucBits); break; case WM_PAINT: HDC hdc,hdcMem; HBITMAP hBmpTmp; PAINTSTRUCT ps; hdc = BeginPaint (hmain, &ps) ; hdcMem = CreateCompatibleDC(NULL); hBmpTmp = (HBITMAP)SelectObject(hdcMem,hBmp); SetStretchBltMode(hdc,HALFTONE); StretchBlt (hdc, 0, 0, cx, cy,hdcMem, 0, 0,240,240, MERGECOPY) ; DeleteObject(hBmpTmp); DeleteDC(hdcMem); EndPaint(hmain, &ps); break; case WM_SIZE: cx = LOWORD (lParam) ; cy = HIWORD (lParam) ; break; case WM_DESTROY: PostQuitMessage(0); return 0; } return DefWindowProc(hwnd, mssg, wParam, lParam); } DWORD __stdcall InitInstance() { WNDCLASSEX wndcls; memset(&wndcls, 0, sizeof(WNDCLASSEX)); wndcls.cbSize = sizeof(WNDCLASSEX); wndcls.lpfnWndProc = AppWndProc; wndcls.style = CS_HREDRAW | CS_VREDRAW; wndcls.hInstance = hinst; wndcls.lpszClassName = szappname; wndcls.hbrBackground = (HBRUSH) GetStockObject(WHITE_BRUSH); wndcls.hCursor = LoadCursor(0, IDC_ARROW); if(!RegisterClassEx(&wndcls)) return 0; hmain = CreateWindowEx(0, szappname, szappname, WS_OVERLAPPEDWINDOW, CW_USEDEFAULT, CW_USEDEFAULT, 800, 600, NULL, NULL, hinst, NULL); return (hmain != 0); } int WINAPI WinMain(HINSTANCE hInstance, HINSTANCE x, PSTR y, int z) { MSG msg; hinst = hInstance; if(!InitInstance()) return 0; ShowWindow(hmain, SW_NORMAL); while(GetMessage(&msg, NULL, 0, 0)) { TranslateMessage(&msg); DispatchMessage(&msg); } return 0; }

vecchio56 · Answer

C'est sur que pour ce dégradé-là, HSL est plus adapté, c'est d'ailleurs une sorte de représentation à mon sens de ce qu'est le codage HSL (tu fais varier H et S et tu obtiens ca).

_____________________________________

Pistol_Pete · Answer

Je suis tout a fait d'accord avec toi. Les couleurs dans le systeme HSL sont plus instinctif plus proche de la perception humaine.

Cependant ca me parait étrange que les programmeurs de MSPaint voulant faire une représentation du codage HSL ne passe pas par le HSL...
J'aimerai que Miquel75 nous disent un peu plus précisement de la manière adoptée pour code ce dégrader.

vecchio56 · Answer

Ce n'est pas spécialement MSPaint qui est fait comme ca, c'est une boite de dialogue qui fait aprtie intégrante de Windows, tu l'obtiens en appelant la fonction ChooseColor (ca m'étonnerait aussi qu'il soit fait en RGB...)

_____________________________________

Pistol_Pete · Answer

Ha je ne savais pas pour cette boite de dialogue. C'est bon a savoir merci.

Bon en fait je pense que tout dépend du dégradé que l'on veut faire. Si on veut faire un dégradé entre deux couleurs voisines le codage RGB est amplement suffisant. Si on veut faire un dégradé plus étandu, le HSL semble etre une meilleure représentation

Je ne suis pas mécontent que tu penses comme moi pour la boite de dialogue ChooseColor.

VelocityPulse · Answer

Salut a tous ! 

J’ai beaucoup travaillé sur le sujet et pour ceux qui veulent la version pure C voici comment j’ai procédé. 

typedef struct s_rgb 
{ 
  int r; 
  int g; 
  int b; 
} t_rgb;

typedef struct s_dual_color 
{ 
  t_rgb c1; 
  t_rgb c2; 
} t_dual_color;

La fonction:
c = les deux couleurs
c.c1 -> le départ
c.c2 -> la fin
n = le nombre de couleurs intermédiaires 
p = l’endroit où nous nous trouvons (la position) 

Cette fonction renvoi une couleur en rbg correspondant a la position (p) sur une nuance de deux couleur (c) avec comme information l’écart entre la couleur de depart et celle de fin (n).

t_rgb ft_find_color_gradient(t_dual_color c, int n, int p) 
{ 
  t_rgb d;

d.r = c.c1.r + (int)(((float)(c.c2.r - c.c1.r) / (float)n) * (float)p); 
  d.g = c.c1.g + (int)(((float)(c.c2.g - c.c1.g) / (float)n) * (float)p); 
  d.b = c.c1.b + (int)(((float)(c.c2.b - c.c1.b) / (float)n) * (float)p);

return (d); 
}

Dégradé de couleur en RGB

24 réponses

Votre réponse

Discussions similaires