RGB Compact Format

Suraj143 · Jan 7, 2019

I'm doing a Neo pixel project & I want to deal with 3byte colour variables.For PIC micros I need a compact way of save RGB colours in a Table read instead of 3 bytes.Mike (Pommie) proposed me the 332 format (RRRGGGBB).
Need some advice regarding 332 method.Does it have 7 levels for Red, Green and 3 levels for blue?

Pommie · Jan 7, 2019

If you're curious how this looks, go to this page and copy this code into it,

Code:

<!DOCTYPE html>
<html>
<body>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
document.getElementById("scream").onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 0, 0);
  var imgData = ctx.getImageData(0, 0, c.width, c.height);
  // invert colors
  var i;
  for (i = 0; i < imgData.data.length; i += 4) {
    imgData.data[i] = (imgData.data[i]+16) & 0b11100000;;
    imgData.data[i+1] = (imgData.data[i+1]+16) & 0b11100000;
    imgData.data[i+2] = (imgData.data[i+2]+32) & 0b11000000;
    imgData.data[i+3] = 255;
  }
  ctx.putImageData(imgData, 0, 0);
};
</script>

<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>

</body>
</html>

When you press run it copies the picture into the 332 format. You can see the difference but if they wern't side by side I doubt you could tell which was which.

Mike.
P.S. Hope the above works. First time trying.
Edit, changed the code to stop it making the picture darker.

Pommie · Jan 7, 2019

That "improved" code caused some wrapping around of colours. This avoids that,

Code:

<!DOCTYPE html>
<html>
<body>
<img id="scream" src="img_the_scream.jpg" alt="The Scream" width="220" height="277">
<canvas id="myCanvas" width="220" height="277" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
document.getElementById("scream").onload = function() {
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var img = document.getElementById("scream");
  ctx.drawImage(img, 0, 0);
  var imgData = ctx.getImageData(0, 0, c.width, c.height);
  // invert colors
  var i;
  for (i = 0; i < imgData.data.length; i += 4) {
      if(imgData.data[i]<(256-16))
        imgData.data[i] = (imgData.data[i]+16) & 0b11100000;
    else
        imgData.data[i] = imgData.data[i] & 0b11100000;
      if(imgData.data[i+1]<(256-16))
        imgData.data[i+1] = (imgData.data[i+1]+16) & 0b11100000;
    else
        imgData.data[i+1] = imgData.data[i+1]+16 & 0b11100000;
      if(imgData.data[i+2]<(256-32))
        imgData.data[i+2] = (imgData.data[i+2]+32) & 0b11000000;
    else
        imgData.data[i+2] = imgData.data[i+2] & 0b11000000;
    imgData.data[i+3] = 255;
  }
  ctx.putImageData(imgData, 0, 0);
};
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>

Mike.

Suraj143 · May 5, 2019

Hi, I'm about to write my new RGB project & going to use 332 format to show colours using a single byte.
I extracted a single byte & below shows the brightness levels.

Code:

Single byte Format
b1 b0 g2 g1 g0 r2 r1 r0

r2 r1 r0
---------
001 =4 (low bright)
010 =8
011 =16
100 =32
101 =64
110 =128
111 =255 (hi bright) 

b1 b2
------
00 =4 (low bright)
01 =32
10 =128 
11 =255 (hi bright)

I can show many of colours. But my point is for red & green I can show dim levels upto 7 stages because it has 3 bits wide.
but for blue I can only show dim levels upto 4.

Is there any method to show more dim levels in colour blue?

Pommie · May 5, 2019

The reason the blue has only 4 levels is the human eye can't distinguish blue as good as it can red and green.

Here's the 888 version of the scream.

And here's the 332 version.

I can tell the difference but only if they are both shown. Images are from the above code.

Mike.
Edit, the levels should just be moved into the most significant bits of the colour. So blue = 0,64,128,192 - the other (lower) bits can be zero or one depending on choice. You can of course vary the intensity by moving where the MSB is in the 8 bit version.

Welcome to our site!

Electro Tech is an online community (with over 170,000 members) who enjoy talking about and building electronic circuits, projects and gadgets. To participate you need to register. Registration is free. Click here to register now.

RGB Compact Format

Suraj143

Active Member

Pommie

Well-Known Member

Pommie

Well-Known Member

Suraj143

Active Member

Pommie

Well-Known Member

Attachments

Similar threads

Latest threads

New Articles From Microcontroller Tips