How can I get the position of any co-ordinate of a line?

General Discussion Other

AlexB

How can I get the position of any co-ordinate of a line?

in General Discussion • Other • 1 month ago

I'm trying to make a program, that has nodes drawn on with lines connecting the nodes, but I'm having trouble with being able to select a line. The way I select nodes is by looping through each node's position when the mouse is clicked, and seeing if the mouse is on top of the node's position.

However I can't think of a way to be able to select a link. The link is drawn on during the loop() function, which is just a line() command with the two nodes' positions as parameters. So when the mouse is clicked, I'm not sure what the best way to check if each link is being clicked.

Any suggestions are welcome, thanks.

Replies(9)

GoToLoop

Re: How can I get the position of any co-ordinate of a line?

1 month ago

You may try out check for the pixel's color of the "link" if you know its value.
It isn't precise, b/c of the way Processing changes a pixels color
depending on what is already drawn at particular place.
So, it's safer to check for a range of values for each of the R, G, B channels.
Anyways, the command is get(x, y).

AlexB

Re: Re: How can I get the position of any co-ordinate of a line?

1 month ago

Ahh, that's a great idea! I wasn't aware you could do that.

Thank you.

asimes

Re: How can I get the position of any co-ordinate of a line?

1 month ago

When you click the mouse, loop through your lines. For each line, create a temporary bounding area that is basically just a rectangle aligned with the line. You can think of it as giving the line some width. Then test if the mouse is inside that bounding area. The width you give the rectangle is arbitrary, whatever tolerance you want to give people (for example, it may be acceptable to be "off" by 3 pixels from the actual line and if so the bounding rectangle would have a width of 6 because 3+3 = 6).

AlexB

Re: Re: How can I get the position of any co-ordinate of a line?

1 month ago

Yeah that was my first thought to do it. But then I wasn't sure if it's the most efficient. But thanks for the suggestion!

amnon.owed

Re: How can I get the position of any co-ordinate of a line?

1 month ago

Here is a mathematical solution. The first part checks if the point is ON the infinite line. The second part is needed to make sure the point is WITHIN the actual line.

Code Example

PVector P, L1, L2;
void setup() {
size(500, 500);
P = new PVector();
L1 = new PVector(50, 50);
L2 = new PVector(width-50, height-50);
}
void draw() {
P.set(mouseX, mouseY, 0);
boolean intersect = pointLineIntersection(P, L1, L2);
if (intersect) { background(0, 0, 255); } else { background(255); }
stroke(0);
line(L1.x, L1.y, L2.x, L2.y);
}
boolean pointLineIntersection(PVector P, PVector L1, PVector L2) {
return (P.x-L1.x)*(L2.y-L1.y)==(L2.x-L1.x)*(P.y-L1.y) && (P.x-L1.x)*(P.x-L2.x) < 0;
}

tfguy44

Re: Re: How can I get the position of any co-ordinate of a line?

1 month ago

Wow, that's neat. Have some cool shades:

AlexB

Re: Re: How can I get the position of any co-ordinate of a line?

1 month ago

Thanks, that's what I was thinking to begin with, but that's some very tidy code!

I'll try and implement that, and GoToLoop's answer, and see which one works best.

I checked the ClostestPointToLine, which is useful too.

Thanks!

amnon.owed

Re: How can I get the position of any co-ordinate of a line?

1 month ago

For a clickable line, you might not want to use the exact line as such, but give a certain leniency towards the user to click near the line. In that case you may want to check if the distance of the mouse is within a certain radius of the line. For that you can use the ClosestPointToLine example which you can find here: https://github.com/AmnonOwed/P5_MathAndVectors

paulr451

Re: Re: How can I get the position of any co-ordinate of a line?

1 month ago

Here is function for actual distance, quickly ported to processing, with test app:

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

PVector node1 = new PVector(55,60);
PVector node2 = new PVector(400,440);

void draw() {
background(128);
float distance = PtSegDist(new PVector(mouseX, mouseY), node1, node2);
if(distance < 10) stroke(255,0,0);
else stroke(0);
line(node1.x, node1.y, node2.x, node2.y);
}

/*
function to det distance between point "tp"
and line segment defined by "n1" and "n2"
*/
float PtSegDist(PVector tp, PVector n1, PVector n2) {
PVector np = new PVector(n1.x, n1.y);
PVector v = new PVector(n2.x, n2.y);
PVector w = new PVector(tp.x, tp.y);
v.sub(n1);
w.sub(n1);
float c1 = w.dot(v);
if(c1 <= 0)
return tp.dist(n1);
float c2 = v.dot(v);
if(c2 <= c1)
return tp.dist(n2);
float c3 = c1 / c2;
v.mult(c3);
np.add(v);
return tp.dist(np);
}

Top Reply