# Image flipping for MOBA controls

**URL:** <https://discourse.processing.org/t/image-flipping-for-moba-controls/39207>\
**Category:** Coding Questions\
**Created:** [October 10, 2022, 9:17pm UTC](https://discourse.processing.org/t/image-flipping-for-moba-controls/39207 "2022-10-10T21:17:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Quesadilla](https://avatars.discourse-cdn.com/v4/letter/q/43a26b/32.png) [@Quesadilla](https://discourse.processing.org/u/Quesadilla)\
**Post date:** [October 10, 2022, 9:17pm UTC](https://discourse.processing.org/t/image-flipping-for-moba-controls/39207/1 "2022-10-10T21:17:53Z")

</div>

Im having trouble moving my character at a constant rate as well, it is decelerating as it moves, any suggestions on moving at a constant rate?

```auto
//I cant seem to get my image to flip without my controls going haywire, I tried using the following and my code is below that 
//pushMatrix();
//translate(X + creep.width, Y);
//scale(LR, 1);
//image(creep, 0, 0, 100, 100);
//popMatrix();

float x;
float y;
int MX = mouseX;
int MY = mouseY;
PImage creep;
void setup() {
  fullScreen();
  noStroke();  
  creep = loadImage("Creep.png");
  imageMode(CENTER);
  

}

void draw() { 
  background(51);
  float targetY = MY;
  float targetX = MX;
  float dx = targetX - x;
  float dy = targetY - y;
  x += dx * .05;
  y += dy * .05;
  
  if(mousePressed){
    MX = mouseX;
    MY = mouseY;
  }
  
image(creep,x,y,200,200);
  
 
}

```

---

<div class="post-metadata">

**Author:** ![Quesadilla](https://avatars.discourse-cdn.com/v4/letter/q/43a26b/32.png) [@Quesadilla](https://discourse.processing.org/u/Quesadilla)\
**Post date:** [October 10, 2022, 9:20pm UTC](https://discourse.processing.org/t/image-flipping-for-moba-controls/39207/2 "2022-10-10T21:20:08Z")

</div>

I will trigger image flipping with if(targetX\<x){}

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [October 11, 2022, 8:46am UTC](https://discourse.processing.org/t/image-flipping-for-moba-controls/39207/3 "2022-10-11T08:46:59Z")

</div>

Hi @Quesadilla,

Welcome to the forum! 😉

> [@Quesadilla](#):
>
> Im having trouble moving my character at a constant rate as well, it is decelerating as it moves, any suggestions on moving at a constant rate?

By removing the `0.05` factor, it moves with the mouse:

```java
x += dx;
y += dy;

```

> [@Quesadilla](#):
>
> I cant seem to get my image to flip without my controls going haywire

Here is a working code:

```auto
// Compute it before applying the movement otherwise never flips
boolean flip = targetX < x;
  
x += dx;
y += dy;

pushMatrix();
translate(x, y);
  
if (flip) {
  scale(-1, 1);
}
  
image(creep, 0, 0, 200, 200);
popMatrix();

```

Translate to the center of the image and scale on negative X if needed.  
It’s not optimal since it flickers when the mouse is close to the center.

---

<div class="post-metadata">

**Author:** ![Quesadilla](https://avatars.discourse-cdn.com/v4/letter/q/43a26b/32.png) [@Quesadilla](https://discourse.processing.org/u/Quesadilla)\
**Post date:** [October 11, 2022, 3:57pm UTC](https://discourse.processing.org/t/image-flipping-for-moba-controls/39207/4 "2022-10-11T15:57:23Z")

</div>

```auto
//here was the solution I decided on

float x;
float y;
PImage creepL;
PImage creepR;
boolean q;
int MX = mouseX;
int MY = mouseY;
int QX = mouseX;
int QY = mouseY;
PImage earth;

void setup() {
  fullScreen();
  noStroke();  
  creepL = loadImage("Creep.png");
  creepR = loadImage("CreepR.png");
  earth=loadImage("earth.jpg");
  imageMode(CENTER);

}

void draw() { 
background(0,0,0);
  float targetY = MY;
  float targetX = MX;
  float dx = targetX - x;
  float dy = targetY - y;
  x += dx * .05;
  y += dy * .05;

  if(mousePressed){
    MX = mouseX;
    MY = mouseY;
  }
  if(targetX>x){
  image(creepR,x,y,200,200);
  }else{
image(creepL,x,y,200,200);
  } 
}

void keyPressed(){
  if(key == 'q'){
    q = true;
  }
}
  
void keyReleased(){
  if(key == 'q'){
    q = false;
  }
}

```