Results 1 to 6 of 6

Thread: The master color tutorial, all you need to know about colors.

  1. #1
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

    Default The master color tutorial, all you need to know about colors.

    This thread is created because of a limit in images on the forum. No one is allowed to post yet till it is finished. I will try to lock the thread while writing. So, DONT POST. Thank you for your understanding ^^

    I am writing this at a slow pace. But I just need to find some time for it. Adding two more posts and I will lock it, will write some stuff tomorrow and next week


    The master color tutorial


    From the basic knowledge to the in depth knowledge.












    By Bart de Boer






    Introduction to this tutorial




    Previously I already wrote a CTS tutorial. Though it became what I had in mind. It wasn't suitable for new script writers with less experience. With this tutorial I hope to make it more accessible by giving star ratings to each individual topic. It isn't necessary to read all of them and it might be wise to not follow topics with three stars when you are just making your first woodcutter.

    The star system:

    1 x
    This topic is suitable for beginners. It doesn't cover any advanced code and it will be applicable in a runescape bot. It might be boring or unnecessary for anyone who has already wrote a script or two.

    2 x
    This topic is suitable for scripters who seek that extra bit of knowledge about the functions. It will cover the color tolerance speed algorithm 2. But won't go to deep about the internal workings of other stuff.

    3 x
    This is complete madness. Most likely not needed for a runescape bot. This topic contains information about internal workings that will make you king of the scripters. Just for real man, not for boys.


    I hope you will enjoy reading this as much as I enjoyed writing it. Though at this moment it is not yet allowed to post comments, I will gladly answer all your questions in my pm box. Good luck!






    Index





    What is a color

    RGB

    Integers and number systems

    Reading a color

    Examples


    Comparing the color


    One on one component - CTS 0

    Pythogaras - CTS 1

    Auto coloring with RGB



    Color spaces


    HSL

    CIE XYZ

    CIE L*a*b*



    More advanced comparing methods


    CTS 2

    CTS 3
    Last edited by masterBB; 09-17-2012 at 01:35 PM.
    Working on: Tithe Farmer

  2. #2
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

    Default

    What is a color



    RGB
    Difficulty:

    When describing a color, you have to split it in components. RGB is one of these systems where a color is described by the amount of Red, Green and Blue. When all three components are zero the color will be black. The higher the number the lighter the color. When all three components are it its highest the color will be white. It is important to fully understand this when comparing colors.


    Some of you might have learned that the three basic colors are red, yellow and blue. This however only applies on to paint and other pigment based color mixing. It is important to drop that knowledge while reading this.

    If you are new to this concept then I suggest looking at the next images and playing around with some color tools. A link to a colortool where you can play with RGB colors provided by colortools.net. Change the three RGB components to see which color that outputs. Yellow for example is 100% red with 100% green and no blue. A color with an equal amount of all three components is a gray color.

    An overview of how RGB mixes:

    Since there are three components involved, creating a 2D image with all the colors isn't easy. I personally prefer to display it as a cube. Where the three axes normally represent the x, y and z value, they now represent the amount of red, green and blue. It is important to note that grey is in the middle while the more colorful colors can be found on the outside. The corner where the purple, cyan and yellow touches each other is white, while on the other side it will be black.

    A RGB cube with a bite out:



    Integers and number systems.
    Difficulty:


    In this paragraph I will explain how the color is stored in simba. Different ways to set it. And how to read it or extract individual RGB components. In simba an integer is not just an integer, but a 32bit signed integer. So what does that mean? An integer in simba can be written in the binary numeral system(ones and zeros) like this 0 0000000 00000000 00000000 00000000.

    If you just read this tutorial for the basic understanding of runescape botting I suggest to continue at chapter 2: Comparing the color.

    0 0000000 00000000 00000000 00000000
    Describes if the integer is positive or negative, not used in simba for colors.

    00000000 00000000 00000000 00000000
    The whole first byte isn't used for colors. In other situations this is used for the alpha(transparency) component. Often they use unsigned integers aka uints for that.

    0 0000000 00000000 00000000 00000000
    This byte holds blue component.

    0 0000000 00000000 00000000 00000000
    This byte holds green component.

    0 0000000 00000000 00000000 00000000
    This byte holds red component.


    But what do those eight ones and zeros mean? Let say the red component is 01100101 and you want to make it a readable decimal number. Since every one represent an 2 to the power of its position you can create the following:


    Though I advice learning to translate binary to decimal numbers, it is not required for this tutorial. As you could see the color components are exactly eight bits or one byte long. This is the same as a two digit hexadecimal number. Ever seen a number being described as A1 FF 00? That is an example of a color noted as a hexadecimal number. Where our decimal number system has 10 different digits, the binary has 2 digits and the hexadecimal got 16 digits. Here is a list with all hexadecimal digits against the others. Note how one hexadecimal F got the same value as four 1's in binary, so with one hexadecimal digit, you have the same highest value as with four binary digits(bits).

    Progress Report:
    hexadecimal   |   decimal   |   binary
     0                  0           0
     1                  1           1
     2                  2           01
     3                  3           11
     4                  4           100
     5                  5           101
     6                  6           110
     7                  7           111
     8                  8           1000
     9                  9           1001
     A                  10          1010
     B                  11          1011
     C                  12          1100
     D                  13          1101
     E                  14          1110
     F                  15          1111


    So how are we going to relate that to colors in simba. Well, an F in hexadecimal is the same as 1111 in binary, we can assume that FF in hexadecimal is the same as 11111111 in binary(eight ones). A color of three bytes, or 24 bits, can be written in only six hexadecimal digits. I made a table of a couple possible colors below. Note that the decimal number is how it is written in simba. The hexadecimal number is how you can write it with the biggest readability in my opinion. The long 24bits binary number is how it is stored in your computers memory. We won't do a lot with that.

    Progress Report:
    Hexadecimal      |         binary            |   decimal  |  color
    00 00 00          00000000 00000000 00000000   0              black
    33 33 33          00110011 00110011 00110011   335543         dark grey
    66 66 66          01100110 01100110 01100110   6710886        grey
    AA AA AA          10101010 10101010 10101010   11184810       light grey
    FF FF FF          11111111 11111111 11111111   16777215       white
    FF 00 00          11111111 00000000 00000000   16711680       blue
    00 FF 00          00000000 11111111 00000000   65280          green
    00 00 FF          00000000 00000000 11111111   255            red
    FF 00 01          11111111 00000000 00000001   16711681       blue with a bit of red
    01 00 FF          00000001 00000000 11111111   65791          red with a bit of blue


    The last two colors of that table got almost no difference in color to their pure variant. Red with a bit of blue, will still be blue to my eyes. The difference is so small, most of you wouldn't even be able to notice it. The decimal number however is completely different. So the decimal number doesn't give an good indication which colors are more, and which are less alike. The first byte will have a lot more power to the decimal number then the last one. Comparing these numbers will give very odd results. The hexadecimal number gives a more accurate difference. You can easily spot only one bit of a component has been added. That is why it is important to see the differences.


    Reading a color
    Difficulty:


    In the previous paragraph I've showed you how to express a color in a hexadecimal number system. It is really important to get this if you want to write readable colors in your code. The first thing I am going to show you is how to set these numbers in pascal. Note that when you read the integer, it is always transformed in a decimal number.

    Here is an example setting five integers with the three different methods. It is important to note that the last example with the binary number only works on lape. When you call Writeln with any of these integers as parameter you will receive the decimal number.

    Simba Code:
    program NumberSystems;

    var
      numbers: Array of Integer;

    begin
      SetLength(numbers,5); //I will give you five examples

      numbers[0] := 11;           //decimal, the number is 11
      numbers[1] := $11;         //hexadecimal, the number is 17
      numbers[2] := $FF00FF;  //hexadecimal, the number is 16711935 and the color is FF blue + FF red = purple
     
      //if you run lape
      numbers[3] := %11;        //binary, then number is 3
      numbers[4] := %111111110000000000000000; //binary, the number is 16711680 and the color is FF blue = blue
    end.

    As you may have noticed by know, is that the hexadecimal number is actually a bit readable. It is good enough if the colors are simple or you don't need to know the exact color.

    Let's take $E3A13E for example. Do you know which color it is? Well, with a bit of practice you will notice that it got a lot of blue, a fair amount of green and little bit of red. So it is a blue color with a bit cyan and with a tiny bit of red. The red will probably only make it a bit lighter, and the cyan wouldn't change the color a lot. What color is it? Take a color in mind. Here it is:



    As you can see, I was close. It is important to have a rough idea what the three components will be when added together. With that skill the abstract number will become a color, which is much easier to work with. Don't be afraid if you still aren't able to read a color by looking at the hexadecimal number. If you aren't familiar with it, it might take some time. It is not really necessary for botting in simple games.

    Of course you might find colors noted like this 3209829 or colors that you converted to a string with Writeln(x) or such. Those can be impossible to read. The number you see says very few about the color. Well, of course it contains the information, but it is almost unreadable for a human. That is why it is also important to be able to transform a normal integer color in the red, green and blue components.

    The simple way:
    Simba Code:
    program TestColor;

    procedure TestColor(color:Integer);
    var
      red, green, blue: Integer;
    begin
      ColorToRGB(color, red, green, blue);
      Writeln('red  = ' + IntToStr(red));
      Writeln('green = ' + IntToStr(green));
      Writeln('blue = ' + IntToStr(blue));
    end;

    begin
      TestColor(4231022);
    end.

    This is an easy and a fast way to split it up in components. Everybody can use this. As you will see the components will be written in the decimal number system. If you want to read them as a hex you can use this code:

    Simba Code:
    program TestColor;

    procedure TestColor(color:Integer);
    var
      red, green, blue: Integer;
    begin
      ColorToRGB(color, red, green, blue);
      Writeln('red  = ' + IntToHex(red));
      Writeln('green = ' + IntToHex(green));
      Writeln('blue = ' + IntToHex(blue));
    end;

    begin
      TestColor(4231022);
    end.

    As you can see 4231022 is the same as $408F6E. Noting it as a hexadecimal number will give you advantage over noting it as a decimal number.

    But there is another way to get the color. With bitwise operators, yes, shit just got real. In the following piece of code I will show you another way of achieving it. I will explain it very roughly because there already a few good tutorials about it. Yakman his tutorial and Alpha Kue his tutorial.

    Simba Code:
    procedure TestColor(color:Integer);
    var
      red, green, blue: Integer;
    begin
      Writeln('red  = ' + toStr(color and $FF));
      //with and $FF it will read the last two hexadecimal digits

      Writeln('green = ' + toStr(color shr 8 and $FF));
      //I move the color 8 binary(2 hex) digits to the right

      Writeln('blue = ' + toStr(color shr 16 and $FF));
      //the same but now with 16
    end;


    Examples
    Difficulty:

    A few color examples:

    ~ Red

    255 red 0 green 0 blue

    color := 255;
    or
    color := $0000FF;

    ~ Blue

    0 red 0 green 255 blue

    color := 16711680;
    or
    color := $FF0000;

    ~ Green

    0 red 255 green 0 blue

    color := 65280;
    or
    color := $00FF00;

    ~ White

    255 red 255 green 255 blue

    color := 16777215;
    or
    color := $FFFFFF;

    ~ Grey

    127 red 127 green 127 blue

    color := 8355711;
    or
    color := $7F7F7F;
    ~ Black

    0 red 0 green 0 blue

    color := 0;
    or
    color := $0;
    Last edited by masterBB; 08-31-2012 at 02:39 PM.
    Working on: Tithe Farmer

  3. #3
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

    Default

    Comparing colors



    One on one component - CTS 0
    Difficulty:


    While comparing colors you may want a very fast algorithm. For example, when the screen you want to search on is big and the response from the script has to happen fast. CTS 0 might be the perfect algorithm to do that. It is the fastest algorithm and supports tolerance for improved results.

    So what does CTS 0 do? As you probably already understand by now, every color is split up in three components. Red, Green and Blue. These components all have a range from 0 to 255. When comparing two colors it will check if the difference between them is less then the tolerance. A simple simba script doing the same:

    Simba Code:
    function CompareCTS0(red, green, blue, red2, green2, blue2, tol: Integer): Boolean;
    begin
      Result := False;

      if Abs(red - red2) > tol then
        Exit;

      if Abs(green - green2) > tol then
        Exit;

      if Abs(blue - blue2) > tol then
        Exit;

      Result := True;
    end;

    COLOR1 = COLOR2?

    Color 1
    • Red = 255
    • green = 17
    • blue = 0


    Color 2
    • Red = 255
    • green = 66
    • blue = 0


    Tolerance = 50

    So yes, the algorithm will return true. The difference between the red and blue components is zero but the green components differ 49. Which is less then 50, our given tolerance.

    COLOR1 = COLOR2?

    Color 1
    • Red = 204
    • green = 17
    • blue = 10


    Color 2
    • Red = 254
    • green = 66
    • blue = 60


    Tolerance = 50

    As you can see, even though the difference for our eyes are much bigger, the algorithm will say the biggest difference between components is 50. Which is almost the same as with the previous colors. The algorithm will return true.

    COLOR1 = COLOR2?

    Color 1
    • Red = 204
    • green = 0
    • blue = 0


    Color 2
    • Red = 255
    • green = 0
    • blue = 0


    Tolerance = 50

    When you look at the color you might think these colors are closer to each other then the previous colors. But our algorithm disagrees. The biggest difference between the components is 51, which is more then our tolerance. This would return false.

    So a short summary of this algorithm in pros and cons:

    Pros

    • Easiest to understand
    • Very fast to calculate


    cons

    • Doesn't really equals our visual experience
    • More prone to color changes
    • No component individual mods



    Pythagoras - CTS 1
    Difficulty:


    This algorithm is a big improvement looking at CTS 0 in terms of how the algorithm its results compare to our visual experiences. However it is a slower method then CTS 0. Note that this is the default algorithm simba uses.


    The greek Pythagoras

    We all know square A plus square B equals square C from pythagoras. So how does this works with comparing colors you might ask? In the chapter about RGB I showed you an RGB cube. It is a cube where the three axes are representing the Red, Green and Blue values. Now imagine the two colors you want to compare are points in that cube. With pythagoras we will calculate the distance between the points. This will result into a value that needs to be less then the tolerance.

    Four points represented in an 3D image

    As you can see in the image, colors can easily be represented on three axes. In this example you will see four colors. With CTS 1 it will take the distance between the points in the 3D space and check if that is less then the tolerance. This is an effective way of comparing colors and will give results closer to the our visual experience. This returns a very accurate result.

    Simba Code:
    function CompareCTS1(red, green, blue, red2, green2, blue2, tol: Integer): Boolean;
    var
      difRed, difGreen, difBlue: Integer;
    begin
      difRed := red - red2;
      difGreen := green - green2;
      difBlue := blue - blue2;

      Result := (Sqr(tol) > (Sqr(difRed) + Sqr(difBlue) + Sqr(difGreen)));
    end;

    As you can notice this functions requires four squares. But the actual speed difference between CTS 0 and CTS 1 is very small. It doesn't matter if you have to use abs or sqr. In both cases you will have a very fast algorithm. Also note how didn't used a square root. Square roots are very slow on every CPU. By squaring the tolerance I will gain a big speed improvement while the function will still function the same.

    COLOR1 = COLOR2?

    Color 1
    • Red = 204
    • green = 0
    • blue = 0


    Color 2
    • Red = 255
    • green = 0
    • blue = 0


    Tolerance = 30

    Result = 30² > (204 - 255)² + (0 - 0)² + (0 - 0)²

    Result = 30² > 41²

    Result = false

    As you can see the result will be false. The squared tolerance will only be 900 and the squared difference between the red components will be 1681. As you will notice, the tolerance has to be more then 41 to return true.

    COLOR1 = COLOR2?

    Color 1
    • Red = 204
    • green = 0
    • blue = 204


    Color 2
    • Red = 255
    • green = 0
    • blue = 255


    Tolerance = 45

    Result = 45² > (204 - 255)² + (0 - 0)² + (204 - 255)²

    Result = 45² > 41² + 41²

    Result = 2025 > 1681 + 1681

    Result = false

    Again the result will be false. Even though the tolerance is now more then 41, the changes in both the blue and red components add up. Making a much higher tolerance needed. The required tolerance would be more then √(41² + 41²). Which is 58. This is a great advantage over CTS 0 in most of the situations.

    So a short summary of this algorithm in pros and cons:

    Pros

    • Very fast to calculate
    • Uses all three color components at once, so it compares the complete color against the tolerance.


    cons

    • Doesn't really equals our visual experience
    • No component individual mods



    Auto coloring with RGB
    Difficulty:


    Sometimes the above cts methods aren't enough for what you want. As you might have noticed I already recreated the CTS 0 and CTS 1 algorithm in pascal script. The big con of using your own CTS algorithm is the big decrease of speed compared to regular methods. In most situations it is best to just use what comes shipped with simba, unless you want to add it yourself to simba's MMLCore or create a fast plugin containing your functions.

    There is one exception, auto coloring. In the world of runescape colors changes quite often to make it harder to bot with screen scraper bots like simba and scar. Getting the perfect 'middle color' with a good tolerance can be very important. A common used problem solver with auto coloring are the roads on the minimap. In this piece of the tutorial I will go in depth on the auto color function used to get the color of a road color.

    Though when you write a script yourself, you may want to take a bigger amount of samples as 5. This is just an example.

    sample 1:


    Red: 82
    Green: 83
    Blue: 76

    Color: 5002066

    sample 2:


    Red: 82
    Green: 79
    Blue: 76

    Color: 5001042

    sample 3:


    Red: 85
    Green: 84
    Blue: 76

    Color: 5002325

    sample 4:


    Red: 79
    Green: 80
    Blue: 75

    Color: 4935759

    sample 5:


    Red: 84
    Green: 83
    Blue: 77

    Color: 5067604

    As you may notice the blue component is the most stable component. However both the CTS methods using RGB don't support anything to indicate that blue is the most stable component. There are no CTS mods for CTS 0 and CTS 1. That is where we kick in with out auto color method.
    Last edited by masterBB; 09-02-2012 at 04:07 PM.
    Working on: Tithe Farmer

  4. #4
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

    Default

    Last edited by masterBB; 08-31-2012 at 09:35 PM.
    Working on: Tithe Farmer

  5. #5
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

    Default

    reserved
    Working on: Tithe Farmer

  6. #6
    Join Date
    Oct 2006
    Location
    Netherlands
    Posts
    3,285
    Mentioned
    105 Post(s)
    Quoted
    494 Post(s)

    Default

    reserved 2
    Working on: Tithe Farmer

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •