Draw line at 90 degrees to other line

edited November 2015 in Questions about Code

Hello,

I am trying to work out how to draw a line with a length of 100 at 90 degrees to a line that originates at the centre of a circle.

I know: the angle of the black line from the centre, The x and y coordinates of the start point of the red line (small black circle) The intended length of the red line

I need: The X and Y coordinates of the end point of the red line so that it remains at 90 degrees to the black line and the length remains at 100.

The code for the sketch it:

PVector a = new PVector(0, 0);
PVector b = new PVector(0, 150);
PVector c = new PVector(150, 0);
float angle1, arcangle1;
float tangentAngle;
int smallRadius = 10;
float bigDiam = 400;

void setup() {
  size(500, 500);
  smooth();
  strokeWeight(2);
}

void draw() {
  background(255);
  translate(width/2, height/2);
  noFill();
  ellipse(0, 0, bigDiam, bigDiam);
  fill(255);
  if (dist(b.x, b.y, 0, 0)>((bigDiam/2) - smallRadius/2)) {
    fill(255, 0, 0);
  }

  line(a.x, a.y, b.x, b.y);
  ellipse(a.x, a.y, 20, 20);
  ellipse(b.x, b.y, smallRadius, smallRadius);
  strokeWeight(2);

  b.set(mouseX-width/2, mouseY-height/2, 0);


  angle1 = PVector.angleBetween(b, c);

if (c.y <= b.y) { 
    arcangle1 = angle1;
  } else { 
    arcangle1 = angle1 + 2*(PI-angle1);
  }

  float tDistance = dist(b.x, b.y, 0, 0);

  fill(0);
  ellipse(0, 0, 50, 50);
  fill(255);
  text(degrees(arcangle1), -20, 0);
  fill(0, 0, 0, 50);
  arc(0, 0, bigDiam-150, bigDiam-150, 0, arcangle1, PIE);
  println(degrees(arcangle1));
  stroke(255, 0, 100);
  line(0+(200/tDistance)*(b.x-0), 0+(200/tDistance)*(b.y-0), 0, -(bigDiam/2));
  stroke(0);
  ellipse(0+(200/tDistance)*(b.x-0), 0+(200/tDistance)*(b.y-0), 10, 10);
}

Thanks!

Answers

  • _vk_vk
    edited November 2015

    something like this

     float l = 200.0;
     float tx = b.x + cos(radians(180))* l;
     float ty = b.y + sin(radians(180))* l;
    
     line(b.x, b.y, tx, ty);
    

    Already in code below.

    PVector a = new PVector(0, 0);
    PVector b = new PVector(0, 200);
    PVector c = new PVector(150, 0);
    float angle1, arcangle1;
    float tangentAngle;
    int smallRadius = 10;
    float bigDiam = 400;
    
    void setup() {
      size(500, 500);
      smooth();
      strokeWeight(2);
    }
    
    void draw() {
      background(255);
      translate(width/2, height/2);
      noFill();
      ellipse(0, 0, bigDiam, bigDiam);
      fill(255);
      if (dist(b.x, b.y, 0, 0)>=(bigDiam/2) ) {
        fill(255, 0, 0);
      }
    
      line(a.x, a.y, b.x, b.y);
      ellipse(a.x, a.y, 20, 20);
      ellipse(b.x, b.y, smallRadius, smallRadius);
      strokeWeight(2);
    
    
     float l = 200.0;
     float tx = b.x + cos(radians(180))* l;
     float ty = b.y + sin(radians(180))* l;
    
     line(b.x, b.y, tx, ty);
    
    
    
      b.set(mouseX-width/2, mouseY-height/2, 0);
    
    
      angle1 = PVector.angleBetween(b, c);
    
    if (c.y <= b.y) { 
        arcangle1 = angle1;
      } else { 
        arcangle1 = angle1 + 2*(PI-angle1);
      }
    
      float tDistance = dist(b.x, b.y, 0, 0);
    
      fill(0);
      ellipse(0, 0, 50, 50);
      fill(255);
      text(degrees(arcangle1), -20, 0);
      fill(0, 0, 0, 50);
      arc(0, 0, bigDiam-150, bigDiam-150, 0, arcangle1, PIE);
      println(degrees(arcangle1));
      stroke(255, 0, 100);
      line(0+(200/tDistance)*(b.x-0), 0+(200/tDistance)*(b.y-0), 0, -(bigDiam/2));
      stroke(0);
      ellipse(0+(200/tDistance)*(b.x-0), 0+(200/tDistance)*(b.y-0), 10, 10);
    }
    
  • edited November 2015

    Almost, I'm trying to keep the line at a 90 degree angle relative to the line coming out of the centre of the circle, and at the point where the line intersects the circle. Essentially showing a tangent that is touching the circle and is always at 90 degrees to the radius line even when it is moved around. Something like:

  • Sorry, I fail to see where this is not it.

  • edited November 2015

    The result of the code is shown on the left of the image, and the intended result is shown on the right. At the moment the angle of the line is not changing as the angle of the line from the centre changes, nor is it touching the circle.

  • _vk_vk
    edited November 2015

    I see now. It's close :) You need to fix the initial point to the radius of bigger circle and calc the angel relative to the angle of the line. Idid not realize that it has interaction... When I get some time I'll try to cook something...

  • _vk_vk
    edited November 2015

    I'm sure you can do this with vector math, but I'm no good at it, and as I'm using processing.js now, and the implementation of PVectors is not complete (this is why the interaction was not working in sketchpad.cc - got rid of some code so it could run there...), and debug in browser sucks, here a version with trig:

    http://sketchpad.cc/DiSwp9nGPl

    PVector a = new PVector(0, 0);
    PVector b = new PVector(0, 0);
    PVector c = new PVector(150, 0);
    
    float angle1, arcangle1;
    float tangentAngle;
    int smallRadius = 10;
    float bigDiam = 400;
    
    void setup() {
      size(500, 500);
      smooth();
      strokeWeight(2);
    }
    
    void draw() {
      background(255);
      translate(width/2, height/2);
      noFill();
      ellipse(0, 0, bigDiam, bigDiam);
      fill(255);
      if (dist(b.x, b.y, 0, 0)>=(bigDiam/2) ) {
        fill(255, 0, 0);
      }
    
      line(a.x, a.y, b.x, b.y);
      ellipse(a.x, a.y, 20, 20);
      ellipse(b.x, b.y, smallRadius, smallRadius);
      strokeWeight(2);
    
     float l = 200.0;
     float ang = atan2(height/2 - mouseY, width/2 - mouseX);
    
     float px =  cos(PI + ang)* l;
     float py =  sin(PI + ang)* l;
    
     float tx = px + cos(ang + HALF_PI)* l;
     float ty = py + sin(ang + HALF_PI)* l;
    
     line(px, py, tx, ty);
     noFill();
     ellipse(px, py, 8, 8);
    
     PVector d = new PVector(b);
      b.set(mouseX-width/2, mouseY-height/2, 0);
    
    
      angle1 = PVector.angleBetween(b, c);
    
    
    }
    
  • edited November 2015 Answer ✓

    I did this earlier so I'll post it anyway. In future it would be useful to add comments to your code.

    PVector a = new PVector(0, 0);
    PVector b = new PVector(0, 150);
    PVector c = new PVector(150, 0);
    PVector t = new PVector();
    float angle1;
    float tangentAngle;
    float tangentLength = 100;
    int smallRadius = 10;
    float bigDiam = 400;
    
    void setup() {
      size(500, 500);
      smooth();
      strokeWeight(2);
    }
    
    void draw() {
      background(255);
      translate(width/2, height/2);
      noFill();
      ellipse(0, 0, bigDiam, bigDiam);
      fill(255);
      if (dist(b.x, b.y, 0, 0)>((bigDiam/2) - smallRadius/2)) {
        fill(255, 0, 0);
      }
    
      line(a.x, a.y, b.x, b.y);
      ellipse(a.x, a.y, 20, 20);
      ellipse(b.x, b.y, smallRadius, smallRadius);
      strokeWeight(2);
    
      b.set(mouseX-width/2, mouseY-height/2, 0);
    
      // Calculate angle with mouse position
      angle1 = PVector.angleBetween(b, c);
      if (c.y > b.y) { 
       angle1 = TWO_PI - angle1;
      }
      // Calculate tangent angle and position
      tangentAngle = (angle1 + HALF_PI) % TWO_PI;
      t.set(bigDiam * cos(angle1)/2, bigDiam * sin(angle1)/2);
      // Draw tangent position 
      fill(0,255,0);
      ellipse(t.x, t.y,10,10);
    
      float tDistance = dist(b.x, b.y, 0, 0);
    
      fill(0);
      ellipse(0, 0, 50, 50);
      fill(255);
      text(degrees(angle1), -20, 0);
      fill(0, 0, 0, 50);
      arc(0, 0, bigDiam-150, bigDiam-150, 0, angle1, PIE);
      println(degrees(angle1));
      stroke(255, 0, 100);
      line(t.x - tangentLength * cos(tangentAngle), t.y - tangentLength * sin(tangentAngle), t.x + tangentLength * cos(tangentAngle), t.y + tangentLength * sin(tangentAngle));
      //line(0+(200/tDistance)*(b.x-0), 0+(200/tDistance)*(b.y-0), 0, -(bigDiam/2));
      stroke(0);
      //ellipse(0+(200/tDistance)*(b.x-0), 0+(200/tDistance)*(b.y-0), 10, 10);
    }
    
Sign In or Register to comment.