# Displaying an image pixel by pixel

**URL:** <https://discourse.processing.org/t/displaying-an-image-pixel-by-pixel/28839>\
**Category:** Coding Questions\
**Created:** [March 25, 2021, 3:10pm UTC](https://discourse.processing.org/t/displaying-an-image-pixel-by-pixel/28839 "2021-03-25T15:10:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ilalande](https://avatars.discourse-cdn.com/v4/letter/i/c77e96/32.png) [@ilalande](https://discourse.processing.org/u/ilalande)\
**Post date:** [March 25, 2021, 3:10pm UTC](https://discourse.processing.org/t/displaying-an-image-pixel-by-pixel/28839/1 "2021-03-25T15:10:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![jb4x](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jb4x/32/789_2.png) [@jb4x](https://discourse.processing.org/u/jb4x)\
**Post date:** [March 25, 2021, 5:03pm UTC](https://discourse.processing.org/t/displaying-an-image-pixel-by-pixel/28839/2 "2021-03-25T17:03:42Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 25, 2021, 5:22pm UTC](https://discourse.processing.org/t/displaying-an-image-pixel-by-pixel/28839/3 "2021-03-25T17:22:06Z")

</div>

Hello,

Please format your code as per:  
[https://discourse.processing.org/faq#format-your-code](https://discourse.processing.org/faq#format-your-code)

_Lots of resources (tutorials, examples, references, etc.) available here:_  
_[https://processing.org/](https://processing.org/)_

To get you started:  
_[Images and Pixels \ Processing.org](https://processing.org/tutorials/pixels/)_

And so your journey begins…

`:)`

---

<div class="post-metadata">

**Author:** ![ilalande](https://avatars.discourse-cdn.com/v4/letter/i/c77e96/32.png) [@ilalande](https://discourse.processing.org/u/ilalande)\
**Post date:** [March 26, 2021, 1:52pm UTC](https://discourse.processing.org/t/displaying-an-image-pixel-by-pixel/28839/4 "2021-03-26T13:52:01Z")

</div>

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

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

  y=y+10;
  x=0;
}

```

Thank’s a lot.