# Image flipping for MOBA controls

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?

``````//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();
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);

}
``````

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

Welcome to the forum! By removing the `0.05` factor, it moves with the mouse:

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

Here is a working code:

``````// 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.

``````//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();
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;
}
}
``````
2 Likes