# How to draw bitmap array in Processing?

**URL:** <https://discourse.processing.org/t/how-to-draw-bitmap-array-in-processing/21875>\
**Category:** Coding Questions\
**Created:** [June 14, 2020, 9:45pm UTC](https://discourse.processing.org/t/how-to-draw-bitmap-array-in-processing/21875 "2020-06-14T21:45:15Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![R1S8K](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@R1S8K](https://discourse.processing.org/u/R1S8K)\
**Post date:** [June 14, 2020, 9:45pm UTC](https://discourse.processing.org/t/how-to-draw-bitmap-array-in-processing/21875/1 "2020-06-14T21:45:15Z")

</div>

Hi,

I have three points in my question:

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

This is my code:

1. bitmap draw file:

```auto
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();
}

```

1. arrays file:

```auto
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
};

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 14, 2020, 11:29pm UTC](https://discourse.processing.org/t/how-to-draw-bitmap-array-in-processing/21875/2 "2020-06-14T23:29:51Z")

</div>

Hi,

I think you are misleading here at this line :

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

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

```

This means that we are creating a [color](https://processing.org/reference/color_datatype.html) 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 :

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1ff241d8d9b245021d08678faae77d540067fa60.png)  
(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 :

```auto
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();
} 

```

 ![Capture d’écran de 2020-06-15 01-41-14](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6d2fcce1ce0ca23132ceeee00ed4253c2a78b783.png)

> [@R1S8K](#):
>
> Would Processing accept my C coding ?

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! 😉

---

<div class="post-metadata">

**Author:** ![R1S8K](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@R1S8K](https://discourse.processing.org/u/R1S8K)\
**Post date:** [June 14, 2020, 11:41pm UTC](https://discourse.processing.org/t/how-to-draw-bitmap-array-in-processing/21875/3 "2020-06-14T23:41:06Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [June 14, 2020, 11:43pm UTC](https://discourse.processing.org/t/how-to-draw-bitmap-array-in-processing/21875/4 "2020-06-14T23:43:04Z")

</div>

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](https://processing.org/reference/scale_.html)

---

<div class="post-metadata">

**Author:** ![R1S8K](https://avatars.discourse-cdn.com/v4/letter/r/3be4f8/32.png) [@R1S8K](https://discourse.processing.org/u/R1S8K)\
**Post date:** [June 14, 2020, 11:53pm UTC](https://discourse.processing.org/t/how-to-draw-bitmap-array-in-processing/21875/5 "2020-06-14T23:53:34Z")

</div>

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [June 16, 2020, 8:07pm UTC](https://discourse.processing.org/t/how-to-draw-bitmap-array-in-processing/21875/6 "2020-06-16T20:07:27Z")

</div>

> [@R1S8K](#):
>
> I don’t know how `pixels[i]` work

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](https://processing.org/reference/pixels.html)

> 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](https://processing.org/reference/set_.html)