Processing mirror image over x axis?

前端 未结 1 1392
后悔当初
后悔当初 2020-12-21 18:52

I was able to copy the image to the location but not able to mirror it. what am i missing?

PImage img; 
float srcY;
float srcX;
int destX;
int destY;

img =         


        
相关标签:
1条回答
  • 2020-12-21 19:30

    How about simply scaling by -1 on the x axis ?

    PImage img; 
    
    img = loadImage("https://processing.org/img/processing-web.png");
    
    size(img.width, img.height * 2);
    
    image(img,0,0);
    scale(-1,1);//flip on X axis
    image(img,-img.width,img.height);//draw offset
    

    This can be achieved by manipulating pixels as well, but needs a bit of arithmetic:

    PImage img; 
    
    img = loadImage("https://processing.org/img/processing-web.png");
    size(img.width, img.height * 2);
    
    int t = millis();
    
    PImage flipped = createImage(img.width,img.height,RGB);//create a new image with the same dimensions
    for(int i = 0 ; i < flipped.pixels.length; i++){       //loop through each pixel
      int srcX = i % flipped.width;                        //calculate source(original) x position
      int dstX = flipped.width-srcX-1;                     //calculate destination(flipped) x position = (maximum-x-1)
      int y    = i / flipped.width;                        //calculate y coordinate
      flipped.pixels[y*flipped.width+dstX] = img.pixels[i];//write the destination(x flipped) pixel based on the current pixel  
    }
    //y*width+x is to convert from x,y to pixel array index
    flipped.updatePixels()
    println("done in " + (millis()-t) + "ms");
    
    image(img,0,0);
    image(flipped,0,img.height);
    

    The above can be achieved using get() and set(), but using the pixels[] array is faster. A single for loop is generally faster than using 2 nested for loops to traverse the image with x,y counters:

    PImage img; 
    
    img = loadImage("https://processing.org/img/processing-web.png");
    size(img.width, img.height * 2);
    
    int t = millis();
    PImage flipped = createImage(img.width,img.height,RGB);//create a new image with the same dimensions
    for(int y = 0; y < img.height; y++){
      for(int x = 0; x < img.width; x++){
        flipped.set(img.width-x-1,y,img.get(x,y));
      }
    }
    println("done in " + (millis()-t) + "ms");
    
    image(img,0,0);
    image(flipped,0,img.height);
    

    You can copy a 1px 'slice'/column in a single for loop and which is faster(but still not as fast as direct pixel manipulation):

    PImage img; 
    
    img = loadImage("https://processing.org/img/processing-web.png");
    size(img.width, img.height * 2);
    
    int t = millis();
    
    PImage flipped = createImage(img.width,img.height,RGB);//create a new image with the same dimensions
    for(int x = 0 ; x < flipped.width; x++){               //loop through each columns
      flipped.set(flipped.width-x-1,0,img.get(x,0,1,img.height));       //copy a column in reverse x order
    }
    
    println("done in " + (millis()-t) + "ms");
    
    image(img,0,0);
    image(flipped,0,img.height);
    

    There are other alternatives like accessing the java BufferedImage (although this means the Processing sketch will work in Java Mode mostly) or using a PShader, but these approaches are more complex. It's generally a good idea to keep things simple (especially when getting started).

    0 讨论(0)
提交回复
热议问题