Drawing an image pixel by pixel


I’m trying to draw an image by its pixels, one by one.
I’ve tried to get the index with image.getPixels(); but I don’t know how to load thel one by one. (image.setFromPixels(); ?)

I’ve also tried with the code in the book “Mastering OF” :

void ofApp::setup(){

//Getting pointer to pixel array of image
unsigned char *data = image.getPixels();
//Calculate number of pixel components
int components = image.bpp / 8;
//Modify pixel array
for (int y=0; y<image.height; y++) {
    for (int x=0; x<image.width; x++) {
        //Read pixel (x,y) color components
        int index = components * (x + image.width * y);
        int red = data[ index ];
        int green = data[ index + 1 ];
        int blue = data[ index + 2 ];
        //Set red 
        data[ index ] = red ;
        //Set green 
        data[ index + 1 ] = green;
        //Set blue 
        data[ index + 2 ] = blue;
//Calling image.update() to apply changes

But again I don’t know how to load just one pixel. .

Any ideas ?


i think you are looking for setColor() ?

here is a sample code:

img.allocate(w, h, OF_IMAGE_COLOR);
for (int i = 0; i < w; i++) {
	for (int j = 0; j < h; j++) {
		ofColor color= ofColor(255-i%w,j%h,255);
		img.setColor(i % w, j % h, color);

Hum, I don’t think it’s what I’m looking for, I get this with your sample code :

But what I’d like is something like :
when I press ‘a’, the pixel one is drawn, when i press ‘a’ again, the pixel two is drawn etc… (and in an randomly order like: a -> random pixel is drawn, ‘a’ again -> another random pixel is drawn etc.)

I just don’t know how to load/draw a single random pixel of my image.


oh then you just can remove the for loop. Do:

img.setColor( Xpos, Ypos, ofColor::red);

or random like this:

img.setColor(ofRandom(img.getWidth()), ofRandom(img.getHeight()), ofColor::white);

I think you need to use getColor rather than setColor… Assuming you have loaded an image already and want to draw its pixel one by one. getColor will give you the pixel color at (x,y).

Then it’s up to you how you want to draw that on screen. I guess you want the pixel drawn to remain on screen, so you could use an fbo that you never clear (in which you’d draw a rectangle of the pixel color that is one pixel by one pixel in size) at the right position.
Or another solution would be to create a second image (ofImage im; im.allocate(w,h,OF_IMAGE_COLOR_ALPHA)) and then set the pixels one by one (and call update everytime) using the color you read previously.

Hi everybody and thanks a lot,

Ok, so, i’ve tried a lot of things, here is some attempts :

I Loaded my image,
Declared a new imageTest,
Allocated the dimension of my image in my imageTest with imageTest.allocate(200, 200, OF_IMAGE_COLOR);

then tried to set the color from my image to my imageTest :

unsigned char *data = image.getPixels();
int components = image.bpp / 8;
for (int y=0; y<image.height; y++) {
for (int x=0; x<image.width; x++) {
        int index = components * (x + image.width * y);
        image.getColor(x, y);
        imageTest.setColor(x, y, 255);


But here, It just draw my imageTest in white (255)…

Another attempts was to :

creating a new array of pixels and setting into it my image :
ofPixels p; and ofLoadImage(p, “image.jpg”);

declaring a texture and setting my pixels into it :
ofTexture tex; and tex.allocate§;

then drawing my texture with tex.draw(0,0);
But it creates just random pixels in my screen with my image dimensions…


EDIT : I’m able now to draw my image to my imageTest, I just set :

           imageTest.setColor(x, y,  image.getColor(x, y));

I think that it’s almost done, just need to set the pixels one by one :slight_smile: