Mouse Over on a Bezier Curve

mustafa

Hi,

I want to know if there is a way in which a can detect a mouse over on bezier curve. I have a couple of bezier curve and i want to change there color if mouse hover on them. And the curves are generated from dynamic data.

Thanks in advance

tlecoz

Hello !

You probably can compute that but I think it's very complex.

Fortunately, you can use an alternate way to do it.

First of all, divide your bezier-curve in some line-segments. Then apply a "line-VS-circle collision detection" on each segment until you find a collision. The circle is a "virtual circle" with a small radius, that follow the mouse.

And that's all !

_vk

By coincidence, some days ago there was a post about calculating bezier curves,

http://forum.processing.org/two/discussion/comment/27315#Comment_27315

but I think that will need further development to achieve exactly the bezier draw by Processing.

Anyway another technique to determine mouse over is to use a not displayed PGraphics to draw the same thing you draw in main canvas, but with a unique color for each curve. Then you test this other PGraphics for the color under the mouse, if is not the bg color, bingo you are over a draw. You can also use the colors to return over which curve you are over.

HTH

quark

An interesting problem and one that doesn't have a straightforward solution.

The solution by @fanthomas would work but as he said would involve a lot of calculation.

There is another way which you might do it, the following is assuming you are drawing in 2D

1) use createGraphics to create an offscreen buffer

2) copy the transformation matrix from the main display to the buffer

3) switch smoothing off for the buffer (if appropriate for the renderer)

4) increase the strokeWeight to something like 5 and turn off fill

5) draw each thickened Bezier curve with a unique colour

6) test for the colour being displayed in the buffer using mouseX and mouseY

It is challenging but once you have done it the technique could be used in many other situations.

tlecoz

well, there is actually another solution :)

just check the color of the pixel under the mouse . If it's your background color, you don't collide ; if not, then you are on your curve.

quark

True - but we wouldn't know which curve the mouse was over (unless they all have different colours).

Also there is the speed of the mouse movement in that the difference between mouseX/mouseY and pmouseX/pmouseY means you could skip over thin Bezier curves but less likely on the buffer.

tlecoz

"Also there is the speed of the mouse movement in that the difference between mouseX/mouseY and pmouseX/pmouseY means you could skip over thin Bezier curves but less likely on the buffer."

just need a loop between the old position and the new one.

Something like that

float oldX = 123;
float oldY = 456;

float distX = mouseX - oldX;
float distY = mouseY - oldY;
float dist  = sqrt(distX * distX + distY * distY);
float angle = atan2(distY,distX);

int len = ceil(dist);
int i;

for(i=0;i<len;i++){
    oldX += cos(angle);
    oldY += sin(angle);
    processBezierColorDetection(oldX,oldY);
}

"but we wouldn't know which curve the mouse was over (unless they all have different colours)."

Not true :)

You just need to check if you get collision between each "draw-call" of each bezier-curve until you get a collision (if you get a collision)

quark

That would work - well thought out. :)

mustafa

Thanks! for the help will try the different options :) Thanks again