# How do I get pixels to display ONE by ONE after a key is pressed?

**URL:** <https://discourse.processing.org/t/how-do-i-get-pixels-to-display-one-by-one-after-a-key-is-pressed/8242>\
**Category:** Coding Questions\
**Created:** [February 9, 2019, 11:03am UTC](https://discourse.processing.org/t/how-do-i-get-pixels-to-display-one-by-one-after-a-key-is-pressed/8242 "2019-02-09T11:03:00Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![bjente](https://avatars.discourse-cdn.com/v4/letter/b/a698b9/32.png) [@bjente](https://discourse.processing.org/u/bjente)\
**Post date:** [February 9, 2019, 11:03am UTC](https://discourse.processing.org/t/how-do-i-get-pixels-to-display-one-by-one-after-a-key-is-pressed/8242/1 "2019-02-09T11:03:00Z")

</div>

Hello all,

I’m new to processing and I’ve got a question about pixels. I want to write a program in which the user can press a key and if a key is pressed, ONE pixel of an image appears. Right now, if I press a key, the whole image appears immediately. I can’t wrap my head around how to fix this, although it feels kinda stupid.  
I copied code from a Youtube video from Daniel Shiffman (The Coding Train) and want to make this small adjusment. Can anybody help me? Thanks in advance!!

```auto
PImage img;

void setup() {
  size(1565,1037);
  img = loadImage("voorbeeld.JPG");
}

void draw() {
  loadPixels(); 

  img.loadPixels(); 
  for (int y = 0; y < height; y++) {
    for (int x = 0; x < width; x++) {
      int loc = x + y*width;
          
      float r = red(img.pixels[loc]);
      float g = green(img.pixels[loc]);
      float b = blue(img.pixels[loc]);
      
      if(keyPressed) {
        pixels[loc] = color(r,g,b);    
      }
    }
  }
  updatePixels();
}

```

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 15, 2019, 5:44pm UTC](https://discourse.processing.org/t/how-do-i-get-pixels-to-display-one-by-one-after-a-key-is-pressed/8242/2 "2019-02-15T17:44:48Z")

</div>

> [@bjente](#):
>
> I want to write a program in which the user can press a key and if a key is pressed, ONE pixel of an image appears.

I’m assuming that each time the key is pressed, an additional pixel appears? Like, building up the image over time?

There are a few ways to approach such a problem.

One is to draw only that pixel when that key is pressed – never refresh the sketch (don’t use `background`) and let the pixels accumulate on the surface. Pressing the key will draw pixels[0], then again pixels[1], then pixels[2], etc.

Another way is to draw as many pixels as you should, each draw frame. First wipe the screen. Now, how many times has the key been pressed? If 5, draw five pixels. If 136, draw 136 pixels.

Rather than looping through x and y, the easier way to do this is to loop over pixels, and then draw each pixel to its x/y location. To do this, you need to know your image width/height.

If you know the x,y, then pixelnum = y\*width+x  
If you know the pixelnum, then pixelx = pixelnum - pixelnum%width  
and pixely = (pixelnum - pixelx)/width

So, you can count the keystrokes (137) and then loop over pixels and draw the first 137 pixels. If you width is 100x100, then pixel #137 is at (36, 1).