Displaying an image pixel by pixel

Processing Coding Questions
1

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.
Thank you for your help

PImage soleil;
int x=0;
int y=0;
void setup() {
size(500,740);
soleil = loadImage(“img3.JPG”);
background(0);

}

void draw() {

int loc= x+y*soleil.width;

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

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

}

2

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
3

Hello,

Please format your code as per:
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

And so your journey begins…

:)

1 Like
4

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

if(x>soleil.width-1){

  y=y+10;
  x=0;
}

Thank’s a lot.