How RGB Colours Work / Learn Binary

[kevin]

  How RGB Colours Work / Learn Binary

Colours for us are really just represented as integer (decimal) values.   These values will range between 0 and 2^24 (24 million).  This gives us 24 million unique colours

All colours resolved down to a integer number for ease, where the R ,G , B levels are mixed together to create this value.    Where each R, G ,B  level will range between 0 and 255.

The confusing apart about this is that internally computers don't use base 10 numbers systems like us  (integers).  They actually store information in binary form.  This is what is causing the unexpected result here.

Binary is a base 2 number system.   Where each each digit has only two states, one or zero. (on or off)

Binary numbers are presented with a "%"  prefix.  You can represent any decimal in binary and vice versa.  

unlike decimal where each column is a multiple of ten (base 10 number system) . In Binary it's a mult of 2.  So the for a 16 digit binary number places (it goes up 32 places) are as follows.
   


32768, 16384, 8192, 4096, 2048, 1024, 256, 128, 64, 32, 16, 8, 4, 2, 1


Some 4 digit binary examples  (numbers from 0 to 15)

Code Select Expand



bin    = combined bin columns  =decimal

%0000  =    =0
%0001  = 1    =1
%0010  = 2    =2
%0101  = 2+1   =3
%0100  = 4   =4
%0101  = 4+1   =5
%0110  = 4+2   =6
%0111  = 4+2+1   =7
%1000  = 8   =8
%1001  = 8+1   =9
%1010  = 8+2   =10
%1011  = 8+2+1   =11
%1100  = 8+4   =12
%1101  = 8+4+1   =13
%1110  = 8+4+2   =14
%1111  = 8+4+2+1  =15



Some 8 digit binary examples  (representing numbers from 0 to 255)


bin        = combined bin columns  =decimal

%00000000  = 0    =0
%00000001  = 1    =1
%00001111  = 8+4+2+1   =15    
%00010000  = 16    =16
%00100001  = 32+1   =33
%01100000  = 64+32   =96
%10000000  = 128   =128
%11000000  = 128+64      =192
%11000000  = 128+64+1     =193
%11000000  = 128+64+32+16+8+4+2+1 =255








What you should notice is that each grouping of 8 binary places gives us the numeric range between 0 and 255, just like our colours even been using !.  

  So therefore to represent 3 colours side by side in binary form,  would take a 24 binary digits  (8 + 8 + 8)...

 example.
 %000000000000000000000000

 This means each group of 8 digits corresponds to either a R,G,B  level.   So by change a binary digit within a certain range will effect the level of this colour component.

  R ='s digits 24-> 17
  G ='s digits 16-> 9
  B ='s digits 8-> 1

Code Select Expand


RRRRRRRRGGGGGGGGBBBBBBBB    
%000000000000000000000000


Examples

Code Select Expand



; Blue
;                     rrrrrrrrggggggggbbbbbbbb
circlec 100,100,25,1,%000000000000000011111111

; Green
;                     rrrrrrrrggggggggbbbbbbbb
circlec 150,100,25,1,%000000001111111100000000

; Red
;                     rrrrrrrrggggggggbbbbbbbb
circlec 200,100,25,1,%111111110000000000000000


; purple
;                     rrrrrrrrggggggggbbbbbbbb
circlec 200,100,25,1,%111111110000000011111111


; yellow
;                     rrrrrrrrggggggggbbbbbbbb
circlec 250,100,25,1,%111111111111111100000000

; white
;                     rrrrrrrrggggggggbbbbbbbb
circlec 300,100,25,1,%111111111111111111111111


;grey
;                     rrrrrrrrggggggggbbbbbbbb
circlec 350,100,25,1,%110000001100000011000000


sync
waitkey





Now obviously working in binary would be a royal pain, with so many digits,  but we could also use HEX.   Hexadecimal is a base 16 number system.  And an equally common number system used when programming.

Hex numbers have a $ symbol prefix.   In Base 16 each digit has a range 0-15.   The values 10,11,12,13,14,15 are represented alphabetically.    

Code Select Expand


dec= hex

0=0
1=1
2=2
3=3
4=4
5=5
6=6
7=7
8=8
9=9
10=A
11=B
12=C
13=D
14=E
15=F




Each digit colun in a hex number is   is worth

 4096,  256,  16 , 1


Each digit in a hex number can represent the same numeric range as a 4digit binary number (0 to 15).   So we can use hex to represent colours also.    

This time, each pair of hex digits presents a  R,G, B channel.   So to represent a complete RGB colour we need a 6 digit hex value.

R= digits   6 and 5
G= digits   4 and 3
B= digits   2 and 1


Here are some 4 digit examples

Code Select Expand


Hex       = combined Hex columns   =decimal

$0000   = ( 0*4096)+(0*256)+(0*16)+(0*1) =0
$0001   = ( 0*4096)+(0*256)+(0*16)+(1*1) =1
$0002   = ( 0*4096)+(0*256)+(0*16)+(2*1) =2
$0003   = ( 0*4096)+(0*256)+(0*16)+(3*1) =3
$0004   = ( 0*4096)+(0*256)+(0*16)+(4*1) =4
$0005   = ( 0*4096)+(0*256)+(0*16)+(5*1) =5
$0006   = ( 0*4096)+(0*256)+(0*16)+(6*1) =6
$0007   = ( 0*4096)+(0*256)+(0*16)+(7*1) =7
$0008   = ( 0*4096)+(0*256)+(0*16)+(8*1) =8
$0009   = ( 0*4096)+(0*256)+(0*16)+(9*1) =9
$000a   = ( 0*4096)+(0*256)+(0*16)+(10*1) =10
$000b   = ( 0*4096)+(0*256)+(0*16)+(11*1) =11
$000c   = ( 0*4096)+(0*256)+(0*16)+(12*1) =12
$000d   = ( 0*4096)+(0*256)+(0*16)+(13*1) =13
$000e   = ( 0*4096)+(0*256)+(0*16)+(14*1) =14
$000f   = ( 0*4096)+(0*256)+(0*16)+(15*1) =15

; Misc examples

$00ff   = ( 0*4096)+(0*256)+(15*16)+(15*1) =255
$0100   = ( 0*4096)+(1*256)+(0*16)+(0*1) =256
$0201   = ( 0*4096)+(2*256)+(0*16)+(1*1) =513
$100a   = ( 1*4096)+(0*256)+(0*16)+(10*1) =4106
$aaaa   = (10*4096)+(10*256)+(10*16)+(10*1) =43690
$ffff   = ( 15*4096)+(15*256)+(15*16)+(15*1) =65535




Example

Code Select Expand


; Blue
;                     rrggbb
circlec 100,100,25,1,$0000fff

; Green
;                     rrggbb
circlec 150,100,25,1,$00ff00

; Red
;                     rrggbb
circlec 200,100,25,1,$ff0000


; purple
;                     rrggbb
circlec 200,100,25,1,$ff00ff

; yellow
;                     rrggbb
circlec 250,100,25,1,$ffff00

; white
;                     rrggbb
circlec 300,100,25,1,$ffffff


;grey
;                     rrggbb
circlec 350,100,25,1,$c0c0c0


sync
waitkey




Once your familiar with hex it's a very useful (and quick) way to represent not only colours, but very large numbers when programming.  Hex and Binary are completary also.

Anyway, getting back to the point of this post.  Is that the RGB command is really just a helper function for converting the separate R,G, B colours levels, into a colour value.  The resulting value will not be a decimal form, but a binary form.

So if we read a colour and display it as an integer.  It generally won't make a lot of sense to us.  

Now If you want to retrieve the R/G/B level from a colour value, you can use the RGBR(), RGBG(), RGBB() functions.  

Code Select Expand



Cls rgb(100,50,25)

c=point(100,100)
print c
print bin$(c)
print hex$(c)
print rgbr(c)
print rgbg(c)
print rgbb(c)

sync
waitkey





Phew...  I've run out of time.  but i hope this has given you something to chew on.

[kevin]

Understanding RGB Colors and Binary Representation in PlayBASIC


 Colors, for us, are often just numbers, specifically integers represented in a decimal format. These numbers fall within the range of 0 to 16,777,215, which corresponds to 2^24 (24 million). This expansive range enables us to express a staggering 24 million distinct colors.

In this representation, each color is broken down into its Red (R), Green (G), and Blue (B) components. These components can each have values ranging from 0 to 255. However, what might appear straightforward can become baffling when you delve into how computers handle these color values.

Internally, computers don't work with base 10 integers like we do. Instead, they store information in binary form, which comprises only two states, 0 or 1 (on or off). This is what accounts for some unexpected results in color representation.

Binary is a base-2 number system, where each digit can only be either 1 or 0. In PlayBASIC, binary numbers are indicated with a "%" prefix. It is important to note that you can convert any decimal value to binary and vice versa. Unlike decimal numbers, where each column is a multiple of ten (base 10), in binary, it's a power of 2. For instance, in a 16-digit binary number, these places are significant:

Code Select Expand


32768, 16384, 8192, 4096, 2048, 1024, 256, 128, 64, 32, 16, 8, 4, 2, 1


Let's explore some 4-digit binary examples representing numbers from 0 to 15:

Code Select Expand


bin   = combined bin columns  = decimal
%0000  =   = 0
%0001  = 1  = 1
%0010  = 2  = 2
%0101  = 2+1  = 3
%0100  = 4  = 4
%0101  = 4+1  = 5
%0110  = 4+2  = 6
%0111  = 4+2+1  = 7
%1000  = 8  = 8
%1001  = 8+1  = 9
%1010  = 8+2  = 10
%1011  = 8+2+1  = 11
%1100  = 8+4  = 12
%1101  = 8+4+1  = 13
%1110  = 8+4+2  = 14
%1111  = 8+4+2+1  = 15


Moving on to 8-digit binary examples representing numbers from 0 to 255:

Code Select Expand



bin       = combined bin columns  = decimal
%00000000  = 0  = 0
%00000001  = 1  = 1
%00001111  = 8+4+2+1  = 15
%00010000  = 16  = 16
%00100001  = 32+1  = 33
%01100000  = 64+32  = 96
%10000000  = 128  = 128
%11000000  = 128+64  = 192
%11000000  = 128+64+1  = 193
%11000000  = 128+64+32+16+8+4+2+1  = 255


Notice how each grouping of 8 binary places corresponds to the numeric range between 0 and 255, similar to the color components (R, G, B) we've been using.

Each group of 8 binary digits represents an R, G, or B channel. Changing a binary digit within the appropriate range will affect the level of that color component:

Code Select Expand


RRRRRRRRGGGGGGGGBBBBBBBB    
%000000000000000000000000




For example, the following PlayBASIC code demonstrates how different colors can be created:

PlayBASIC Code: [Select]

; Blue
;           rrrrrrrrggggggggbbbbbbbb
circlec 100,100,25,1,%000000000000000011111111

; Green
;           rrrrrrrrggggggggbbbbbbbb
circlec 150,100,25,1,%000000001111111100000000

; Red
;           rrrrrrrrggggggggbbbbbbbb
circlec 200,100,25,1,%111111110000000000000000

; Purple
;           rrrrrrrrggggggggbbbbbbbb
circlec 200,100,25,1,%111111110000000011111111

; Yellow
;           rrrrrrrrggggggggbbbbbbbb
circlec 250,100,25,1,%111111111111111100000000

; White
;           rrrrrrrrggggggggbbbbbbbb
circlec 300,100,25,1,%111111111111111111111111

; Grey
;           rrrrrrrrggggggggbbbbbbbb
circlec 350,100,25,1,%110000001100000011000000

sync
waitkey

Working directly with binary can be cumbersome due to the numerous digits involved. As an alternative, you can use hexadecimal (hex) notation, which is a base-16 number system commonly used in programming. Hex numbers are prefixed with a "$" symbol. In base 16, each digit has a range of 0-15, with values from 10 to 15 represented alphabetically:

Code Select Expand


dec = hex

0 = 0
1 = 1
2 = 2
3 = 3
4 = 4
5 = 5
6 = 6
7 = 7
8 = 8
9 = 9
10 = A
11 = B
12 = C
13 = D
14 = E
15 = F


Each digit column in a hex number represents values of 4096, 256, 16, and 1, and can encompass the same numeric range as a 4-digit binary number (0 to 15). This makes hex a practical way to represent colors, where each pair of hex digits corresponds to an R, G, or B channel. To represent a complete RGB color, you need a 6-digit hex value:

R = digits 6 and 5
G = digits 4 and 3
B = digits 2 and 1

Here are some examples:

PlayBASIC Code: [Select]

; Blue
;           rrggbb
circlec 100,100,25,1,$0000fff

; Green
;           rrggbb
circlec 150,100,25,1,$00ff00

; Red
;           rrggbb
circlec 200,100,25,1,$ff0000

; Purple
;           rrggbb
circlec 200,100,25,1,$ff00ff

; Yellow
;           rrggbb
circlec 250,100,25,1,$ffff00

; White
;           rrggbb
circlec 300,100,25,1,$ffffff

; Grey
;           rrggbb
circlec 350,100,25,1,$c0c0c0

sync
waitkey

Once you are familiar with hexadecimal notation, it becomes a very useful and efficient way to represent colors and large numbers in programming. Hex and binary are complementary, and they offer versatile options for various scenarios.

To sum up, the RGB command in PlayBASIC is essentially a utility function for converting individual R, G, and B color levels into a binary color value. This value may not make much sense when displayed as an integer. To retrieve the R/G/B levels from a color value, you can use the RGBR(), RGBG(), and RGBB() functions:

PlayBASIC Code: [Select]

Cls rgb(100,50,25)

c = point(100,100)
print c
print bin$(c)
print hex$(c)
print rgbr(c)
print rgbg(c)
print rgbb(c)

sync
waitkey

In closing, the intricate interplay between RGB colors and binary representation might seem complex at first, but understanding these concepts is crucial for creating vivid and dynamic visuals in PlayBASIC.


Links:

    PlayBASIC Colour Documentation