# How do I move a point along a line, starting from (mouseX, mouseY), to a target

**URL:** <https://discourse.processing.org/t/how-do-i-move-a-point-along-a-line-starting-from-mousex-mousey-to-a-target/27637>\
**Category:** Coding Questions\
**Created:** [February 6, 2021, 6:51pm UTC](https://discourse.processing.org/t/how-do-i-move-a-point-along-a-line-starting-from-mousex-mousey-to-a-target/27637 "2021-02-06T18:51:32Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![mario60](https://avatars.discourse-cdn.com/v4/letter/m/e5b9ba/32.png) [@mario60](https://discourse.processing.org/u/mario60)\
**Post date:** [February 6, 2021, 6:51pm UTC](https://discourse.processing.org/t/how-do-i-move-a-point-along-a-line-starting-from-mousex-mousey-to-a-target/27637/1 "2021-02-06T18:51:32Z")

</div>

Hello

given the code below, do you see a simple way to modify it as keep the blue ball to move along the line, when the starting point is given by (mouseX, mouseY)?  
thanks cheers m.

```auto
float xi=50; 
float yi=50;
float x =xi;
float y =yi;
float tx=1200;
float ty=700; 
float slope; 
int s=1; 

void setup() {
  size(1400, 760);
}

void draw() {
 // xi=mouseX; // how do I introduce mouseX, mouseY and keep moving along a line? 
 // yi=mouseY;

  background(255);
  fill(255,0,0);
  circle(xi,yi,25); //start
  circle(tx,ty,25); //target 

  line(xi,yi,tx,ty);
  slope = ((ty-yi)/(tx-xi)); 

  fill(0,0,255);
  ellipse(x,y,25,25); // moving along the line
   x+=s;
   y+=slope;

  if(x>tx){x=xi;}
  if(y>ty){y=yi;}
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 6, 2021, 6:53pm UTC](https://discourse.processing.org/t/how-do-i-move-a-point-along-a-line-starting-from-mousex-mousey-to-a-target/27637/2 "2021-02-06T18:53:26Z")

</div>

hello,  
did you look at the lerp() command?

regards,

Chrisir

---

<div class="post-metadata">

**Author:** ![mario60](https://avatars.discourse-cdn.com/v4/letter/m/e5b9ba/32.png) [@mario60](https://discourse.processing.org/u/mario60)\
**Post date:** [February 6, 2021, 6:57pm UTC](https://discourse.processing.org/t/how-do-i-move-a-point-along-a-line-starting-from-mousex-mousey-to-a-target/27637/3 "2021-02-06T18:57:21Z")

</div>

Actually, I did not. I’ll check, though my wish is to do by a geometry as basic as possible.

---

<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:** [February 6, 2021, 6:58pm UTC](https://discourse.processing.org/t/how-do-i-move-a-point-along-a-line-starting-from-mousex-mousey-to-a-target/27637/4 "2021-02-06T18:58:35Z")

</div>

you can always do something like

```auto
float x = map(v,0,1,oldX,newX);
float y = map(v,0,1,oldY,newY);

```

otherwise just use lerp with `x = lerp(oldX,newX,v), y = lerp(oldY,newY)`

---

<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:** [February 6, 2021, 7:00pm UTC](https://discourse.processing.org/t/how-do-i-move-a-point-along-a-line-starting-from-mousex-mousey-to-a-target/27637/5 "2021-02-06T19:00:52Z")

</div>

Hi,

If you have a [linear equation](https://en.wikipedia.org/wiki/Linear_equation) representing your line as : `y = ax + b`

Then you just need to compute the result of this function with the `mouseX` location and you get the `y` location of your ball.

For example :

```auto
// The slope angle of the line
float a = 0.5;

// The offset of the line
float b = 50;

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

void draw() {
  background(255);
  
  // The x location of the ball
  float x = mouseX;
  
  // Compute the result of the linear equation
  float y = a * x + b;
  
  // Draw the line (use the same equation)
  line(0, b, width, a * width + b);
  
  // Draw the ball
  fill(0, 0, 255);
  circle(x, y, 50);
}

```

Also try to add new lines in your code so it’s much more clear when you and others read it! 😉  
You can also press `Ctrl+T` in the Processing code editor to auto format your code.

Also as others mentioned, `map()` and `lerp()` are **linear** mapping functions so this is equivalent as using a line equation 👍

---

<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:** [February 6, 2021, 7:05pm UTC](https://discourse.processing.org/t/how-do-i-move-a-point-along-a-line-starting-from-mousex-mousey-to-a-target/27637/6 "2021-02-06T19:05:58Z")

</div>

or you can use:

```auto
float dir=0, r=0, v=0;

void setup() {
  size(600,600);
}
void draw() {
  background(0);
  dir = getDir(300,300,mouseX,mouseY);
  r = dist(300,300,mouseX,mouseY);
  stroke(255);
  line(300,300,300+cos(dir)*r*v,300+sin(dir)*r*v);
  stroke(255,50);
  line(300,300,300+cos(dir)*r,300+sin(dir)*r);
}
void mouseWheel(MouseEvent e) {
  v=constrain(v-float(e.getCount())/10,0,1);
  println(v);
}

float getDir(float x1,float y1, float x2, float y2) {
  return( atan2(y2-y1,x2-x1) );
}

```

(using cos(dir)\*r, sin(dir)\*r)

---

<div class="post-metadata">

**Author:** ![mario60](https://avatars.discourse-cdn.com/v4/letter/m/e5b9ba/32.png) [@mario60](https://discourse.processing.org/u/mario60)\
**Post date:** [February 6, 2021, 7:08pm UTC](https://discourse.processing.org/t/how-do-i-move-a-point-along-a-line-starting-from-mousex-mousey-to-a-target/27637/7 "2021-02-06T19:08:35Z")

</div>

WOW.  
Thanks a lot.  
I have my homework. 🙂  
I see, and will check things around.  
m.

---

<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:** [February 6, 2021, 7:17pm UTC](https://discourse.processing.org/t/how-do-i-move-a-point-along-a-line-starting-from-mousex-mousey-to-a-target/27637/8 "2021-02-06T19:17:13Z")

</div>

while I was playing with lerp vector, I found this interesting dynamic (set v to 0.1 to get best results)

> **Code**
>
> ```auto
> PVector center = new PVector(300,300), end = new PVector(300,300);
> float v = 0;
> 
> void setup() { size(600,600); }
> void draw() {
> background(0);
> stroke(255);
> end = new PVector(mouseX,mouseY);
> PVector display = center.lerp(end,v); // = lerp(center,end,v);
> stroke(255);
> line(center.x,center.y,display.x,display.y);
> stroke(255,40);
> line(end.x,end.y,center.x,center.y);
> }
> void mouseWheel(MouseEvent scroll) {
> v = constrain(v-float(scroll.getCount())/10, 0,1);
> println(v);
> }
> 
> ```

and here is a PVector version of lerp

```auto
PVector center = new PVector(300,300), end = new PVector(300,300);
float v = 0;

void setup() { size(600,600); }
void draw() {
  background(0);
  stroke(255);
  end = new PVector(mouseX,mouseY);
  PVector temp=center, display = temp.lerp(center,end,v); // = lerp(center,end,v);
  stroke(255);
  line(center.x,center.y,display.x,display.y);
  stroke(255,40);
  line(end.x,end.y,center.x,center.y);
}
void mouseWheel(MouseEvent scroll) {
  v = constrain(v-float(scroll.getCount())/10, 0,1);
  println(v);
}

```