Find multiple arc edge?

p5.js Coding Questions
1

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 );

2

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.
3

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

4

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, 
    radians(60), radians(90) );

  // 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));

  if (angle>radians(60) && 
    angle<radians(90) &&
    (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);
}
//
5

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

6

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

Used createVector (with p5.js) and its really useful to check positions :slight_smile:
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

7

https://www.khanacademy.org/computer-programming/steering-mechanism/6221404403499008

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.

8

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

9

My code is dead simple

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

1 Like
10

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 :joy:

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