Low Res Images get Blured when Scaled Up

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

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.

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 :slight_smile:

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

1 Like

See this, and then call .get() from the buffer object to return a cached PImage copy of the upscaled and non-blurry image.

2 Likes

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

For anyone who wants this function I made:

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;
}
1 Like