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

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.

``````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;}
}
``````

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

regards,

Chrisir

1 Like

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

you can always do something like

``````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)`

Hi,

If you have a 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 :

``````// 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 1 Like

or you can use:

``````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)

1 Like

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

1 Like

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

Code
``````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

``````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);
}
``````
1 Like