How to draw pixel at specific location on the buffer?

Hi,

I want to develop a function that put a pixel on the main image buffer.

Because I want to draw a bitmap from 1024 byte array.

This what I got so far:

PImage pi;

void draw_pixel(int x,int y){
  pi = createImage(1280, 640, RGB); // I think this could be temporary pixel buffer with related main image dimensions 
  scale(10); // increase size of pixel
  pi.loadPixels();
  pi.pixels[x] = color(0); // draw pixel at specified buffer location
  pi.updatePixels();
  image(pi, x, y); // I don't know much about this line but I think it's for uploading the final buffer copy to the image pointer
}


void setup(){
  size(1280, 640);
  background(255);
  noSmooth();
  draw_pixel(2,1); // call the function to put a pixel at x = 2, y = 1
}
1 Like

What will be the real purpose of this function?
Wouldnā€™t it be better to use PGraphics as a buffer, where upon you can use all methods?

1 Like

Yes, it will render the array which you finished with pi.updatePixels(); placing it on the screen.
The pixel array in the PImage contains the color of the pixels which are integers.
Itā€™s good for applying filters etc. However with a PGraphics buffer you can use all drawing methods and also change the value of a single pixel using set()
The two codes below do the same thing, setting the pixel at location x=3 y=5 to red.

PImage pi;

void setup() {
  size(150, 150);
  pi = createImage(32, 32, RGB); 
  pi.loadPixels();
  for (int y = 0; y < pi.height; y++ ) { 
    for (int x = 0; x < pi.width; x++ ) { 
      int loc = x + y * pi.width; 
      if (x == 3 && y == 5) {
        pi.pixels[loc] = color(255, 0, 0);
      }
    }
  }
  pi.updatePixels();
  image(pi, 0, 0);
}

//-----------------------------------

PGraphics pg;

void setup(){
  size(150, 150);
  pg = createGraphics(32, 32); 
  pg.beginDraw();
  pg.background(0);
  pg.set(3, 5, color(255, 0, 0));
  pg.endDraw();
  image(pg, 0, 0);
}
3 Likes

The real purpose of this function is to simulate other graphics programming for another platform.

Where Processing would help me a lot in compiling/uploading time. As my programming platform is for embedded systems, and uploading the code to the microcontroller every time and compile the code also would take a lot of time comparing if I have done it in software area.

So itā€™s just a helping tool for my embedded systems programming, otherwise I would go back to my hardware and just continue my programming there in coding, compiling and uploading the code to the hardware.

1 Like

Yep, II got the idea.

I was able to finally put a pixel anywhere in the size graphic screen.

Embedded systems is a wide term, but nevertheless, one way to export the pixel array to another platform after completing the icon design, is by saving it as a text file. (or if you wish as a byte file).

void setup() {
  size(150, 150);
  pg = createGraphics(32, 32); 
  pg.beginDraw();
  pg.background(0);
  pg.set(3, 5, color(255, 0, 0));
  pg.noStroke();
  pg.fill(255, 0, 0);
  pg.rect(10, 10, 5, 5);
  pg.endDraw();
  image(pg, 0, 0);
  //pg.loadPixels();
  String[]list = new String[pg.pixels.length];
  for (int i = 0; i < pg.pixels.length; i++) {
    float r = red(pg.pixels [i]); 
    float g = green(pg.pixels[i]); 
    float b = blue(pg.pixels[i]);
    list[i] = str(r)+" "+str(g)+" "+str(b);
  }
  saveStrings("data/data.txt", list);
}
2 Likes

Thank you so much, I need some time to study and understand the code you provided me.

I actually donā€™t want to deal with colors right now so when using set(); or pixels[loc] = color(); I just have to set one parameter to get the black color.

My application is for LCD that need monochrome stuff. So it should be easy as a start.

Iā€™m interested in computer graphics programming. But I need to deal with microcontroller projects, because itā€™s my job in my work.

Embedded systems is a wide term, but nevertheless, one way to export the pixel array to another platform after completing the icon design, is by saving it as a text file. (or if you wish as a byte file).

Yep I agree itā€™s a wide term, my area is quite small and even Iā€™m not professional. Iā€™m trying to get the basics of many things.

I use programs that are designed to convert bitmaps to C arrays for this kind of applications.

1 Like

Well, then you are at the right place. Processing is perfect for this kind of work. You will find plenty examples about this subject here, with direct communication over serial usb, bluetooth, wifi etc.

I donā€™t think you donā€™t need those. You can write the code yourself.
What processor and lcd display model are you using?

1 Like

Yep, I got eventually to know Processing for Arduino projects.

The board is maple mini with STM32 chip.
The lcd is the 0.96" OLED display that is 128x64 pixels.

The reason for this is that using the hardware and software of debugging the code and uploading it to the maple mini is ok.

But I liked the idea of doing the same process of outputting pixels with similar coding.

I can choose the resolution that fit any LCD I can find on the market.

So for example in places; like, in airport where I wanted to do some programming with microcontroller graphics without taking the hardware out of my bag and connect the cables and put the stuff aside and start programming.

Now, I only have to open my laptop and do my programming directly and simulate the lcd output with processing output window.

I was thinking of the least lines for drawing a pixel at specific scale of output window.

And I think I concluded to these lines, would you agree with me ?

PImage img;

void setup() {
  size(1280, 640);
  background(255);
  img = createImage(1,1,RGB);
  scale(10);
  img.loadPixels();
  image(img, 10, 0);
}

Can I minimize the code more ?

I donā€™t understand exactly why it has to be scaled, but you could draw the pixels as a rectangle and use a factor for your x y values. It has the same effect.

void setup() {
  size(1280, 640);
  background(255);
  fill(0);
  rect(100, 0, 10, 10);
}
1 Like

Because my monitor resolution is 2560x1440 so the default pixels are so small. If I wanted to draw a normal 128x64 picture, then it would be so small and difficult to track how my coding is going.

What Iā€™m done with the function Iā€™m working on, then I would post it and you can test it and know what Iā€™m talking about :slight_smile:

If you want to display a preview at scale, the easiest thing is to use scale() or PGraphics.scale()

oops, you just said that, sorry.

Another option is to use a PShader for pixel upscaling.

For those kind of things I use the ā€˜magnifying glassā€™ utility. It has various modes on windows. :smile:

1 Like

I donā€™t think I would like to do that every time I test the code, because I test each step Iā€™m doing.

Anyway, I think Processing wonā€™t be so much useful for me right now !

I canā€™t do simple things like in C !

I think Processing is JAVA.

There are different problems.

  1. ā€œcharā€ is 16-bit, which would lead to a more difficult programming for me.
  2. I want to work on bit checking/shifting. Where my array is 8-bit, so I donā€™t know how Processing would treat my 8-bit array of type ā€œcharā€ !

These problems could be solved basically, Iā€™m trying now.

My current problem is this:

      if (BMP[y*8] && shifter){
        pi.pixels[y] = color(white);
      }
      else {
        pi.pixels[y] = color(black);
      }

I get this error problem:

The operator && is undefined for the argument type(s) char, int

What to do now ?

Processing.org/reference/bitwiseAND.html
Processing.org/reference/inequality.html

if ((BMP[y*8] & shifter) != 0) {

or:
Processing.org/reference/conditional.html

pi.pixels[y] = color((BMP[y*8] & shifter) != 0? white : black);

1 Like

Iā€™m sorry I shouldā€™ve posted the whole code so you know the cause of the error.

Here is my current code:

PImage pi;

int black = 0;
int white = 255;
int r;
char shifter = 0x80;
void setup() {
  background(0);
  size(1280, 640);
  pi = createImage(128, 64, RGB); 
  scale(10);
  pi.loadPixels();
  r = 0;
  for (int y = 0; y < 8192; y++ ) { 
      if ((BMP[y*8]) & (shifter)){
        pi.pixels[y] = color(white);
      }
      else {
        pi.pixels[y] = color(black);
      }
  }
  pi.updatePixels();
  image(pi, 0, 0);
  noSmooth();
}

And this is part of the array I want to bit test it:

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,

Itā€™s 1024 bytes, so Iā€™m testing this code now in C compiler and itā€™s working. But how to do that in Processing ?

Iā€™m sorry Iā€™m a bit noob so I move slowly, the bit bang isnā€™t my final goal.

My final goal is to know how a bitmap is draw on a computer output window.

Why not

for (int y = 0; y < 24; y++ ) { 
    if(BMP[y] != 0xF0) pi.pixels[y] = color(white);
    else pi.pixels[y] = color(black);
 }
1 Like

Yep, thank you so much ! I appreciate your support.

So you have a better picture of what I want to do, which I should put in the main post. This is how the LCD treat the byte coming from the microcontroller.