#### Howdy, Stranger!

We are about to switch to a new forum software. Until then we have removed the registration on this forum.

# Draw line at 90 degrees to other line

edited November 2015

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

Tagged:

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

``````PVector a = new PVector(0, 0);
PVector b = new PVector(0, 200);
PVector c = new PVector(150, 0);
float angle1, arcangle1;
float tangentAngle;
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);
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.

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

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

``````PVector a = new PVector(0, 0);
PVector b = new PVector(0, 0);
PVector c = new PVector(150, 0);

float angle1, arcangle1;
float tangentAngle;
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);
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 ✓

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