# Please help me with move my ellipse

**URL:** <https://discourse.processing.org/t/please-help-me-with-move-my-ellipse/28526>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [March 14, 2021, 11:55am UTC](https://discourse.processing.org/t/please-help-me-with-move-my-ellipse/28526 "2021-03-14T11:55:50Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![olia](https://avatars.discourse-cdn.com/v4/letter/o/91b2a8/32.png) [@olia](https://discourse.processing.org/u/olia)\
**Post date:** [March 14, 2021, 11:55am UTC](https://discourse.processing.org/t/please-help-me-with-move-my-ellipse/28526/1 "2021-03-14T11:55:50Z")

</div>

im not that good in english, sorry.  
so i have ellipse that moves from the center to the edges. I need it to **move back to the center when I click the mouse**

```auto
int rad = 40; // Width of the shape
float xpos, ypos; // Starting position of shape    

float xspeed = 4.8; // Speed of the shape
float yspeed = 4; // Speed of the shape

int xdirection = 1; // Left or Right
int ydirection = 1; // Top to Bottom

void setup() 
{
  size(500, 500);
  frameRate(60);
  stroke(1);
  ellipseMode(RADIUS);
  // Set the starting position of the shape
  xpos = width/2;
  ypos = height/2;

}

void draw() 
{
  background(0);
  
  // Update the position of the shape
  xpos = xpos + ( xspeed * xdirection );
  ypos = ypos + ( yspeed * ydirection );

  if (xpos > width-rad || xpos < rad) {
    xdirection *= -1;
  }
  if (ypos > height-rad || ypos < rad) {
    ydirection *= -1;
  }
  //COLOR
float red = map(xpos,0, width, 0, 500);
float blue = map(ypos, 0, width, 0, 255);
float green= map(xpos,0,width, 0, 255);
fill(red, green, blue);
  // Draw the shape
  if (mousePressed == true) {
  xpos = xpos - ( xspeed * xdirection ); //this is my problem
  ypos = ypos - ( yspeed * ydirection ); //its just stops
  
  ellipse(xpos, ypos, rad, rad);
  } else {
      ellipse(xpos, ypos, rad, rad);
  }

}

```

it’s my first code like that so i think i have some other problem maybe, if u see something wrong pls tell me

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [March 14, 2021, 12:31pm UTC](https://discourse.processing.org/t/please-help-me-with-move-my-ellipse/28526/2 "2021-03-14T12:31:16Z")

</div>

I am not sure if I understand, but this is the code, so it just teleports it to the center

```auto
if (mousePressed == true) {
  xpos = width/2;
  ypos = height/2; //its just teleports to the center
  
  ellipse(xpos, ypos, rad, rad);
  }

```

---

<div class="post-metadata">

**Author:** ![olia](https://avatars.discourse-cdn.com/v4/letter/o/91b2a8/32.png) [@olia](https://discourse.processing.org/u/olia)\
**Post date:** [March 14, 2021, 1:05pm UTC](https://discourse.processing.org/t/please-help-me-with-move-my-ellipse/28526/3 "2021-03-14T13:05:14Z")

</div>

> [@CodeMasterX](#):
>

yeah i know this, but i dont need teleport, i need _moooooove_ to the center, like slowly

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 14, 2021, 1:20pm UTC](https://discourse.processing.org/t/please-help-me-with-move-my-ellipse/28526/4 "2021-03-14T13:20:06Z")

</div>

Consider lerping…  
_[lerp() \ Language (API) \ Processing 3+](https://processing.org/reference/lerp_.html)_

Reference states:  
`The lerp function is convenient for creating motion along a straight path and for drawing dotted lines.`

`:)`

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [March 14, 2021, 1:27pm UTC](https://discourse.processing.org/t/please-help-me-with-move-my-ellipse/28526/5 "2021-03-14T13:27:40Z")

</div>

Another way is to use trigenometry.

First get the angle with atan2(y2-y1,x2-x1);  
after it, get the varraible speed (float speed = 5);  
after that, set the x amd y speeds by using:

```auto
float dir = atan2(y2-y1,x2-x1);
float speed = 5;
xspeed = cos(dir)*5;
yspeed = sin(dir)*5;

```

---

<div class="post-metadata">

**Author:** ![olia](https://avatars.discourse-cdn.com/v4/letter/o/91b2a8/32.png) [@olia](https://discourse.processing.org/u/olia)\
**Post date:** [March 14, 2021, 1:31pm UTC](https://discourse.processing.org/t/please-help-me-with-move-my-ellipse/28526/6 "2021-03-14T13:31:55Z")

</div>

**OMG THANK U IT WORKS**  
I thought about it all day

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [March 14, 2021, 1:37pm UTC](https://discourse.processing.org/t/please-help-me-with-move-my-ellipse/28526/7 "2021-03-14T13:37:28Z")

</div>

I usually _lerp_ manually with code but this “helper” function is there to help.

If you want to see what _lerp()_ does it is here:  
_[processing/PApplet.java at master · processing/processing · GitHub](https://github.com/processing/processing/blob/master/core/src/processing/core/PApplet.java#L5002)_

`:)`