# Low Res Images get Blured when Scaled Up

**URL:** <https://discourse.processing.org/t/low-res-images-get-blured-when-scaled-up/17764>\
**Category:** Coding Questions\
**Created:** [February 12, 2020, 5:48am UTC](https://discourse.processing.org/t/low-res-images-get-blured-when-scaled-up/17764 "2020-02-12T05:48:31Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![KevinWho](https://avatars.discourse-cdn.com/v4/letter/k/dbc845/32.png) [@KevinWho](https://discourse.processing.org/u/KevinWho)\
**Post date:** [February 12, 2020, 5:48am UTC](https://discourse.processing.org/t/low-res-images-get-blured-when-scaled-up/17764/1 "2020-02-12T05:48:31Z")

</div>

This happens when I try to use PImage.resize(w,h);

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/8/87352080222def201100fe3d5d24bda826e4bfa4.jpeg)

The closest thing to working is image(PImage, x,y,w,h);. I found that adding the width and height parameters to this would slow down the framerate significantly. I want this result, but I want to scale it **once** at the start of the program so that I can make the program run faster. The reason I can’t do it with image(x,y,w,h); is because of the fact that I am rendering them in a nested for loop, and I am rendering many on the screen.

I have coded my own function, and the problem with this is that due to rounding, it can not do all sizes, and will round to the nearest compatible size.

```auto
PImage upScaleImg(PImage file, int w, int h) {
  int fileWidth = file.width;
  int fileHeight = file.height;
  float Width = w/fileWidth;
  float Height = h/fileHeight;
  
  PImage tempImg = createImage(ceil(Width*fileWidth), ceil(Height*fileHeight), ARGB);
  

  try {
    for (int i = 0; i < fileWidth; i++) {
      for (int j = 0; j < fileHeight; j++) {
        for (int Xs = 0; Xs < Width; Xs++) {
          for (int Ys = 0; Ys < Height; Ys++) {
            color ramCol = file.get(i, j);
            tempImg.set((int)(i*Width)+Xs, (int)(j*Height)+Ys, ramCol);
          }
        }
      }
    }
  }
  catch(Exception e) {
  }
  tempImg.updatePixels();
  return tempImg;
} 

```

If there is any solution to this that you know of please reply. Thanks 🙂

-Credit to my friend Rabb for making the image for me

---

<div class="post-metadata">

**Author:** ![micycle](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micycle/32/201_2.png) [@micycle](https://discourse.processing.org/u/micycle)\
**Post date:** [February 12, 2020, 5:04pm UTC](https://discourse.processing.org/t/low-res-images-get-blured-when-scaled-up/17764/2 "2020-02-12T17:04:12Z")

</div>

See [this](https://stackoverflow.com/questions/43151878/how-do-i-avoid-anti-aliasing-effect-when-creating-a-pgraphics-object-thats-sm), and then call `.get()` from the `buffer` object to return a cached PImage copy of the upscaled and non-blurry image.

---

<div class="post-metadata">

**Author:** ![KevinWho](https://avatars.discourse-cdn.com/v4/letter/k/dbc845/32.png) [@KevinWho](https://discourse.processing.org/u/KevinWho)\
**Post date:** [February 13, 2020, 5:17am UTC](https://discourse.processing.org/t/low-res-images-get-blured-when-scaled-up/17764/3 "2020-02-13T05:17:43Z")

</div>

Not exactly the solution, but it helped me get there.

For anyone who wants this function I made:

```auto
PGraphics scaleUp(PImage texture, int w, int h){
  PGraphics buffer;
  buffer = createGraphics(w, h);
  buffer.noSmooth();
  buffer.beginDraw();
  buffer.image(texture,0,0,buffer.width,buffer.height,0,0,16,16);
  buffer.endDraw();

  return buffer;
}

```