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

Processing Coding Questions
1

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

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

regards,

Chrisir

1 Like
3

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

4

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)

5

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! :wink:
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:

1 Like
6

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
7

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

1 Like
8

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