Math details of mouse rollover circle

Programming Questions

start99

Math details of mouse rollover circle

in Programming Questions • 1 year ago

I don’t have a specific programming code problem. I wanted to share some code that I haven’t seen in tutorials. I’ve found two methods to do mouse rollover on a circle; there may be others. The sketch includes a demonstration of both methods.

Method A.

S1. Subtract center x from mouseX; square that

S2. Subtract center y from mousey; square that

S3. Add the two square values

S4. If the sum is <= square of radius, the mouse is over (in) the circle.

I copied this concept from: http://stackoverflow.com/questions/481144/how-do-you-test-if-a-point-is-inside-a-circle

Method B.

S1. Subtract mouseX from center x; square that

S2. Subtract mousey from center y; square that

S3. Add the two square values.

S4. Get the square root of that sum.

S5. If the square root < radius, the mouse is over (in) the circle.

Note: the “overCircle” block – not used - at end of my code is example of Method B, copied from:

http://processing.org/learning/topics/buttons.html

When the sketch starts, the mouse positions are 0,0 and is therefore not in the circle. As the user moves the mouse, the values in both methods are updated and displayed. Moving the mouse off the window resets it to 0,0.

The user can click on one of four X’s to show the values of each “corner” where either mouseX or mouseY is set to the radius. These corner settings are helpful in following the math in both methods. Note: Although the mouse settings are set to these values, I don’t know how to actually move the cursor.

Notice that only “A – ON CIRCLE” appears in the circle when a corner X is clicked. There seems to be a question of whether the points on the circumference are part of the circle or if they’re an outside wall of the circle. If one imagines the circumference as a “one-pixel-thick” container, the circumference points would not be inside the container. But in a 2d area, it seems that the circumference is part of the circle. I don’t want to open that discussion; you can modify it as desired. When the average person is moving the mouse, she doesn’t know if it’s exactly on the circumference, so either “<=” or “<” seem to work.

After moving the cursor around, I noticed a pattern. Both methods arrive at the same squared value in step 3. So it makes no difference in steps 1 and 2 which number is subtracted. A negative number squared is positive. So all coordinate differences give positive results in the fourth column.

The big difference is in steps 4 and 5. I don’t understand the logic (especially Method B) but they do work.

Anybody know how these calculations developed? Is it part of geometry?

MouseOverCircle sketch code:

// Demonstrate a way to sense mouse over an ellipse
int x;
int y;
int w;
int h;
int r;
float aXdif;
float aYdif;
float bXdif;
float bYdif;
boolean A = false; // true if mouse over in A method
boolean B = false; // true if mouse over in B method
void setup() {
size(500,400);
smooth();
x = 100;
y = 100;
w = 100;
h = 100;
r = w/2;
}
void draw() {
background(255);
fill(0);
text("X", x, y - r - 5); // n
text("X", x + r +5, y); // e
text("X", x, y + r + 15); // s
text("X", x - r - 15, y); // w
text("Click on X to focus on that corner",5,12);
// if mouse outside screen, reset both to 0
if((mouseX == 0) || (mouseY == 0) || (mouseX == width-1) || (mouseY == height-1)) {
mouseX = 0;
mouseY = 0;
}
drawData(mouseX, mouseY);
if(rolloverA(mouseX, mouseY)) {
fill(0);
text("A - ON CIRCLE", x-40, y -10);
}
if(rolloverB(mouseX, mouseY)) {
fill(0);
text("B - ON CIRCLE", x-40, y + 10);
}
fill(255,100);
ellipse(x, y, w, h); // draw ellipse either way
}
boolean rolloverA(int mx, int my) {
if((sq(aXdif)) + sq((aYdif)) <= sq(r)) {
A = true;
return true;
} else {
A = false;
return false;
}
}
boolean rolloverB(int mx, int my) {
if(sqrt(sq(bXdif) + sq(bYdif)) < r) {
B = true;
return true;
} else {
B = false;
return false;
}
}
void drawData(int mx, int my) {
int sly; // Method starting line
int L = 12; // line size
int tX;
int tY;
String tT;
float mxyTotal;
// mxMinusX = mx - x;
// myMinusY = my - y;
// draw line radius header
tY = 32;
tX = 430;
tT = "r";
drawText(tT, tX, tY);
// draw line radius data
tY = 44;
tT = str(r);
drawText(tT, tX, tY);
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// method A
aXdif = mx - x;
aYdif = my - y;
sly = 50; // method A starting line
// draw method A line
line(190, sly, 480, sly);
tT = "Method A";
tX = 190;
tY = sly += L;
drawText(tT, tX, tY);
// draw line 1 headers =============================
tX = 190;
tY = sly += L*2;
tT = "mx";
drawText(tT, tX, tY);
tX += 40;
tT = "x";
drawText(tT, tX, tY);
tX += 40;
tT = "(mx - x)";
drawText(tT, tX, tY);
tX += 60;
tT = "sq(mx - x)";
drawText(tT, tX, tY);
// draw line 1 data
tX = 190;
tY = sly += L;
tT = str(mx);
drawText(tT, tX, tY);
tX += 40;
tT = str(x);
drawText(tT, tX, tY);
tX += 40;
tT = str(aXdif);
drawText(tT, tX, tY);
tX += 60;
tT = str(sq(aXdif));
drawText(tT, tX, tY);
// draw line 2 headers =============================
tX = 190;
tY = sly += L*2;
tT = "my";
drawText(tT, tX, tY);
tX += 40;
tT = "y";
drawText(tT, tX, tY);
tX += 40;
tT = "(my - y)";
drawText(tT, tX, tY);
tX += 60;
tT = "sq(my - y)";
drawText(tT, tX, tY);
// draw line 2 data
tX = 190;
tY = sly += L;
tT = str(my);
drawText(tT, tX, tY);
tX += 40;
tT = str(y);
drawText(tT, tX, tY);
tX += 40;
tT = str(aYdif);
drawText(tT, tX, tY);
tX += 60;
tT = str(sq(aYdif));
drawText(tT, tX, tY);
// draw line 3 headers =============================
tX = 262;
tY = sly += L*3;
tT = "sq(mx - x) + sq(my - y)";
drawText(tT, tX, tY);
tX = 430;
tT = "sq(r)";
drawText(tT, tX, tY);
// draw line 3 data
tX = 330;
tY = sly += L;
tT = str(sq(aXdif) + sq(aYdif));
drawText(tT, tX, tY);
// draw =, > or <
tX = 400;
mxyTotal = sq(aXdif) + sq(aYdif);
if(mxyTotal == sq(r)) {
tT = "=";
drawText(tT, tX, tY);
}
if(mxyTotal > sq(r)) {
tT = ">";
drawText(tT, tX, tY);
}
if(mxyTotal < sq(r)) {
tT = "<";
drawText(tT, tX, tY);
}
tX = 430;
tT = str(sq(r));
drawText(tT, tX, tY);
//++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
// method B
bXdif = x - mx;
bYdif = y - my;
sly = 200; // method B starting line
// draw method B line
line(190, sly, 480, sly);
tT = "Method B";
tX = 190;
tY = sly += L;
drawText(tT, tX, tY);
// draw line 1 headers =============================
tX = 190;
tY = sly += L*2;
tT = "x";
drawText(tT, tX, tY);
tX += 40;
tT = "mx";
drawText(tT, tX, tY);
tX += 40;
tT = "(x - mx)";
drawText(tT, tX, tY);
tX += 60;
tT = "sq(x - mx)";
drawText(tT, tX, tY);
// draw line 1 data
tX = 190;
tY = sly += L;
tT = str(x);
drawText(tT, tX, tY);
tX += 40;
tT = str(mx);
drawText(tT, tX, tY);
tX += 40;
tT = str(bXdif);
drawText(tT, tX, tY);
tX += 60;
tT = str(sq(bXdif));
drawText(tT, tX, tY);
// draw line 2 headers =============================
tX = 190;
tY = sly += L*2;
tT = "y";
drawText(tT, tX, tY);
tX += 40;
tT = "my";
drawText(tT, tX, tY);
tX += 40;
tT = "(y - my)";
drawText(tT, tX, tY);
tX += 60;
tT = "sq(y - my)";
drawText(tT, tX, tY);
// draw line 2 data
tX = 190;
tY = sly += L;
tT = str(y);
drawText(tT, tX, tY);
tX += 40;
tT = str(my);
drawText(tT, tX, tY);
tX += 40;
tT = str(bYdif);
drawText(tT, tX, tY);
tX += 60;
tT = str(sq(bYdif));
drawText(tT, tX, tY);
// draw line 3 headers =============================
tX = 262;
tY = sly += L*3;
tT = "sq(x - mx) + sq(y - my)";
drawText(tT, tX, tY);
// tX = 430;
// tT = "sq(r)";
// drawText(tT, tX, tY);
// draw line 3 data
tX = 330;
tY = sly += L;
tT = str(sq(bXdif) + sq(bYdif));
drawText(tT, tX, tY);
// draw line 4 headers =============================
tX = 242;
tY = sly += L*3;
tT = "sqrt(sq(x - mx) + sq(y - my))";
drawText(tT, tX, tY);
tX = 430;
tT ="r";
drawText(tT, tX, tY);
// draw line 4 data =============================
tX = 320;
tY = sly += L;
tT = str(sqrt(sq(x - mx) + sq(y - my)));
drawText(tT, tX, tY);
// draw =, > or <
tX = 400;
mxyTotal = sqrt(sq(bXdif) + sq(bYdif));
if(mxyTotal == r) {
tT = "=";
drawText(tT, tX, tY);
}
if(mxyTotal < r) {
tT = "<";
drawText(tT, tX, tY);
}
if(mxyTotal > r) {
tT = ">";
drawText(tT, tX, tY);
}
tX = 430;
tT = str(r);
drawText(tT, tX, tY);
}
void drawText(String tTT, int tXX, int tYY) {
text(tTT, tXX, tYY);
}
void mousePressed() {
// n
if(mouseY < y - r) {
mouseX = x;
mouseY = y - r;
}
// e
if(mouseX > x + r) {
mouseX = x + r;
mouseY = y;
}
// s
if(mouseY > y + r) {
mouseX = x;
mouseY = y + r;
}
// w
if(mouseX < x - r) {
mouseX = x - r;
mouseY = y;
}
}
// code snippet from processing.org/learning/topics/buttons
boolean overCircle(int x, int y, int diameter)
{
float disX = x - mouseX;
float disY = y - mouseY;
if(sqrt(sq(disX) + sq(disY)) < diameter/2 ) {
return true;
}
else {
return false;
}
}

Sorry for the long post. Hope you find this helpful.

Replies(10)

dr.mo

Re: Math details of mouse rollover circle

1 year ago

method A and B are equivalent, both use pythagoras (a*a + b*b = c*c) except that A doesn't require the use of the square root operator which is very slow. in general i find it's almost always possible (and good practice) to avoid using the sqrt() function.

hellochar

Re: Math details of mouse rollover circle

1 year ago

These calculations come mostly from trigonometry.

The basic question is "is a given point, in this case the mouse's location, inside of this circle?". We know a few things:

a) The circle's center x-y position (I'll call it cx, cy)

b) The circle's radius (I'll call it "rad")

c) The mouse's x-y position (I'll call it mx, my)

Now, the defining feature of a circle is that all points inside the circle are at a distance less than "rad" away from the circle's center. This also tells us how to test whether a point is inside the circle; we simply test if its distance is less than "rad" away from the center.

So how do we get the distance between two points, the circle's center and the mouse position? Well, we know that the distance between two points is the length of the diagonal line connecting them. How do we calculate that? Triangles help us here.

Between any two points, you can imagine drawing a right triangle, where the two points are situated at the non-right corners. An illustration:

You'll notice that the hypotenuse of the triangle is exactly the diagonal connecting the two points. If we find the length of the hypotenuse, then we'll have the length of the diagonal, meaning we'll have the distance between the two points, meaning we can test if it's less than the circle's rad, meaning we can determine whether the mouse is inside the circle or not! So how do we find the length?

Pythagorean Theorem FTW! That good old (a squared) + (b squared) = (c squared). "a" and "b" denote the lengths of the two sides of the triangle, and "c" denotes the length of the hypotenuse. So if we have (a squared) and (b squared), we can just add them to get (c squared). Once we have (c squared), we can just take its square root and get "c". How do we find what a and b are? We have the x coordinates of both points, so we can just subtract them to get (mx - cx). Or (cx - mx); it doesn't matter. Same goes for y; we'll get (my - cy). We don't care about negatives because, as you said, squaring them will make the result positive regardless. So we get the sides of the triangles by subtracting the x-y coordinates, square them and add to get the hypotenuse length squared, square root to get the hypotenuse length, which is the distance between the two points, and test if the distance is less than the radius. That should cover Method B.

Method A is actually a slight optimization of Method B:

Our comparison for testing inside-of-circle-ness is the inequality (distance between points) < (radius of circle).

We've also established that (distance between points) = (length of hypotenuse) = sqrt(a squared + b squared).

So, we can just substitute sqrt(a squared + b squared) for (distance between points), which gives the inequality sqrt(a squared + b squared) < (radius of circle).

Unfortunately, sqrt() takes a "long" time to compute on a computer; it'd be nice if we could get rid of that sqrt().

Thankfully, we can just square both sides, and the inequality will turn into (a squared) + (b squared) < (radius of circle squared). So that's where the other method comes from.

start99

Re: Math details of mouse rollover circle

1 year ago

Thanks for that explanation.

Question about the first part.

When I imagine the right triangle, I see the familiar x,y chart.

Assume the center point (cx, cy) of the triangle (right-most point in example) is (5, 0).

The bottom side of the triangle is the line segment from origin (0, 0) to (5, 0).

How do we know the left side forms a 90 degree angle with the bottom side?

Is the x axis and y axis assumed to be perpendicular?

But after seeing the right triangle, I understand the rest.

Last week I learned about cos() and sin() to draw angles. I’ve learned a lot of basic trig since starting Processing!

hellochar

Re: Re: Math details of mouse rollover circle

1 year ago

Yes the x and y axis are perpendicular.

start99

Re: Math details of mouse rollover circle

1 year ago

I’m submitting code that demonstrates detailed steps of mouse over circle.

//MouseOverCircle_triangle 2/25/12
// Demonstrate the steps of mouse over a circle
Circle main1C, main2C, nextC, priorC;
int x;
int y;
int w;
int h;
int r;
// constrained values
int cmx; // mouseX
int cmy; // mouseY
// true zero xy
int zx;
int zy;
int zmx;
int zmy;
int zxDif;
int zyDif;
// step values
int step = 1; // starting value; increments as user clicks
boolean showNext; // nextC button
int ssy; // start step text
int sly; // start text text
int hh = 45; // hor. type size
int tx0 = 190; // side
int tx1 = tx0 + hh; // point
int tx2 = tx0 + (hh*2); // center
int tx3 = tx0 + (hh*3) +5; // diff
int tx4 = tx0 + (hh*5); // squared
int tx5 = tx0 + (hh*7); // <=>
int tx6 = tx0 + (hh*8); // rad squared
int vv = 12; // vert. type size
int ty0 = 70; // main
int ty1 = ty0 + (vv*2); // x hdr
int ty2 = ty0 + (vv*3); // x data
int ty3 = ty0 + (vv*5); // y hdr
int ty4 = ty0 + (vv*6); // y data
int ty5 = ty0 + (vv*8); // sum hdr
int ty6 = ty0 + (vv*10); // sum data
int rx0 = tx0 + (hh*8); // rad hdr
int ry0 = ty0 - (vv*3); // rad data
void setup() {
size(630,600);
smooth();
x = 100; // main1C values
y = 100;
w = 100;
r = w/2;
main1C = new Circle(x, y, w, w, color(255, 0, 0, 120), '1');
main2C = new Circle(250, 100, w, w, color(0, 0, 255, 120), '2');
nextC = new Circle(60, 210, 30, 30, color(0, 255, 0), '>');
priorC = new Circle(20, 210, 30, 30, color(0, 255, 0), '<');
}
void draw() {
background(255);
fill(0);
drawData(mouseX, mouseY);
}
void drawData(int mx, int my) {
ssy = 250;
if(step != 1) {
cmx = constrain(mouseX, 30, 170); // cmx is mouseX constrained
cmy = constrain(mouseY, 30, 170); // cmy is mouseY constrained
} else {
cmx = mx;
cmy = my;
}
if(main1C.overCircle(mouseX, mouseY)) {
if(step == 1) {
println(frameCount + " on the circle");
}
if(step == 8) {
fill(0);
text("ON THE CIRCLE", x - 40, y - (r+10));
}
}
// 111111111111111111111111111111111111111
if(step >= 1) {
// draw main circle
main1C.display();
if((step != 9) && (showNext == true)) {
stroke(0);
fill(0);
text("next", nextC.x -10, nextC.y -20);
nextC.display();
}
if(step == 1) {
main2C.display();
fill(0);
text("page " + str(step), 4, height - 12);
text("You control computer graphics by moving and clicking the mouse. ", 6, ssy);
text("Move the mouse cursor over red circle 1. ", 6, ssy += vv*2);
text(" The console shows the frame number and message while the cursor is 'on the circle'. ", 6, ssy += vv);
text(" The condition is evaluated in each frame.", 6, ssy += vv);
text("Click outside the blue circle 2. ", 6, ssy += vv*2);
text(" With each click the frame number and a message appears in the console. ", 6, ssy += vv);
text(" The mousePressed() function executes only when you press the mouse; it's not continual. ", 6, ssy += vv);
text("Now click on blue circle 2. ", 6, ssy += vv*2);
text(" Notice the additional message in the console. ", 6, ssy += vv);
text(" There is a 'mousePressed' event, combined with 'on the circle' condition. ", 6, ssy += vv);
text("You must provide code that determines if the cursor is 'on the circle'. ", 6, ssy += vv*2);
text("This sketch explains how it's done. ", 6, ssy += vv);
text("When done here, click the green circle for next page. ", 6, ssy += vv*4);
}
}
// 222222222222222222222222222222222222222
if(step >= 2) {
// set to true x,y coordinates
// point
zmx = cmx - w;
zmy = (cmy - w) * -1 ;
zx = 0;
zy = 0;
zxDif = zmx - zx;
zyDif = zmy - zy;
// point ellipse
stroke(0);
fill(255);
ellipse(cmx, cmy, 5, 5);
fill(0);
// hypotenuse diagonal
drawSide(x, y, cmx, cmy,color(0), 2);
strokeWeight(1);
// prior button
stroke(0);
text("prior", priorC.x - 10, priorC.y - 20);
priorC.display();
if(step == 2) {
// horizontal x
if((abs(zxDif) > 0) && (zyDif==0)) {
fill(255, 0, 0);
text(str(zxDif), tx3, ty2);
fill(0);
if(abs(zxDif) <= r) {
text("ON THE CIRCLE", 70, 45);
}
}
// vertical y
if((abs(zyDif) > 0) && (zxDif==0)) {
fill(0, 0, 255);
text(str(zyDif), tx3, ty4);
fill(0);
if(abs(zyDif) <= r) {
text("ON THE CIRCLE", 70, 45);
}
}
if(zmx==0 && zmy==0) {
text("ON THE CIRCLE", 70, 45);
}
drawNumbersX();
drawNumbersY();
if(zmx == 0) {
// vertical line - blue
drawSide(x, y, cmx, cmy, color(0, 0, 255), 4);
strokeWeight(1);
}
if(zmy == 0) {
// horizontal line - red
drawSide(x, y, cmx, cmy, color(255, 0, 0), 4);
strokeWeight(1);
}
fill(0);
text("page " + str(step), 4, height - 12);
text("Is the point on the circle?", 6, ssy);
text("Draw a line from the point to the circle's center. ", 6, ssy += vv*2);
text("If the line length is less than the radius, the point is on the circle.", 6, ssy += vv);
text("There is no direct way of knowing the distance from most points to the center, ", 6, ssy += vv*2);
text("unless either the x or y coordinates are identical (exactly vertical or horizontal lines). ", 6, ssy += vv);
text("If point and center have identical x (0), the vertical y can be measured. ", 6, ssy += vv*2);
text("If point and center have identical y (0), the horizontal x can be measured. ", 6, ssy += vv);
text("When you move the point to that kind of location, a colored line will appear. ", 6, ssy += vv*2);
text("Simple math determines if the point is on the circle.", 6, ssy += vv*2);
text("But it takes too much time to find these exact locations. ", 6, ssy += vv*2);
text("We ask only that the user click somewhere within a shape like a circle. ", 6, ssy += vv);
}
}
// 333333333333333333333333333333333333333
if(step >= 3) {
if(step == 3) {
fill(0);
text("page " + str(step), 4, height - 12);
text("To measure the distance from center to any point, we use the Pythagorean theorem (a^ x b^ = c^).", 6, ssy);
text("Imagine the 'point to center' line as the hypotenuse. This will be side 'c'. ", 6, ssy += vv*2);
text("But how do we find a right angle for the right triangle? ", 6, ssy += vv*2);
}
}
// 444444444444444444444444444444444444444
if(step >= 4) {
if(step == 4) {
fill(0);
drawXlines();
text("page " + str(step), 4, height - 12);
text("The computer screen coordinates are similar to the Cartesian (x,y) coordinate system. ", 6, ssy);
text("The x axis lines are parallel. ", 6, ssy += vv*2);
text("Move up and down. ", 6, ssy += vv*2);
}
}
// 555555555555555555555555555555555555555
if(step >= 5) {
if(step == 5) {
fill(0);
drawXlines();
drawYlines();
text("page " + str(step), 4, height - 12);
text("and the y axis lines are parallel.", 6, ssy);
text("Move side to side. ", 6, ssy += vv*2);
text("The x lines are perpendicular to the y lines, providing right angles.", 6, ssy += vv*2);
}
}
// 666666666666666666666666666666666666666
if(step >= 6) {
drawSide(x, y, cmx, y, color(255, 0, 0), 2);
strokeWeight(1);
drawNumbersX();
text("side", tx0, ty0 );
text("squared",tx4, ty0);
text("a", tx0, ty1);
text("sq(mx - x)", tx4, ty1);
fill(255 , 0, 0);
text(str(zxDif), tx3, ty2);
fill(0);
text(str(sq(zxDif)), tx4, ty2);
if(step == 6) {
fill(0);
drawXlines();
drawYlines();
text("page " + str(step), 4, height - 12);
text("Side a will be the horizontal side. ", 6, ssy += vv*2);
text("Get the difference between point and center on the x axis. (length of side a) ", 6, ssy += vv*2);
text("Square that value for side a. ", 6, ssy += vv);
text("Notice that it doesn't matter if you have a negative number; the square will be positive. ", 6, ssy += vv*2); }
}
// 777777777777777777777777777777777777777
if(step >= 7) {
// vertical from base to cursor
drawSide(cmx, y, cmx, cmy, color(0, 0, 255), 2);
strokeWeight(1);
drawNumbersY();
text("b", tx0, ty3);
text("sq(my - y)", tx4, ty3);
fill(0, 0, 255);
text(str(zyDif), tx3, ty4);
fill(0);
text(str(sq(zyDif)), tx4, ty4);
if(step == 7) {
fill(0);
drawXlines();
drawYlines();
text("page " + str(step), 4, height - 12);
text("Side b will be the vertical side. ", 6, ssy += vv*2);
text("Get the difference between point and center on the y axis. (length of side b)", 6, ssy += vv*2);
text("Square that value for side b. ", 6, ssy += vv);
}
}
// 888888888888888888888888888888888888888
if(step >= 8) {
text(str(sq(r)),tx6, ty5);
text("side", tx0, ty0 );
text("c", tx0, ty5 );
if((sq(zxDif)) + (sq(zyDif)) < sq(r)) {
text("<", tx5, ty5);
}
if((sq(zxDif)) + (sq(zyDif)) == sq(r)) {
text("=", tx5, ty5);
}
if((sq(zxDif)) + (sq(zyDif)) > sq(r)) {
text(">", tx5, ty5);
}
text("sum", tx3, ty5);
text(str((sq(zxDif)) + (sq(zyDif))), tx4, ty5);
if(step == 8) {
text("page " + str(step), 4, height - 12);
text("Sum the two squares. ", 6, ssy += vv*2);
text("Compare the sum of side-a-squared and side-b-squared with the radius-squared. ", 6, ssy += vv*2);
text(" If the 2 sides are greater, side c of the right triangle is greater than the radius; the point is NOT on the circle. ", 6, ssy += vv);
text(" If less, the point IS on the circle. ", 6, ssy += vv);
text("The Pythagorean theorem (a^ x b^ = c^) has enabled us to know if a point is on the circle. ", 6, ssy += vv*2);
text("A further step can be done, although it's not needed. ", 6, ssy += vv*2);
}
}
// 999999999999999999999999999999999999999
if(step >= 9) {
float sumSquared = (sq(zxDif) + sq(zyDif));
float sideC = sqrt(sumSquared);
text(str(sideC), tx3, ty6);
text("sqrt", tx2, ty6);
text(str(r),tx6, ty6);
if(sideC <= r) {
fill(0);
text("ON THE CIRCLE", x - 40, y - (r+10));
}
if(step == 9) {
text("page " + str(step), 4, height - 12);
text("The square root of side-c-squared gives the actual length of side c. ", 6, ssy += vv);
text("Compare that to the radius. ", 6, ssy += vv);
text("Although this step is not needed for point-on-the-circle, you may at some time need the actual length of side c. ", 6, ssy += vv*2);
}
}
}
void drawNumbersX() {
text("radius", rx0, ry0);
text(str(r),rx0, ry0+vv);
text("point",tx1, ty0);
text("center",tx2, ty0);
text("difference",tx3, ty0);
text("mx", tx1, ty1);
text("x", tx2, ty1);
text("mx - x", tx3, ty1);
text(str(zmx), tx1, ty2);
text(str(zx), tx2, ty2);
}
void drawNumbersY() {
text("my", tx1, ty3);
text("y", tx2, ty3);
text("my - y", tx3, ty3);
text(str(zmy), tx1, ty4);
text(str(zy), tx2, ty4);
}
void drawXlines() {
stroke(0);
line(30, y, 170, y);
line(30, cmy, 170, cmy);
}
void drawYlines() {
stroke(0);
line(cmx, 30, cmx, 170);
line(x, 30, x, 170);
}
void mousePressed() {
if(step == 1) {
println(" ");
println(frameCount);
println("mousePressed");
if(main2C.overCircle(mouseX, mouseY)) {
println("AND on the circle");
showNext = true;
}
}
if(priorC.overCircle(mouseX, mouseY)) {
step -= 1; // decrement step
if(step == 1) {
showNext = false; // step 1 - don't show nextC when starting
}
}
if(nextC.overCircle(mouseX, mouseY)) {
if(step == 9) {
} else {
step += 1; // increment step
}
}
}
// to get colored line, use thin shape
void drawSide(int spx, int spy, int scx, int scy, color c, int sw) {
strokeWeight(sw);
stroke(c);
beginShape();
vertex(spx, spy);
vertex(scx, scy);
vertex(scx, scy);
vertex(spx, spy);
endShape(CLOSE);
}

patakk

Re: Math details of mouse rollover circle

1 year ago

What about the good ol' dist(x1, y1, x2, y2) function? It seems to do the job just fine..

float ellipse_X, ellipse_Y, ellipse_radius;
void setup() {
size(600, 600);
background(0);
smooth();
noStroke();
ellipse_X = random(width);
ellipse_Y = random(height);
ellipse_radius = random(400);
}
void draw() {
background(0);
if (dist(ellipse_X, ellipse_Y, mouseX, mouseY) < ellipse_radius/2) fill(255, 0, 0);
else fill(255);
ellipse(ellipse_X, ellipse_Y, ellipse_radius, ellipse_radius);
}

In case I'm missing the point, I apologise..

start99

Re: Math details of mouse rollover circle

1 year ago

patakk,

thanks, that code seems to work.

I'm not arguing for specific code; there's usually many ways to do anything.

Perhaps it was overkill, but I wanted to explain how the Pythagorean theorem is used in a practical way.

And my sketch is for beginners like me interested in the details.

Like - How does a right triangle appear in a circle?

There are many who don't need to see details; they pick things up easily, like a black box.

Others are cursed to need the details.

patakk

Re: Math details of mouse rollover circle

1 year ago

I've just realised that the name of this thread is " Math details..." which pretty much explains your aproach. I support using math as a tool for solving problems like this one, I mean, who doesn't, math is inevitable in programming.

If you are interested, try solving the same "mouse rollover" problem, but on an ellipse which does not have equal width and height. Something like this really can't be solved using just a simple function (dist()) and this problem really does require using a bit of a math knowledge. I'll try solving it later today.

( hint)

allonestr..

Re: Math details of mouse rollover circle

1 year ago

I think it would be mean to provide a solution to this, so have drawn a diagram to show how you might approach it if you need some help.

patakk

Re: Math details of mouse rollover circle

1 year ago

allonestring, that's a nice solution, here's mine:

This inequality is true when the mouse is in the ellipse (in my code, it's the bold part).

float elX, elY, elW, elH, a, b;
void setup() {
size(600, 600);
background(0);
smooth();
noStroke();
elX = random(width);
elY = random(height);
elW = random(400); // ellipse width
elH = random(400); // ellipse height
}
void draw() {
background(0);
a = sq( (mouseX - elX)*2/elW );
b = sq( (mouseY - elY)*2/elH );
if ((a + b) < 1) fill(255, 0, 0);
else fill(255);
ellipse(elX, elY, elW, elH);
}

Top Reply