How to draw bitmap array in Processing?

R1S8K · June 14, 2020, 9:45pm

Hi,

I have three points in my question:

How to draw this bitmap array in Processing ?
I also want to scale up the final output drawing.
Would Processing accept my C coding ?

This is my code:

bitmap draw file:

void setup() {
  size(128, 64);  
}

void draw() {
  background(1);
  //scale(10,10);
  loadPixels();
  for (int i = 0; i < 1024; i++) {
    pixels[i+BMP] = pixels[i];
  }
  updatePixels();
}

arrays file:

char BMP [] = {
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,
0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,
0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,
0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,
0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,
0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,
0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,
0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0x00,0x00,0x00,0x00,0x00,0x00,0x00,

0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x03,0x03,0x03,0x03,0x03,0x03,0x03,
0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,
0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,
0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,
0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,
0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,
0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,
0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x03,0x00,0x00,0x00,0x00,0x00,0x00,0x00,

0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xFF,
0xFF,0xFF,0xFF,0xFF,0xFF,0x7F,0x7F,0x7F,0x7F,0x7F,0x7F,0x7F,0x7F,0x7F,0x7F,0x7F,
0x7F,0x7F,0x7F,0xFF,0xFF,0xFF,0xFF,0xFE,0xFC,0xF0,0x00,0x00,0x00,0xFF,0xFF,0xFF,
0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFE,0xF0,0xC0,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0xC0,0xF8,0xFF,0xFF,0xFF,0xFF,0xFF,0x7F,0xFF,0xFF,0xFF,0xFF,
0xFF,0xFF,0xFF,0x00,0x00,0x00,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0x7F,0x7F,0x7F,
0x7F,0x7F,0x7F,0x7F,0x7F,0x7F,0x7F,0x7F,0xFF,0xFF,0xFF,0xFF,0xFE,0xFE,0xFC,0xF8,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,

0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xFF,
0xFF,0xFF,0xFF,0xFF,0xFF,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,0xF0,
0xF0,0xF0,0xF8,0xFF,0xFF,0xFF,0xFF,0xFF,0xBF,0x0F,0x00,0x00,0x00,0xFF,0xFF,0xFF,
0xFF,0xFF,0xFF,0x0E,0x00,0x01,0x0F,0x7F,0xFF,0xFF,0xFF,0xFF,0xFE,0xF0,0x80,0x00,
0x00,0xC0,0xF0,0xFF,0xFF,0xFF,0xFF,0xFF,0x3F,0x07,0x01,0x00,0xFF,0xFF,0xFF,0xFF,
0xFF,0xFF,0xFF,0x00,0x00,0x00,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0x80,0x80,0x80,
0x80,0x80,0x80,0x80,0x80,0x80,0x80,0x80,0x80,0xC0,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,
0x3F,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,

0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xFF,
0xFF,0xFF,0xFF,0xFF,0xFF,0xC3,0xC3,0xC3,0xC3,0xC3,0xC3,0xC3,0xC3,0xC3,0xC3,0xC3,
0xC3,0xC3,0xC3,0xC3,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xF8,0x00,0x00,0xFF,0xFF,0xFF,
0xFF,0xFF,0xFF,0xFC,0x00,0x00,0x00,0x00,0x03,0x0F,0x7F,0xFF,0xFF,0xFF,0xFF,0xFC,
0xFC,0xFF,0xFF,0xFF,0xFF,0x3F,0x0F,0x01,0x00,0x00,0x00,0x00,0xFF,0xFF,0xFF,0xFF,
0xFF,0xFF,0xFF,0x00,0x00,0x00,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0xFF,0x3F,0x3F,0x3F,
0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x1F,0x1F,0x07,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,

0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x3F,
0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,
0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x1F,0x1F,0x0F,0x01,0x00,0x00,0x3F,0x3F,0x3F,
0x3F,0x3F,0x3F,0x1F,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x03,0x0F,0x3F,0x3F,0x3F,
0x3F,0x3F,0x3F,0x07,0x01,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x3F,0x3F,0x3F,0x3F,
0x3F,0x3F,0x1F,0x00,0x00,0x00,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x3F,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,

0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,
0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,
0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,
0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,
0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,
0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,
0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,
0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0xE0,0x00,0x00,0x00,0x00,0x00,0x00,0x00,

0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x07,0x07,0x07,0x07,0x07,0x07,0x07,
0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,
0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,
0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,
0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,
0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,
0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,
0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x07,0x00,0x00,0x00,0x00,0x00,0x00,0x00
};

josephh · June 14, 2020, 11:29pm

Hi,

I think you are misleading here at this line :

pixels[i+BMP] = pixels[i];

Saying i + BMP makes no sense because you can’t add an integer (i) and an array of char.
On the right side of the assign statement, writing pixels[i] means that you are affecting the pixel it’s value which is useless.

It depends on the size of the bitmap image that is stored in your array but I assume that pixels are stored linearly (as pixels) so you can say :

pixels[i] = color(BMP[i]);

This means that we are creating a color with the char value (0 means black and 255 means white) at the i location then assigning it to the pixels of the screen.

This is the output :

void setup() {
  size(128, 64);
  
  println(BMP.length);
}

void draw() {
  background(0);
  
  loadPixels();
  for (int i = 0; i < 1024; i++) {
    pixels[i] = color(BMP[i]);
  }
  updatePixels();
  
  noLoop();
}

Capture d’écran de 2020-06-15 01-21-59
(Note that the minimal size of a Processing window is around 100px on each directions so that’s why there’s some grey bands…)

But the image looks crunched, to scale it you can use a PImage to render it then scale it :

PImage bitmap;

void setup() {
  // 10x resolution
  size(1280, 640);
  
  // Create a PImage with RGB colors
  bitmap = createImage(128, 64, RGB);
}

void draw() {
  background(0);
  
  bitmap.loadPixels();
  for (int i = 0; i < 1024; i++) {
    bitmap.pixels[i] = color(BMP[i]);
  }
  bitmap.updatePixels();
  
  // Scale then display the image (scale more on y axis)
  scale(10, 80);
  image(bitmap, 0, 0);
  
  noLoop();
}

Java syntax is close to C type languages so it’s not difficult to adapt sometimes. The big difference is that it’s object oriented.

Hope it helps!

R1S8K · June 14, 2020, 11:41pm

Yeah helped me a lot !

But how to control the aspect ratio between x and y ?

Because the output is squeezed to the y direction.

Update:

Oooooh wait a minute !!

Actually, the write pattern that this code would work is with microcontroller LCD that receives data bytes as vertical bytes.

So here I have to figure a way to take the vertical data of each byte in this array.

josephh · June 14, 2020, 11:43pm

I updated my answer, you can add a second parameter to the scale() function to scale non uniformly on both axis :

https://processing.org/reference/scale_.html

R1S8K · June 14, 2020, 11:53pm

Thanks man !

I’m thinking now of how to take the MSB of each byte for 8 bits loop and put all these bits for the 1st y column then move to the next x.

To draw the byte in a vertical pattern.

I want to do like this:

uint8_t i,j,arr1[1]={0xf0};

int main(){

for(i=0;i<1;i++){
    for(j=0;j<8;j++){
        if(arr1[i] & 0x80){
            printf("1\n");
        }
        else{
            printf("0\n");
        }
        arr1[i] <<= 1;
    }
}

    return 0;
}

But how to do that in Processing ?

Because I don’t know how pixels[i] work.

jeremydouglass · June 16, 2020, 8:07pm

Here is how pixels[] works:

The pixels[] array contains the values for all the pixels in the display window. These values are of the color datatype. This array is defined by the size of the display window. For example, if the window is 100 x 100 pixels, there will be 10,000 values and if the window is 200 x 300 pixels, there will be 60,000 values. pixels[] / Reference / Processing.org

Setting the color of a single pixel with set(x, y) is easy, but not as fast as putting the data directly into pixels[] . The equivalent statement to set(x, y, #000000) using pixels[] is pixels[y*width+x] = #000000 . set() / Reference / Processing.org

Topic		Replies	Views
Output window pixels very small Beginners	3	459	June 12, 2020
Question as drawing with pixels on Processing Coding Questions	1	315	May 23, 2020
I want to draw pixels in bigger sizes with more simple methods Coding Questions homework	1	247	September 28, 2021
Why the pixel isn't squared? Coding Questions	6	380	June 16, 2020
Pixel sorting in processing 3.4 Coding Questions	6	2220	November 23, 2020

How to draw bitmap array in Processing?

Related topics