Resize image without any smoothing

Kaggen

Hi!

I'm trying to resize an image and display it without any smoothing (mipmap, bicubic, linear or other).

The point is i want it to stay "pixelated" (sharp pixels). See picture below...

I'm using P2D.

Any ideas?

jeremydouglass

Do you have example code?

P2D has smoothing on by default. Call noSmooth():

• https://processing.org/reference/smooth_.html
• https://processing.org/reference/noSmooth_.html

Alternately, loop through the pixels array of your source image and copy a subset of pixels to a new image -- for example, every other column and every other row to resize by x1/2, or double-copy each pixel and each row to resize by x2.

Kaggen

I have tested noSmooth(), unfortunatly it doesn't work. I also tried hint(DISABLE_OPENGL_2X_SMOOTH), but that doesn't work either.

I guess your second suggestion is the one i have to do. Manually scaling it.

koogs

some discussion here:

https://forum.processing.org/two/discussion/comment/22759/#Comment_22759

involves setting the texture sampling value

((PGraphicsOpenGL)g).textureSampling(3);

if 3 doesn't work, try lower values.

koogs

(0 and 1 don't work. 2 does. still can't find a reference for those numbers though)

koogs

ok, here

https://github.com/processing/processing/blob/0abee5af6ad3b11cf2b73bb794b8a97c157c4762/core/src/processing/opengl/Texture.java#L54

cameyo

The following code it's a quick and dirty method to double an image without interpolation:

PImage img;
PImage canvas;
PGraphics dd;

void setup() 
{
  size(200,200);
  img = loadImage("base.png");
  image(img,0,0);
  dd = createGraphics(2*img.width,2*img.height);  
  dd.noSmooth();  
  dd.beginDraw();
  dd.clear();
  dd.endDraw();
  noLoop();
}

void draw() 
{
  canvas = img.get(0,0,width,height);
  canvas.loadPixels();
  dd.beginDraw();
  dd.loadPixels();
  for (int y = 0; y < height; y++)
  {
    for (int x = 0; x < width; x++)
    {
      dd.set(x*2, y*2, canvas.get(x, y));
      dd.set(x*2+1, y*2+1, canvas.get(x, y));
      dd.set(x*2+1, y*2, canvas.get(x, y));
      dd.set(x*2, y*2+1, canvas.get(x, y));
    }
  }  
  dd.updatePixels();
  dd.endDraw();
  dd.save("zoom.png");
  println("..finished.");
}

Hope this helps a bit :)

Kaggen

Thanks for your answers!

The "((PGraphicsOpenGL)g).textureSampling(2);" work as i expect if you scale the image "on the fly" (with the image() function) but doesn't work with resize().

I suppose that means that it need to be rescaled every frame, but on the other hand i recon the hardware does it if one use P2D.