Resize image without any smoothing

edited March 2017 in How To...

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?

resize

Answers

  • Do you have example code?

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

    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.

  • 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.

  • Answer ✓

    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.

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

  • edited March 2017 Answer ✓

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

  • edited March 2017

    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.

Sign In or Register to comment.