# Displaying part of an image causes flipping a blurs

**URL:** https://discourse.processing.org/t/displaying-part-of-an-image-causes-flipping-a-blurs/39232
**Category:** Coding Questions
**Created:** [October 12, 2022, 5:19pm UTC](https://discourse.processing.org/t/displaying-part-of-an-image-causes-flipping-a-blurs/39232 "2022-10-12T17:19:33Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Exister](https://avatars.discourse-cdn.com/v4/letter/e/f14d63/32.png) [@Exister](https://discourse.processing.org/u/Exister)
#### Post date: [October 12, 2022, 5:19pm UTC](https://discourse.processing.org/t/displaying-part-of-an-image-causes-flipping-a-blurs/39232/1 "2022-10-12T17:19:33Z")

</div>

Hello! I was trying to set up the basis for a game engine and wanted to load a sprite sheet that would then display only parts of itself at a time. Did some research and found [this](https://forum.processing.org/one/topic/displaying-a-part-of-the-image.html) which looked to have exactly what I wanted! I set up a basic test that would size an image to your screen with appropriate margins, along with setting some variables for scaling other aspects.

> **Here is that code:**
>
> ```auto
> PImage test;
> PImage player;
> double scale;
> double screenWidth;
> int xOffset;
> void setup() {
> fullScreen();
> test = loadImage("SILVER TORIZO BOSS ROOM.2022-10-11.03-01-54.png");
> scale = (displayHeight / test.height);
> screenWidth = (int) (scale * test.width);
> xOffset = (int) ((displayWidth - screenWidth) / 2);
> }
> 
> void draw() {
> background(100);
> image(test, xOffset, 0, (int) screenWidth, displayHeight);
> fill(0);
> rect(0, 0, xOffset, displayHeight);
> rect((int) (xOffset + screenWidth), 0, xOffset, displayHeight);
> }
> 
> ```

> **Result of running code:**
>
> ![Sundown 10_12_2022 1_00_31 PM](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/f/c/fcfcb11e7b9ab86a1d63118ba2aec22e2106bc7a.jpeg)

Wonderful! Now, I added the code to zoom in on part of this image to check to see if I had a handle on how to do so. So the

```auto
  image(test, xOffset, 0, (int) screenWidth, displayHeight);

```

became

```auto
  image(test, xOffset, 0, (int) screenWidth, displayHeight , 0, 48, 16, 16);

```

> **Which gives this**
>
> [Had to use imgur because only one embed for new users](https://imgur.com/a/jmu7vX6)

Doubling the Y fixes the image to show just the block, but it’s still flipped as well as very blurry. (I’m sure the blurring isn’t the image itself, the pixels are entirely crisp when I zoom in using paint)

So, I’m kinda at a loss here. There seems to be some mysterious method described by “gordancsa” that is mentioned in the other forum post I linked, but the link to said method throws a page not found. Is there something I’m doing wrong? Is this an issue with processing itself that I can’t fix? Does the mythical gordancsa method exist? Any help is appreciated, but either way thanks for reading and have a nice day 😃

---

<div class="post-metadata">

### Author: ![Exister](https://avatars.discourse-cdn.com/v4/letter/e/f14d63/32.png) [@Exister](https://discourse.processing.org/u/Exister)
#### Post date: [October 12, 2022, 7:55pm UTC](https://discourse.processing.org/t/displaying-part-of-an-image-causes-flipping-a-blurs/39232/2 "2022-10-12T19:55:59Z")

</div>

Update: discovered `noSmooth()` which fixed the blur issue 😁

---

<div class="post-metadata">

### Author: ![Exister](https://avatars.discourse-cdn.com/v4/letter/e/f14d63/32.png) [@Exister](https://discourse.processing.org/u/Exister)
#### Post date: [October 12, 2022, 9:38pm UTC](https://discourse.processing.org/t/displaying-part-of-an-image-causes-flipping-a-blurs/39232/3 "2022-10-12T21:38:23Z")

</div>

Update 2: discovered get()! Can use this to circumnavigate the issue entirely. Will have to do more documentation surfing before asking questions next time, lol 😅

---

<div class="post-metadata">

### Author: ![sableraph](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sableraph/32/251_2.png) [@sableraph](https://discourse.processing.org/u/sableraph)
#### Post date: [October 13, 2022, 2:32pm UTC](https://discourse.processing.org/t/displaying-part-of-an-image-causes-flipping-a-blurs/39232/4 "2022-10-13T14:32:55Z")

</div>

Great that you managed to solve your issue 🙂 Could you share an example showing your solution? This might help someone else in the future 💜

---

<div class="post-metadata">

### Author: ![Exister](https://avatars.discourse-cdn.com/v4/letter/e/f14d63/32.png) [@Exister](https://discourse.processing.org/u/Exister)
#### Post date: [October 17, 2022, 8:52pm UTC](https://discourse.processing.org/t/displaying-part-of-an-image-causes-flipping-a-blurs/39232/5 "2022-10-17T20:52:52Z")

</div>

Sure thing!

```auto
PImage playerSheet;
PImage player;
double counter;

void setup() {
  frameRate(60);
  fullScreen();
  noSmooth();
  playerSheet = loadImage("playerAnimSheet.png");
  counter = -0.5;
}
//Spritesheet contains sprites that are 16 pixels wide and 32 pixels tall. There are 
// four frames of player's animation and we want them to run forever
void draw() {
  background(0);
  counter += 0.125;
  if (counter == 3.5) {
    counter = -0.5;
  }
  player = (playerSheet.get((int) (Math.round(counter) * 16), 0, 16, 32));
  image(player, 0, 0, 100, 200);
  System.out.println(counter);
}

```

Spritesheet used:  
 ![playerAnimSheet](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/7/d/7d34b82cbb69ce1e72769e2b342db3fedaf5be38.png)  
This grabs a range of the player sprite sheet every frame and displays it, as well as slowly linearly incrementing the range that’s being grabbed to snap between frames every so often. The result is a walking stick figure!
