[SOLVED] Question about flipping Images

Processing Coding Questions
1

How do you go ahead and flip an array of images in processing? Im trying to make a game where the character runs left and right but i only have the pictures for him to run right,

1 Like
2

There is no need to have flipped versions of your images. You can just draw them flipped directly (assuming that you don’t care about left/right handed-ness (that is, if your character has a sword in his left hand when moving right, using this means he will have it in his right hand when moving left)).

If you are using imageMode(CORNER) (which is the default), replace drawing your image:

image( img, x, y );

with:

pushMatrix();
translate( x + img.width, y );
scale( -1, 1 );
image( img, 0, 0 );
popMatrix();

If you are using imageMode(CENTER), replace drawing your image:

image( img, cx, cy );

With:

pushMatrix();
scale( -1, 1 );
image( img, -cx, cy );
popMatrix();

See the tutorials on transformations to understand why this works, and realize that scaling by a negative number flips the direction of an axis.

1 Like
3

thanks for the advice, so i tried implementing that code and whenever i press the key to make him walk left, the image disappears. The imageMode is center in setup. Heres a piece of my code im working on.

void walkingleft() {
     if (action == 1) {
       pushMatrix();
       scale(-1,1);
       image(alwalk[currentwa], x, y);
       currentwa++;
       if (currentwa > 15)currentwa = 0;
       popMatrix();
     }
   }

if you need the whole programs code ill leave it on here

4

You could clone the original PImage, turn it into a PGraphics, apply the flipping there, and turn it back to PImage. :bulb:

1 Like
5

image( img, -cx, cy );

Try:

image(alwalk[currentwa], -x, y);

1 Like
6

Studio.ProcessingTogether.com/sp/pad/export/ro.9lSicL0a3WMfi

1 Like
7

Thank you both, making x negative fixxed my issues. Again, Thank you!
when you make x negative, you also have to add the scale(-1,1); The correct code is this

   void walkingleft() {
     if (action == 1) {
       pushMatrix();
       scale(-1,1);
       image(alwalk[currentwa], -x, y);
       currentwa++;
       if (currentwa > 15)currentwa = 0;
       popMatrix();
     }
   }
8

The thing with scale(), rotate() functions is that their operations perform on the origin point that you also set with translate(), else it’s considered to be 0,0 coordinates. Just saying. Processing reference explains them well:
https://processing.org/reference/translate_.html
https://processing.org/reference/scale_.html
https://processing.org/reference/rotate_.html

Another, more elegant(in my opinion) solution, would be for you to use image( function’s additional 4th and 5th arguments to set the scaling that would be relative to the image’s top left corner - and it would also remove the need for pushMatrix();, scale(-1,1); and popMatrix(); altogether.

You can do this:

void walking(boolean direction) {
  //direction - if false, character walks to the left.
  if (action == 1) {
    int imgWidth = alwalk[currentwa].width;
    image(alwalk[currentwa], direction?x:(x+imgWidth)  , alwalk[currentwa].height, imgWidth * direction?1:-1 );
    if (++currentwa > 15) currentwa = 0;
    //++currentwa adds 1 to it and then gives the result(NOT SAME AS currentwa++)
    //Saving a line of code... You know, to add these 2 lines of comments instead. :D
  }
}

I admit that some of the things here are scarier instead, but, it’s always better to know more solutions to the same problem, because other solutions might then be the only ones that fit some other problem!

About the direction?1:-1 thing - it’s called “Ternary operator” sometimes. it’s basically a quick if statement that doesn’t need to be written in multiple lines. So, println(direction?1:-1) is the same as:

if(direction){
  println(1);
}else{
  println(-1);
}

More thorough explanation of ternary operators can be seen in Processing reference:
https://processing.org/reference/conditional.html