# Displaying an image pixel by pixel

Hi,
I’m new to processing and working with Daniel Shiffman’s book.
I’d like to display an image pixel by pixel, from top left to bottom right. I tried this code but it does what I ask : it draws a diagonal line (I can do the horizontal one) and I don’t know how to work it to have the full picture.

PImage soleil;
int x=0;
int y=0;
void setup() {
size(500,740);
background(0);

}

void draw() {

int loc= x+y*soleil.width;

int c = soleil.pixels[loc];
fill(c);
noStroke();
rect(x,y,16,16);

updatePixels();
x++;
y++;

}

At every loop, you are incrementing the x value AND the y value.

So the first turn: `x = 0 and y = 0` that’s the top left pixel.
The second turn: `x = 1 and y = 1` that’s the pixel in the bottom right of the one before
The third turn: `x = 2 and y = 2` that’s the pixel in the bottom right of the one before
And so on…

As you can see, if we keep going, we get all the pixels in a diagonal pattern.

Now if you want to display your image pixel by pixel from top to bottom and left to right, you need to first display the first row. So:
`x = 0 and y = 0`
`x = 1 and y = 0`
`x = 2 and y = 0`
`...`

As you can see, all the pixels of the first row have a null y value.

When you are at the end of the first line, so when `x = image.width - 1` (-1 because x starts at 0) then you want to have y = 1 this time and start over:
`x = 0 and y = 1`
`x = 1 and y = 1`
`x = 2 and y = 1`
`...`

With that in mind, I think you have enough information to figure out some code by yourself, good luck!

1 Like

Hello,

https://discourse.processing.org/faq#format-your-code

Lots of resources (tutorials, examples, references, etc.) available here:
https://processing.org/

To get you started:
Images and Pixels \ Processing.org

`:)`

1 Like

ok, thank’s, I got it with a “if” condition.

``````if(x>soleil.width-1){

y=y+10;
x=0;
}
``````

Thank’s a lot.