# Find multiple arc edge?

Hello.
I can’t understand how i can find arc() edge. Currently i control White line with mouse.
And goal is to change that line to Red, if mouse is outside Yellow zone.

I draw multiple arcs (on top of each) and real size is marked with red stroke.
Code:

``````arc( xloc, yloc, size - i * steps, size - i * steps, 60, 90 );
``````

the arc you ask about is the red arc?
and the yellow ( little bit transparent ) ?zone? is a arc or triangle?

you need to tell if that is

• just some color on the canvas ( like from a picture )
• or a object you know, like start point, begin and end angle…
so some math can be used.

Yes, arc is marked with Red and Yellow stroke.
Yellow, is arc fill (And i call this Zone)
Added on the left arc size (because currently it’s static shape and i know coordinates)
Below image shows more arc’s:

Each arc increase size by 200, and final size is: 6400

some ideas

``````// https : // forum.processing.org/two/discussion/10474/find-angle-between-2-points

PVector centerPoint; // the fixed red point

void setup() {
size(1200, 600);
centerPoint = new PVector(width/2, height/2);
}

void draw() {
background(0);

// draw arc
fill(255);
arc( centerPoint.x, centerPoint.y,
430, 430,

// draw a simple cross at centerPoint
crossAtPV(centerPoint);

// show centerPoint in red
ellipsePV(centerPoint);

// get angle
float angle = angleBetweenPV_PV(centerPoint, new PVector(mouseX, mouseY));

(PVector.dist(new PVector(mouseX, mouseY), centerPoint ) < 430 / 2) ) {
text ("INSIDE", width/2+108, 222);
}//if

// show the found angle
fill(255, 0, 0); // red
triangleMy(angle);
fill(255); // white
text(angle
+"\n"
+degrees(angle), 23, 23);
}

// --------------------------------------------------------------------

float angleBetweenPV_PV(PVector centerPV, PVector movingPV) {

// calc angle : the core of the sketch

PVector d = new PVector();

// calc angle

// delta
d.x = movingPV.x - centerPV.x;
d.y = movingPV.y - centerPV.y;
// angle
float angle1 = atan2(d.y, d.x);

return angle1;
}

void triangleMy(float ang) {

pushMatrix();

translate(centerPoint.x, centerPoint.y);

rotate(ang);

// fill(255); // white shield
triangle(60, 0,
80, -30,
80, 30);

popMatrix();
}

void ellipsePV(PVector pv) {
fill(255, 0, 0); // red
ellipse(pv.x, pv.y, 10, 10);
}

void crossAtPV(PVector pv) {
stroke(255);
line(pv.x, 0, pv.x, height);
line(0, pv.y, width, pv.y);
}
//
``````

You can view, my steering behaviour attempt, where i did this on khan academy, i will post a link to it later

Thanks Chrisir, but im new to this…
And mathematic not so good…

Used createVector (with p5.js) and its really useful to check positions
So decided to draw on top lines. Maybe i will find the way to calculate first and last Line edge…

Ok paulgoux , i will wait for any information. Thanks

Here you are, look for the this.eyes function. The function essentially creates three variables x_1 x and x1 and same for y which represent the center of the arc then the center minus an angle and the center plus an angle. I use arctan2 to find the angle then map the angle from 0- 360 arctan only calculate angles from -180 to 180 so you need to remap it. Then I calculate the distance from the point to the edge of the arc using the dist function. With that your almost ready to go. Now you calculate the angle of the target you want to interact with and create an if statement that checks thats its both within the distance range and within ± the angle.

If you need any more help let me know.

I will watch some tutorials, to understand code better.
I know what i want, but i can’t achieve that (at this time)

My code is dead simple

Just use the lines above, you don’t have to understand what is inside the function

1 Like

Thanks a lot. I found your old post with same function name, which worked perfect!
After a little modification now i can see even dynamic angle

``````function angleBetweenPV_PV(a, mousePV) {
let d = createVector();
push();
translate(a.x, a.y);
// delta
d.x = mousePV.x - a.x;
d.y = mousePV.y - a.y;
// angle
realAngle = (atan2(d.y, d.x) -75) * -1;
pop();
}
``````
1 Like