# How to make an object smoothly transition to a new location?

**URL:** <https://discourse.processing.org/t/how-to-make-an-object-smoothly-transition-to-a-new-location/7980>\
**Category:** Coding Questions\
**Created:** [January 31, 2019, 12:04am UTC](https://discourse.processing.org/t/how-to-make-an-object-smoothly-transition-to-a-new-location/7980 "2019-01-31T00:04:25Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirkpatrick876](https://avatars.discourse-cdn.com/v4/letter/k/9fc348/32.png) [@kirkpatrick876](https://discourse.processing.org/u/kirkpatrick876)\
**Post date:** [January 31, 2019, 12:04am UTC](https://discourse.processing.org/t/how-to-make-an-object-smoothly-transition-to-a-new-location/7980/1 "2019-01-31T00:04:25Z")

</div>

Hello I am trying to make a program in which an ellipse is redrawn at any point in the canvas where the mouse is clicked, although I am stuck on one problem. I am trying to get the ellipse to move smoothly from point A (the ellipses old position) to point B ( new ellipse location where mouse is clicked)

I have gotten far enough that I can update the ellipses X and Y origin, and the ellipse updates to the new position in an instance, but I can’t make it animate to it’s new location.

Thanks for your help, here is my code for this program so far:

```auto
int ballX = 250; 
int ballY = 250; 
int ballDi = 50;

void setup()
{
  size(500,500);
}

void draw()
{
  background(0);
  moveball();
  drawball();
}
  
  void mouseClicked()
  {
   ballX = mouseX;
   ballY = mouseY;
  }
  
  void moveball()
  {
  }
  
  void drawball()
  {
    ellipse(ballX,ballY,ballDi,ballDi);
  }

```

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [January 31, 2019, 1:01am UTC](https://discourse.processing.org/t/how-to-make-an-object-smoothly-transition-to-a-new-location/7980/2 "2019-01-31T01:01:46Z")

</div>

The simplest way is to make an linear interpolation between your target position and your actual position using **lerp()**. Take a look : [https://processing.org/reference/lerp\_.html](https://processing.org/reference/lerp_.html)

So you can do the basic trick with a fixed coefficient but the transition still be rough

```auto
float ballX = 250;
float ballY = 250;
float ballDi = 50;
float targetX,targetY;
void setup()
{
size(500,500);
}

void draw()
{
background(0);
moveball();
drawball();
}

void mouseClicked()
{

targetX = mouseX;
targetY = mouseY;
}

void moveball()
{
  ballX = lerp (ballX, targetX, 0.1);
  ballY = lerp (ballY, targetY, 0.1);
}

void drawball()
{
ellipse(ballX,ballY,ballDi,ballDi);
}

```

But if you want to have a smoother moving, with a sort of easing effect, you have to add a coef wich change during the interpolation :

```auto

void draw()
{
background(0);
if ( targetX != ballX) i ++ ;
else i = 0 ; //reset the value if target is reached
moveball();
drawball();
}

```

With this way, I increment i while the circle isn’t on target position.  
Then I map this value between 0 and 1, or others values that are between 0 and 1 (because lerp need a coefficient between 0 and 1).

```auto
  float coef = map(i,0,100,0,0.7); //100 is a abrbitrary value, but it seems near the good value to have a great easing
  ballX = lerp (ballX, targetX, coef);
  ballY = lerp (ballY, targetY, coef);

```

So, because my value **coef** change, the speed of the circle also.

Entire code below if you need it :

```auto
float ballX = 250;
float ballY = 250;
float ballDi = 50;
float targetX,targetY;
int i = 0;

void setup()
{
size(500,500);
}

void draw()
{
background(0);
if ( targetX != ballX) i ++ ;
else i = 0 ;
moveball();
drawball();
}

void mouseClicked()
{

targetX = mouseX;
targetY = mouseY;
}

void moveball()
{
  float coef = map(i,0,100,0,0.7);
  ballX = lerp (ballX, targetX, coef);
  ballY = lerp (ballY, targetY, coef);
}

void drawball()
{
ellipse(ballX,ballY,ballDi,ballDi);
}

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [January 31, 2019, 2:34am UTC](https://discourse.processing.org/t/how-to-make-an-object-smoothly-transition-to-a-new-location/7980/3 "2019-01-31T02:34:46Z")

</div>

i made a NoGame using PVector  
try it and see how the movement looks  
( for me it look very natural, i trained air- / gun / pistol when i was young )

```auto
// https://discourse.processing.org/t/bug-with-arraylist/5949
// 11/2018 kll / my first game ever, good its not really a game
// make a arraylist of pvector points
// calc shortest distance to the next target, aim, fire + remove the point from array

int idt, pmax = 10;
ArrayList<PVector> points = new ArrayList<PVector>(); // list of points
PVector target = new PVector(0, 0); // position of cross line
boolean theend = false, shoot = false;

int k = 0, kmax = 30; //firing circles
float tdist, newdist, speedf = 0.04; // speed factor multiplied with distance gives realistic targeting movement

void setup() {
 size( 300, 300);
 for (int i = 0; i < pmax; i++) points.add(new PVector(random(-width/2, width/2), random(-height/2, height/2)));
 //for ( PVector p : points ) println(p);
 println("targets: "+points.size());
}

void draw_lines() {
 stroke(200, 0, 0);
 line(target.x, -height/2, target.x, height/2); 
 line(-width/2, target.y, width/2, target.y);
}

void draw_points() {
 for (int i = 0; i < points.size(); i++) { 
   if ( i == idt ) stroke(200, 0, 0);  
   else noStroke();
   fill(0, 200, 0);
   ellipse(points.get(i).x, points.get(i).y, 8, 8);
 }
}

int get_nearest() {
 int idx = -1; // init to not found
 tdist = width; // init to max
 for (int i = 0; i < points.size(); i++) {
   newdist = dist(points.get(i).x, points.get(i).y, target.x, target.y);
   if ( newdist < tdist ) { 
     tdist = newdist; 
     idx = i;
   }
 }
 return idx; // give index of nearest target
}

void aim() {
 if ( idt > -1 ) {
   PVector waytotarget = points.get(idt).copy();
   waytotarget.sub(target);
   if ( waytotarget.mag() > 0.5 ) { // thats close enough
     waytotarget.setMag(waytotarget.mag()*speedf); // calc faster to short step in that direction
     target = target.add(waytotarget); // change target
   } else { 
     if ( !shoot ) println("shoot at "+idt); // only print 
     shoot = true;
     points.remove(idt);
   }
 } else { 
   println("i win, but now i am alone!"); 
   theend = true;
 }
}

void fire() { // only if shoot = true
 fill(200, 100, 0);
 stroke(255, 0, 0); 
 strokeWeight(3);
 ellipse(target.x, target.y, 2*k, 2*k); // growing red circle
 strokeWeight(1);
 k++;
 if ( k >= kmax ) {  
   shoot = false; 
   k = 0;
 }
}

void show_end() {
 fill(0, 200, 0);
 rect(-50, -25, 100, 40);
 fill(200, 0, 0);
 text(" I WIN ! ", -20, 0); // well, what a wonder if you play alone and targets not move
}

void draw() {
 background(200, 200, 0);
 translate(width/2, height/2);
 if ( !theend ) {
   draw_lines(); // cross lines
   draw_points(); // all points fix pos, same size / red stroke for next target
   idt = get_nearest(); // next ( nearest ) target
   if ( !shoot ) aim(); // not walk while firing
   else fire(); // some show / red circles
 } else show_end(); // all over, no play again button
}

```

and a other example for “easing”

> [@Rotation and Easing](https://discourse.processing.org/t/rotation-and-easing/5704/4):
>
> @phoebus , i could not stop play with that excellent idea, but i could not solve the problem, but thanks to @brunoruchiga can now show this version: // https://discourse.processing.org/t/rotation-and-easing/5704 PVector myMouse = new PVector(); float rot = 0, alpha, dalpha, easing = 0.03; //\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ void setup() { size(600, 600); stroke(120,120,120); } //\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_\_ void draw() { myMouse.set…

---

<div class="post-metadata">

**Author:** ![kirkpatrick876](https://avatars.discourse-cdn.com/v4/letter/k/9fc348/32.png) [@kirkpatrick876](https://discourse.processing.org/u/kirkpatrick876)\
**Post date:** [February 3, 2019, 5:55pm UTC](https://discourse.processing.org/t/how-to-make-an-object-smoothly-transition-to-a-new-location/7980/4 "2019-02-03T17:55:48Z")

</div>

Awesome! Thanks for the help!