Taking the code from the tinyscreen.cpp file and translating it to javascript (which works analogous):
function rgb(color)
{
var r=(color&0x03)<<4;//two bits
var g=(color&0x1C)<<1;//three bits
var b=(color&0xE0)>>2;//three bits
if(r&0x10)r|=0x0F;//carry lsb
if(g&0x08)g|=0x07;//carry lsb
if(b&0x08)b|=0x07;//carry lsb
console.log(r,g,b);
}
Running it in Javascript reveals following mapping:
c = 0 => r = 0, g = 0, b = 0
c = 1 => r = 31, g = 0, b = 0
c = 2 => r = 32, g = 0, b = 0
c = 3 => r = 63, g = 0, b = 0
This is a bit unfortunate since this color difference is practically almost unnoticeable.
A better approach (and I think this is also a bit cheaper for the processor) is this:
function rgb(color)
{
var r=(color&0x03);//two bits
var g=(color>>2)&7;//three bits
var b= color>>5;//three bits
r|=r<<2|r<<4;//carry lsb
g|=g<<3;
b|=b<<3;
console.log(r,g,b);
}
Basically the bits get just repeated until the 6 bits are full. This results in the following mapping:
1 => 21 0 0
2 => 42 0 0
3 => 63 0 0
4 => 0 9 0
5 => 21 9 0
6 => 42 9 0
7 => 63 9 0
8 => 0 18 0
9 => 21 18 0
10 => 42 18 0
11 => 63 18 0
12 => 0 27 0
13 => 21 27 0
14 => 42 27 0
15 => 63 27 0
16 => 0 36 0
17 => 21 36 0
18 => 42 36 0
19 => 63 36 0
20 => 0 45 0
21 => 21 45 0
22 => 42 45 0
23 => 63 45 0
24 => 0 54 0
25 => 21 54 0
26 => 42 54 0
27 => 63 54 0
28 => 0 63 0
29 => 21 63 0
30 => 42 63 0
31 => 63 63 0
So the gaps are now constant. Next I want to see how the writeBuffer function works and if it can be tweaked too.