# \[SOLVED\] Question about flipping Images
**URL:** https://discourse.processing.org/t/solved-question-about-flipping-images/7391
**Category:** Coding Questions
**Created:** [January 10, 2019, 4:30pm UTC](https://discourse.processing.org/t/solved-question-about-flipping-images/7391 "2019-01-10T16:30:14Z")
**Posts on this page:** 8
**Page:** 1
### Author:  [@Typhoon](https://discourse.processing.org/u/Typhoon)
#### Post date: [January 10, 2019, 4:30pm UTC](https://discourse.processing.org/t/solved-question-about-flipping-images/7391/1 "2019-01-10T16:30:14Z")
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,
---
### Author:  [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [January 10, 2019, 5:09pm UTC](https://discourse.processing.org/t/solved-question-about-flipping-images/7391/2 "2019-01-10T17:09:23Z")
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:
```auto
image( img, x, y );
```
with:
```auto
pushMatrix();
translate( x + img.width, y );
scale( -1, 1 );
image( img, 0, 0 );
popMatrix();
```
* * *
If you are using imageMode(CENTER), replace drawing your image:
```auto
image( img, cx, cy );
```
With:
```auto
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.
---
### Author:  [@Typhoon](https://discourse.processing.org/u/Typhoon)
#### Post date: [January 10, 2019, 5:17pm UTC](https://discourse.processing.org/t/solved-question-about-flipping-images/7391/3 "2019-01-10T17:17:23Z")
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.
```auto
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
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [January 10, 2019, 5:28pm UTC](https://discourse.processing.org/t/solved-question-about-flipping-images/7391/4 "2019-01-10T17:28:18Z")
You could clone the original PImage, turn it into a PGraphics, apply the flipping there, and turn it back to PImage. đź’ˇ
---
### Author:  [@TfGuy44](https://discourse.processing.org/u/TfGuy44)
#### Post date: [January 10, 2019, 5:39pm UTC](https://discourse.processing.org/t/solved-question-about-flipping-images/7391/5 "2019-01-10T17:39:36Z")
`image( img, -cx, cy );`
> [@Typhoon](#):
>
> image(alwalk[currentwa], x, y);
Try:
`image(alwalk[currentwa], -x, y);`
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [January 10, 2019, 5:46pm UTC](https://discourse.processing.org/t/solved-question-about-flipping-images/7391/6 "2019-01-10T17:46:35Z")
[Studio.ProcessingTogether.com/sp/pad/export/ro.9lSicL0a3WMfi](http://Studio.ProcessingTogether.com/sp/pad/export/ro.9lSicL0a3WMfi)
---
### Author:  [@Typhoon](https://discourse.processing.org/u/Typhoon)
#### Post date: [January 10, 2019, 7:59pm UTC](https://discourse.processing.org/t/solved-question-about-flipping-images/7391/7 "2019-01-10T19:59:12Z")
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
```auto
void walkingleft() {
if (action == 1) {
pushMatrix();
scale(-1,1);
image(alwalk[currentwa], -x, y);
currentwa++;
if (currentwa > 15)currentwa = 0;
popMatrix();
}
}
```
---
### Author:  [@Architector\_4](https://discourse.processing.org/u/Architector_4)
#### Post date: [January 10, 2019, 10:15pm UTC](https://discourse.processing.org/t/solved-question-about-flipping-images/7391/8 "2019-01-10T22:15:39Z")
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/translate_.html)
[https://processing.org/reference/scale\_.html](https://processing.org/reference/scale_.html)
[https://processing.org/reference/rotate\_.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:
```auto
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:
```auto
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](https://processing.org/reference/conditional.html)