The function of decomposing color into shades.

Реter Konow 2018.10.08 15:37

For a month, I stubbornly solved the problem of decomposing color into shades. The task turned out to be difficult. I took the Windows color palette as the basis for the study (the one in the chart properties ). After a long study, I still found patterns. And here's how:

First, I decomposed the color into three main components, determining the highest, middle, and lowest.
Further, I began to build graphs and draw lines through the values of the components.
Observing the changes in the numbers in the palette when dragging the slider, I realized that there is a refraction of the angle of ascent of the lines, because at a certain moment the rate of change of the numbers changed.
I set the axis of refraction of the lines to the center of the graph, and saw that each line consists of two segments, each of which has its own ascension angle.
Also, experimenting with the color palette, I realized that there is a maximum ascent angle of the highest component. At first I thought it was 67.5 degrees. However, practice has shown that it is equal to 63.5 degrees.
For a long time, I could not figure out how to plot the line segments of the color components correctly. There were many unknowns. But the main thing is how to find the coordinate of the original color on the chart?
Continuing to experiment with the palette, I noticed that changing the color value by a certain number, the slider moves a certain distance. Gradually, I realized that the slider's shift distance is equal to half the value of the minor component.
I assumed that if I find the coordinate of the highest component on the line of the angle of maximum ascension and add half the value of the lowest component to this point, I will find the coordinate of the original color on the graph. Practice has proven that the assumption was correct.
Given the coordinate of the original color and the axis of refraction, I could calculate the angles of each of the segments and get values for each component along its line. To do this, I used school trigonometry.
After checking the calculations on paper, I started writing the function. Now I want to share it with everyone.

 //+------------------------------------------------------------------+
//|                                                Full Gradient.mqh |
//|                                                      Peter Konow |
//|                                             https://www.mql5.com |
//+------------------------------------------------------------------+
void Диапазон_оттенков( color _Цвет, string &Все_оттенки[ 256 ])
{
 color R,G,B,q;
 //------------------------------------------------------
 string Этот_цвет;
 double Тангенс_угла_старшего_треугольника_1,      
        Тангенс_угла_среднего_треугольника_1,                  
        Тангенс_угла_младшего_треугольника_1,                       
        Значение_в_точке_преломления_старшей_компоненты,  
        Значение_в_точке_преломления_средней_компоненты,
        Значение_в_точке_преломления_младшей_компоненты,    
        Тангенс_угла_старшего_треугольника_2,
        Тангенс_угла_среднего_треугольника_2,    
        Тангенс_угла_младшего_треугольника_2;
 //------------------------------------------------------
 double pi = 3.1415926536 ,
        Comp_1,Comp_2,Comp_3,
         //-----------------------------------------------
        Первая_компонента,
        Вторая_компонента,
        Третья_компонента,
         //-----------------------------------------------
        Исходный_R = GetR(_Цвет), 
        Исходный_G = GetG(_Цвет),  
        Исходный_B = GetB(_Цвет),  
         //-----------------------------------------------
        Старшая_компонента         = Нужная_компонента(Исходный_R,Исходный_G,Исходный_B, 0 ), 
        Средняя_компонента         = Нужная_компонента(Исходный_R,Исходный_G,Исходный_B, 1 ), 
        Младшая_компонента         = Нужная_компонента(Исходный_R,Исходный_G,Исходный_B, 2 ), 
         //-----------------------------------------------
        Координата_исходного_цвета = Старшая_компонента/ tan (( 63.43989 *pi)/ 180 ) + Младшая_компонента/ 2 ; 
         //-----------------------------------------------
        
 //-----------------------------------------------
 if (Старшая_компонента == Исходный_R)R = Старшая_компонента;
 if (Старшая_компонента == Исходный_G)G = Старшая_компонента; 
 if (Старшая_компонента == Исходный_B)B = Старшая_компонента;     
 //------------------------
 if (Средняя_компонента == Исходный_R)R = Средняя_компонента;
 if (Средняя_компонента == Исходный_G)G = Средняя_компонента; 
 if (Средняя_компонента == Исходный_B)B = Средняя_компонента; 
 //------------------------
 if (Младшая_компонента == Исходный_R)R = Младшая_компонента;
 if (Младшая_компонента == Исходный_G)G = Младшая_компонента; 
 if (Младшая_компонента == Исходный_B)B = Младшая_компонента;     
 //==========================================================================================
 if (Координата_исходного_цвета <= 127 )
   {
    Тангенс_угла_старшего_треугольника_1  = Старшая_компонента/Координата_исходного_цвета;
    Тангенс_угла_среднего_треугольника_1  = Средняя_компонента/Координата_исходного_цвета;     
    Тангенс_угла_младшего_треугольника_1  = Младшая_компонента/Координата_исходного_цвета;
     //-----------------------------------------------
    Значение_в_точке_преломления_старшей_компоненты  = Тангенс_угла_старшего_треугольника_1* 128 ;
    Значение_в_точке_преломления_средней_компоненты  = Тангенс_угла_среднего_треугольника_1* 128 ;
    Значение_в_точке_преломления_младшей_компоненты  = Тангенс_угла_младшего_треугольника_1* 128 ;    
     //-----------------------------------------------    
    Тангенс_угла_старшего_треугольника_2  = ( 255 - Значение_в_точке_преломления_старшей_компоненты)/ 128 ;
    Тангенс_угла_среднего_треугольника_2  = ( 255 - Значение_в_точке_преломления_средней_компоненты)/ 128 ;       
    Тангенс_угла_младшего_треугольника_2  = ( 255 - Значение_в_точке_преломления_младшей_компоненты)/ 128 ;
     //-----------------------------------------------    
     for ( int a1 = 0 ; a1 < 128 ; a1++)
      {
       Comp_1 = Тангенс_угла_старшего_треугольника_1*a1;
       Comp_2 = Тангенс_угла_среднего_треугольника_1*a1;
       Comp_3 = Тангенс_угла_младшего_треугольника_1*a1;
       //---------------------------------------------------
       if (Comp_1 > 255 )Comp_1 = 255 ;
       if (Comp_1 > 255 )Comp_2 = 255 ;
       if (Comp_1 > 255 )Comp_3 = 255 ;
       //---------------------------------------------------
       if (R == Старшая_компонента)Первая_компонента = Comp_1;
       if (R == Средняя_компонента)Первая_компонента = Comp_2;
       if (R == Младшая_компонента)Первая_компонента = Comp_3;
       //---------------------------------------------------
       if (G == Старшая_компонента)Вторая_компонента = Comp_1;
       if (G == Средняя_компонента)Вторая_компонента = Comp_2;
       if (G == Младшая_компонента)Вторая_компонента = Comp_3;
       //---------------------------------------------------
       if (B == Старшая_компонента)Третья_компонента = Comp_1;
       if (B == Средняя_компонента)Третья_компонента = Comp_2;
       if (B == Младшая_компонента)Третья_компонента = Comp_3;
       //---------------------------------------------------
       Этот_цвет = ( string ) MathRound (Первая_компонента) + "," + ( string ) MathRound (Вторая_компонента) + "," + ( string ) MathRound (Третья_компонента);
       //---------------------------------------------------------------------------    
       Все_оттенки[a1] = Этот_цвет; 
       //---------------------------------------------------------------------------
      }
     //------------------------------------------------------------------------------
     for ( int a2 = 255 ; a2 >= a1; a2--)
      {
       Comp_1 = 255 - Тангенс_угла_старшего_треугольника_2*q;
       Comp_2 = 255 - Тангенс_угла_среднего_треугольника_2*q;
       Comp_3 = 255 - Тангенс_угла_младшего_треугольника_2*q;
       //---------------------------------------------------
       if (Comp_1 > 255 )Comp_1 = 255 ;
       if (Comp_1 > 255 )Comp_2 = 255 ;
       if (Comp_1 > 255 )Comp_3 = 255 ;
       //---------------------------------------------------       
       if (R == Старшая_компонента)Первая_компонента = Comp_1;
       if (R == Средняя_компонента)Первая_компонента = Comp_2;
       if (R == Младшая_компонента)Первая_компонента = Comp_3;
       //---------------------------------------------------
       if (G == Старшая_компонента)Вторая_компонента = Comp_1;
       if (G == Средняя_компонента)Вторая_компонента = Comp_2;
       if (G == Младшая_компонента)Вторая_компонента = Comp_3;
       //---------------------------------------------------
       if (B == Старшая_компонента)Третья_компонента = Comp_1;
       if (B == Средняя_компонента)Третья_компонента = Comp_2;
       if (B == Младшая_компонента)Третья_компонента = Comp_3;
       //---------------------------------------------------
       Этот_цвет = ( string ) MathRound (Первая_компонента) + "," + ( string ) MathRound (Вторая_компонента) + "," + ( string ) MathRound (Третья_компонента);
       //---------------------------------------------------------------------------    
       Все_оттенки[a2] = Этот_цвет; 
       //---------------------------------------------------------------------------
       q++;
      }
  } 
 //------------------------------------------------------------------------------
 if (Координата_исходного_цвета > 127 )
   {
    Тангенс_угла_старшего_треугольника_1  = ( 255 - Старшая_компонента)/( 255 - Координата_исходного_цвета);
    Тангенс_угла_среднего_треугольника_1  = ( 255 - Средняя_компонента)/( 255 - Координата_исходного_цвета);       
    Тангенс_угла_младшего_треугольника_1  = ( 255 - Младшая_компонента)/( 255 - Координата_исходного_цвета);
     //-----------------------------------------------
    Значение_в_точке_преломления_старшей_компоненты  = 255 - (Тангенс_угла_старшего_треугольника_1* 128 );
    Значение_в_точке_преломления_средней_компоненты  = 255 - (Тангенс_угла_среднего_треугольника_1* 128 );
    Значение_в_точке_преломления_младшей_компоненты  = 255 - (Тангенс_угла_младшего_треугольника_1* 128 );    
     //-----------------------------------------------    
    Тангенс_угла_старшего_треугольника_2  = Значение_в_точке_преломления_старшей_компоненты/ 128 ;
    Тангенс_угла_среднего_треугольника_2  = Значение_в_точке_преломления_средней_компоненты/ 128 ;      
    Тангенс_угла_младшего_треугольника_2  = Значение_в_точке_преломления_младшей_компоненты/ 128 ;
     //-----------------------------------------------    
     for ( int b1 = 0 ; b1 < 128 ; b1++)
      {
       Comp_1 = Тангенс_угла_старшего_треугольника_2*b1;
       Comp_2 = Тангенс_угла_среднего_треугольника_2*b1;
       Comp_3 = Тангенс_угла_младшего_треугольника_2*b1;
       //---------------------------------------------------
       if (Comp_1 > 255 )Comp_1 = 255 ;
       if (Comp_1 > 255 )Comp_2 = 255 ;
       if (Comp_1 > 255 )Comp_3 = 255 ;
       //---------------------------------------------------
       if (R == Старшая_компонента)Первая_компонента = Comp_1;
       if (R == Средняя_компонента)Первая_компонента = Comp_2;
       if (R == Младшая_компонента)Первая_компонента = Comp_3;
       //---------------------------------------------------
       if (G == Старшая_компонента)Вторая_компонента = Comp_1;
       if (G == Средняя_компонента)Вторая_компонента = Comp_2;
       if (G == Младшая_компонента)Вторая_компонента = Comp_3;
       //---------------------------------------------------
       if (B == Старшая_компонента)Третья_компонента = Comp_1;
       if (B == Средняя_компонента)Третья_компонента = Comp_2;
       if (B == Младшая_компонента)Третья_компонента = Comp_3;
       //---------------------------------------------------
       Этот_цвет = ( string ) MathRound (Первая_компонента) + "," + ( string ) MathRound (Вторая_компонента) + "," + ( string ) MathRound (Третья_компонента);
       //---------------------------------------------------------------------------    
       Все_оттенки[b1] = Этот_цвет; 
       //---------------------------------------------------------------------------
      }
     //------------------------------------------------------------------------------
     for ( int b2 = 255 ; b2 >= b1; b2--)
      {
       Comp_1 = 255 - Тангенс_угла_старшего_треугольника_1*q;
       Comp_2 = 255 - Тангенс_угла_среднего_треугольника_1*q;
       Comp_3 = 255 - Тангенс_угла_младшего_треугольника_1*q;
       //---------------------------------------------------
       if (Comp_1 > 255 )Comp_1 = 255 ;
       if (Comp_1 > 255 )Comp_2 = 255 ;
       if (Comp_1 > 255 )Comp_3 = 255 ;
       //---------------------------------------------------       
       if (R == Старшая_компонента)Первая_компонента = Comp_1;
       if (R == Средняя_компонента)Первая_компонента = Comp_2;
       if (R == Младшая_компонента)Первая_компонента = Comp_3;
       //---------------------------------------------------
       if (G == Старшая_компонента)Вторая_компонента = Comp_1;
       if (G == Средняя_компонента)Вторая_компонента = Comp_2;
       if (G == Младшая_компонента)Вторая_компонента = Comp_3;
       //---------------------------------------------------
       if (B == Старшая_компонента)Третья_компонента = Comp_1;
       if (B == Средняя_компонента)Третья_компонента = Comp_2;
       if (B == Младшая_компонента)Третья_компонента = Comp_3;
       //---------------------------------------------------
       Этот_цвет = ( string ) MathRound (Первая_компонента) + "," + ( string ) MathRound (Вторая_компонента) + "," + ( string ) MathRound (Третья_компонента);
       //---------------------------------------------------------------------------    
       Все_оттенки[b2] = Этот_цвет; 
       //---------------------------------------------------------------------------
       q++;
      }
   }   
 //------------------------------------------------------------------------------  
}
//+------------------------------------------------------------------+
//| Получение значения компонента R                                  |
//+------------------------------------------------------------------+
double GetR( const color aColor)
  {
   return (aColor& 0xff );
  }
//+------------------------------------------------------------------+
//| Получение значения компонента G                                  |
//+------------------------------------------------------------------+
double GetG( const color aColor)
  {
   return ((aColor>> 8 )& 0xff );
  }
//+------------------------------------------------------------------+
//| Получение значения компонента B                                  |
//+------------------------------------------------------------------+
double GetB( const color aColor)
  {
   return ((aColor>> 16 )& 0xff );
  }
//--------------------------------------------------------------------
double Нужная_компонента( double C1, double C2, double C3, int Index)
{
 double Components[ 3 ]; 
 //----------------------------------------------
 Components[ 0 ] = C1;
 Components[ 1 ] = C2;
 Components[ 2 ] = C3;
 //----------------------------------------------
 ArraySort (Components, WHOLE_ARRAY , 0 , MODE_DESCEND );
 //----------------------------------------------
 return (Components[Index]);
}

Реter Konow 2018.10.08 15:38 #1

Here's the script for testing:

void OnStart()
  {
   color Main_color     = C'213,0,0';//здесь ставите нужный цвет. Компилируете. Тот же цвет ставите в цветовой палитре виндоус. Сравниваете цвета.
   string Gradient[256];
   //------------------------
   Диапазон_оттенков(Main_color,Gradient);
   //------------------------
   for(int a1 = 0; a1 < 256; a1++)Alert(__FUNCTION__,"  Gradient[",a1,"]  ",Gradient[a1]);
  }

Files:

Gradient_test_1.mq4 30 kb

Vladimir Pastushak 2018.10.08 15:44 #2

Реter Konow:

Here is the script for testing:

Thank you! It would be good to write code in English with comments and send such codes to the library...

Реter Konow 2018.10.08 15:46 #3

It's also very interesting how this problem is solved with the CCanvas class. How can you get all the shades of the original colour through it?

Реter Konow 2018.10.08 15:48 #4

Vladimir Pastushak:

Thank you! It would be good to write code in English with comments and send such codes to the library...

Agreed. I'll translate it in my spare time. You mean codebase?

Vladimir Pastushak 2018.10.08 15:49 #5

Реter Konow:

Agreed. I'll translate in my spare time. You mean the code base?

The codebase has a library section, which is where such codes are stacked and updated.

Реter Konow 2018.10.08 15:50 #6

Vladimir Pastushak:

The code base has a library section where such codes are stacked and updated.

I see.

Alexey Viktorov 2018.10.08 16:06 #7

Vladimir Pastushak:

Thank you! It would be good to write code in English with comments and send such codes to the library...

For CodeBade one should definitely write it in the international language. But why insist on it in a Russian forum?

Personally I'm disgusted with this international... because I don't know it at all and I understand it much better in our native Russian.

[ARCHIVE!] Any rookie question, "New Neural" is an Writing code in Russian.

Georgiy Merts 2018.10.08 16:18 #8

In colourimetry, as I recall, there are a bunch of different systems.

There's probably a ready-made system out there that meets the needs, and formulas for switching between them.

Реter Konow 2018.10.08 16:24 #9

Georgiy Merts:

In colourimetry, as I recall, there are a bunch of different systems.

There's probably a ready-made system out there that meets the needs, and formulas to go between them.

I have one function. You send a colour, you get all the shades. Next, - any gradient can be drawn by simply doing an array loop.

Реter Konow 2018.10.08 16:31 #10

A little later, I made a change. Initially, the function void. Doesn't return a value. But then I made it int type and added

return(Координата_исходного_цвета);

Thus, in addition to the array of shades, the function began to return the number of the cell in which the original colour sent to it is located. This makes it easier to draw a gradient. From the original colour you can move either to the left or to the right along the array.

Any questions from newcomers Array out of range Questions from Beginners MQL5

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

New comment