How to draw pixel at specific location on the buffer?

R1S8K · June 15, 2020, 7:02am

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
}

noel · June 15, 2020, 7:55am

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?

noel · June 15, 2020, 9:14am

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);
}

R1S8K · June 15, 2020, 10:19am

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.

R1S8K · June 15, 2020, 11:56am

Yep, II got the idea.

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

noel · June 15, 2020, 1:20pm

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);
}

R1S8K · June 15, 2020, 11:23pm

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.

noel · June 16, 2020, 12:48am

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?

R1S8K · July 2, 2020, 3:48pm

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.

R1S8K · July 2, 2020, 3:52pm

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 ?

noel · July 2, 2020, 7:11pm

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);
}

R1S8K · July 4, 2020, 1:24am

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

jeremydouglass · July 4, 2020, 5:52am

~~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.

noel · July 4, 2020, 7:05am

For those kind of things I use the ‘magnifying glass’ utility. It has various modes on windows.

R1S8K · July 4, 2020, 11:08am

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.

“char” is 16-bit, which would lead to a more difficult programming for me.
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 ?

GoToLoop · July 4, 2020, 11:24am

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);

R1S8K · July 4, 2020, 3:58pm

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.

noel · July 4, 2020, 4:58pm

Why not

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

R1S8K · July 5, 2020, 12:04am

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.

Topic		Replies	Views
Write color pixel to an Image Coding Questions	1	112	September 28, 2023
PGraphics - read pixels as they are drawn Coding Questions	21	1980	January 15, 2021
What am i missing? (createImage) Coding Questions	4	615	May 30, 2018
FrameBuffer - draw directly to PImage or Texture Coding Questions	0	323	June 14, 2020
Display PImage array elements in specific locations Coding Questions	2	235	May 9, 2021

How to draw pixel at specific location on the buffer?

Related topics