Draw line at 90 degrees to other line

rumlac

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!

_vk

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

rumlac

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:

_vk

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

rumlac

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

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

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


}

quark

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