Loading...
Logo
Processing Forum
General Discussion Other
alexb
AlexB

Drawing an arrow from the edge of a circle to another circle's edge

in General Discussion  •  Other  •  3 months ago  
I'm trying to draw an arrow from the edge of a circle to the edge of another circle.
 
The only data I store is the coordinates of the two circles, and using the line function to join them up, and triangle to draw the arrow head. 

But I can't find a way to start the line at the edge of the circle and get it to stop at the edge of the other node, and be able to drag the circles round without the arrows going wrong.

Replies(6)

tfguy44
tfguy44

Re: Drawing an arrow from the edge of a circle to another circle's edge

3 months ago
Might not work so well if the circles are close (intersecting)...

Copy code
  1. int cx, cy, cr, kx, ky, kr;

  3. void setup() {
  4.   size(400, 400);
  5.   cx = width/4;
  6.   cy = height/4;
  7.   cr = 20;
  8.   kx = 3 * width/4;
  9.   ky = 3 * height/4;
  10.   kr = 30;
  11.   smooth();
  12.   noFill();
  13. }

  15. void draw() {
  16.   background(0);
  17.   if ( mousePressed ) {
  18.     cx = mouseX;
  19.     cy = mouseY;
  20.   }
  21.   if ( keyPressed ) {
  22.     kx = mouseX;
  23.     ky = mouseY;
  24.   }
  25.   stroke(255, 0, 0);
  26.   ellipse(cx, cy, 2*cr, 2*cr);
  27.   stroke(0, 0, 255);
  28.   ellipse(kx, ky, 2*kr, 2*kr);
  29.   PVector p = new PVector( kx-cx, ky-cy, 0);
  30.   PVector q = new PVector( kx-cx, ky-cy, 0);
  31.   p.limit(cr);
  32.   q.limit(dist(cx, cy, kx, ky)-kr);
  33.   stroke(0, 255, 255);
  34.   line(cx+p.x, cy+p.y, cx+q.x, cy+q.y );
  35.   pushMatrix();
  36.   translate( cx+q.x, cy+q.y );
  37.   stroke(255);
  38.   p.limit(20);
  39.   rotate(radians(30));
  40.   line(0, 0, -p.x, -p.y);
  41.   rotate(radians(-60));
  42.   line(0, 0, -p.x, -p.y);
  43.   popMatrix();
  44. }
AlexB
AlexB

Re: Re: Drawing an arrow from the edge of a circle to another circle's edge

3 months ago
Could you explain what's going on here, so I know which lines are doing what?

Thanks.
tfguy44
tfguy44

Re: Drawing an arrow from the edge of a circle to another circle's edge

3 months ago
1: Define the six variables used to track the two circles.
5-10: Give them initial values.
17-20: Move the first circle to the mouse's position if a mouse button is pressed.
21-24: Move the second circle to the mouse's position if a keyboard key is pressed.
25-26: Draw the first circle.
27-28: Draw the second circle.
29-30: Define two similar vectors that point from the center of the first circle to the center of the second circle.
31: Limit the length of the first of these vectors to the radius of the first circle, so that, if placed at the center of the first circle, it ends at a point on the first circle that is between the two centers of the circles.
31: Limit the length of the second vector to it's own length, minus the radius of the second circle, so that, if placed at the center of the first circle, it ends at a point on the second circle that is between the two centers of the circles.
33-34: placing both vectors at the center of the first circle, draw a line between their two end points.
Now we just need to draw the two lines for the arrow head.
36: Recenter the coordinate system around the point on the second circle.
The vector p points from the first circle to the second, so -p points from the second to the first.
38: Limit p to a fixed length of 20 pixels.
39: Rotate the coordinate system a bits so that p now only sort of points from one circle to the other.
40: Use p to draw one of the arrow head lines.
41: Rotate the coordinate system a bits in the other direction so that p now only sort of points from one circle to the other, but in the other direction.
42: Use p to draw the other one of the arrow head lines.
quarks
quarks

Re: Drawing an arrow from the edge of a circle to another circle's edge

3 months ago
The code draws the arrow you want and the code is fairly self-explantory. I leave it to you to drag the circle.

Copy code
    Copy code
    1. float x0, y0, r0;
    2. float x1, y1, r1;
    3. int fc0, fc1;
    4. int sc0, sc1;
    5. float th;
    6. int arrowCol;

    8. public void setup() {
    9.   size(300, 300);
    10.   ellipseMode(CENTER);
    11.   // Circle 0 posuition and size
    12.   x0 = 50;
    13.   y0 = 90;
    14.   r0 = 30;
    15.   // Circle 0 colors
    16.   fc0 = color(255, 128, 128);
    17.   sc0 = color(200, 64, 64);
    18.   // Circle 1 posuition and size
    19.   x1 = 220;
    20.   y1 = 190;
    21.   r1 = 50;
    22.   // Circle 0 colors
    23.   fc1 = color(128, 128, 255);
    24.   sc1 = color(64, 64, 200);
    25.   th = 2.0;
    26.   arrowCol = color(0, 64, 0);
    27. }

    29. public void draw() {
    30.   background(230);
    31.   drawCircle(x0, y0, r0, fc0, sc0);
    32.   drawCircle(x1, y1, r1, fc1, sc1);
    33.   drawArrow(x0, y0, r0, x1, y1, r1, th, arrowCol);
    34. }

    36. public void drawCircle(float cx, float cy, float rad, int fc, int sc) {
    37.   fill(fc);
    38.   stroke(sc);
    39.   strokeWeight(2);
    40.   ellipse(cx, cy, 2*rad, 2*rad);
    41. }

    43. public void drawArrow(float cx0, float cy0, float rad0, float cx1, float cy1, float rad1, float thickness, int ac) {
    44.   // These will be the points on the circles circumference
    45.   float px0, py0, px1, py1;
    46.   // the angle of the line joining centre of circle c0 to c1
    47.   float angle = atan2(cy1-cy0, cx1-cx0);
    48.   px0 = cx0 + rad0 * cos(angle);
    49.   py0 = cy0 + rad0 * sin(angle);
    50.   px1 = cx1 + rad1 * cos(angle + PI);
    51.   py1 = cy1 + rad1 * sin(angle + PI);
    52.   // Calculate the arrow length and head size
    53.   float arrowLength = sqrt((px1-px0)*(px1-px0) +(py1-py0)*(py1-py0));
    54.   float arrowSize = 2.5 * th;
    55.   // Setup arrow colours and thickness
    56.   strokeWeight(th);
    57.   stroke(ac);
    58.   fill(ac);
    59.   // Set the drawing matrix as if the arrow starts
    60.   // at the origin and is along the x-axis
    61.   pushMatrix();
    62.   translate(px0, py0);
    63.   rotate(angle);
    64.   // Draw the arrow shafte
    65.   line(0, 0, arrowLength, 0);
    66.   //  draw the arrowhead
    67.   beginShape(TRIANGLES);
    68.   vertex(arrowLength, 0); // point
    69.   vertex(arrowLength - arrowSize, -arrowSize);
    70.   vertex(arrowLength - arrowSize, arrowSize);
    71.   endShape();
    72.   popMatrix();
    73. }

    AlexB
    AlexB

    Re: Re: Drawing an arrow from the edge of a circle to another circle's edge

    3 months ago
    This code doesn't work.

    You're putting the x co-ordinate as both the x and y co-ordinate when running the drawCircle and drawArrow functions. Even when the y-coord is fixed it doesn't put the arrows in the correct place.

    When I add the option to move the co-ordinates of the circles, the arrow looks even weirder, I think it's just that angle that it seems to work properly.
    quarks
    quarks

    Re: Drawing an arrow from the edge of a circle to another circle's edge

    3 months ago
    Sorry about that - just demonstartes the problem of copy and pasting code and then not testing it properly.

    I have corrected and tested the code - the arrow is solved too.

    Top Reply

    Statistics

    • 6 Replies
    • 511  Views
    • 0 Followers

    Actions

    Related Posts