PDA

View Full Version : The master color tutorial, all you need to know about colors.



masterBB
08-31-2012, 02:32 PM
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 ^^

http://villavu.com/vb/images/icons/icon4.gifI 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

http://www.ancientbb.com/srl/images/bpln.png

From the basic knowledge to the in depth knowledge.








http://i49.tinypic.com/2rrxg5f.jpg






By Bart de Boer







Introduction to this tutorial

http://www.ancientbb.com/srl/images/bpln.png



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 http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png
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 http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png
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 http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png
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

http://www.ancientbb.com/srl/images/bpln.png





What is a color


RGB http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png

Integers and number systems http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png

Reading a color http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png

Examples http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png

Comparing the color



One on one component - CTS 0 http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png

Pythogaras - CTS 1 http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png

Auto coloring with RGB http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png



Color spaces



HSL http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png

CIE XYZ http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png

CIE L*a*b* http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png



More advanced comparing methods



CTS 2 http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png

CTS 3 http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png

masterBB
08-31-2012, 02:36 PM
What is a color

http://www.ancientbb.com/srl/images/bpln.png



RGB


Difficulty: http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/blank_star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/blank_star.png

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.



http://villavu.com/vb/images/icons/icon4.gif 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 (http://www.colortools.net/color_mixer.html)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:
http://www.mobiliodevelopment.com/wp-content/uploads/2012/04/RGB-colors.gif

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:
http://farm4.staticflickr.com/3116/3103830956_bbe3c4b21f_o.png




Integers and number systems.


Difficulty: http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png


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.


http://villavu.com/vb/images/icons/icon4.gif 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:


http://www.learn-networking.com/wp-content/oldimages/bin-to-dec-conversion.jpg

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).

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.


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: http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png


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.

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:

http://i46.tinypic.com/2aepmrn.png

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:
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:

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 (http://villavu.com/forum/showthread.php?t=18514)and Alpha Kue his tutorial (http://villavu.com/forum/showthread.php?t=79438).

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: http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/blank_star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/blank_star.png

A few color examples:


http://i46.tinypic.com/2ppkhns.png ~ Red


255 red 0 green 0 blue

color := 255;

or
color := $0000FF;




http://i45.tinypic.com/2nj9csi.png ~ Blue


0 red 0 green 255 blue

color := 16711680;

or
color := $FF0000;




http://i48.tinypic.com/hvdjww.png ~ Green


0 red 255 green 0 blue

color := 65280;

or
color := $00FF00;




http://i46.tinypic.com/w1y69c.png ~ White


255 red 255 green 255 blue

color := 16777215;

or
color := $FFFFFF;




http://i50.tinypic.com/ifwjly.png ~ Grey


127 red 127 green 127 blue

color := 8355711;

or
color := $7F7F7F;



http://i48.tinypic.com/uajr6.png ~ Black


0 red 0 green 0 blue

color := 0;

or
color := $0;

masterBB
08-31-2012, 02:50 PM
Comparing colors

http://www.ancientbb.com/srl/images/bpln.png



One on one component - CTS 0


Difficulty: http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/blank_star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/blank_star.png


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:

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: http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/blank_star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/blank_star.png


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
http://www.pythagoras.nu/pyth/img/pythagorasvanSamos.jpg

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
http://renderingpipeline.com/wp-content/uploads/2012/07/texcomp_colorspace.png

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.


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: http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/star.png http://www.bollygraph.com/wp-content/plugins/xavins-review-ratings/default/blank_star.png


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:
http://i48.tinypic.com/anjygx.png


Red: 82
Green: 83
Blue: 76

Color: 5002066

sample 2:
http://i48.tinypic.com/25s7aqa.png


Red: 82
Green: 79
Blue: 76

Color: 5001042

sample 3:
http://i46.tinypic.com/11l6b15.png


Red: 85
Green: 84
Blue: 76

Color: 5002325

sample 4:
http://i47.tinypic.com/uq3qe.png


Red: 79
Green: 80
Blue: 75

Color: 4935759

sample 5:
http://i48.tinypic.com/wi3a14.png


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.

masterBB
08-31-2012, 03:00 PM
Resources


images:


www.learn-networking.com
www.mobiliodevelopment.com
www.pythagoras.nu
http://renderingpipeline.com ~ Very interesting to read, but not related to botting

Tutorials:


Yakman his bitwise operator tutorial (http://villavu.com/forum/showthread.php?t=18514)
Alpha Kue his bitwise operator tutorial (http://villavu.com/forum/showthread.php?t=79438)

masterBB
09-17-2012, 01:35 PM
reserved

masterBB
09-17-2012, 01:38 PM
reserved 2