Hello,
I am coding a sketch to generate diagonals. The diagonals all start from the left side of the canvas from a random vertical position. Then the diagonal should be traced from a random angle. The range of possible angles is such that pure vertical lines are not possible. The diagonals should reach the border of the canvas, so they either reach its top, right or bottom sides. The question is : how do I calculate the coordinates of the end points?
Basically, there are four different situations:
- diagonal goes upwards and reaches the top side ;
- diagonal goes upwards and reaches the right side ;
- diagonal goes downwards and reaches the right side ;
- diagonal goes downwards and reaches the bottom side ;
A first separation is between the angles in the first quadrant (between 0 and 90 degrees) and the fourth quadrant (between 270 and 360 degrees).
Then I am trying to get the angles that mark the boundaries between the situations where the diagonals reach either, the top, right or bottom side (red color in the picture) using atan2(). However something is wrong because the values I get never match the quadrant they belong to. So currently I am not using these boundary angles. My current code seems to function in some cases but certainly not in all of them.
Note that a second situation where the diagonal starts from the top and goes downwards is a second possible case in the code.
Any help to sort this out would be highly appreciated!
// ATTENTION : P5JS USES CLOCKWISE ANGLES!
var lineCoords = [];
function setup() {
createCanvas(500, 500);
background(0);
stroke(255,0,0);
strokeWeight(2);
fill(255,0,0);
angleMode(DEGREES);
mousePressed();
}
function draw() {
background(0);
// draw line
stroke(255,0,0);
line(lineCoords[0], lineCoords[1], lineCoords[2], lineCoords[3]);
// green circle on start pos
stroke(0,255,0);
circle(lineCoords[0], lineCoords[1], 20);
// orange circle on end pos
stroke(255,127,0);
circle(lineCoords[2], lineCoords[3], 20);
}
function mousePressed() {
createDiagonal();
}
function createDiagonal() {
var startX, startY, endX, endY, angle, boundaryAngle;
var startAxis = floor(random(2));
// 1-STARTS FROM LEFT
if (startAxis == 0) {
startX = 0;
startY = random(3*height/4)+height/8;
angle = random(180)+270;
// depassement 360°
if (angle > 360) {
angle = angle - 360;
}
print("STARTS FROM LEFT - angle : "+angle);
// 1.1 - goes downwards
if (angle < 90) {
boundaryAngle = atan2((height-startY)/width);
print("angle-limite: "+boundaryAngle);
endY = tan(angle) * (width) + startY;
// 1.1.1 - reaches bottom
if (endY > height) {
print("case 1.1.1");
endY = height;
endX = tan(angle)*(height-startY);
// 1.1.2 - otherwise reaches right side
} else {
print("case 1.1.2");
endX = width;
}
}
// 1.2 - otherwise goes upwards
else {
// calcul angle-limite
boundaryAngle = atan2(startY, width);
print("boundary angle: "+boundaryAngle);
endY = startY - tan(angle) * width;
// 1.2.1 - reaches top
if (endY < 0) {
print("case 1.2.1");
endY = 0;
endX = tan(90+angle)*startY; //cotangent
// 1.2.2 - otherwise reaches right side
} else {
print("case 1.2.2");
endX = width;
}
}
}
//2 - STARTS FROM TOP
else {
startX = random(3*width/4)+width/8;
startY = 0;
angle = random(30, 150);
print("STARTS FROM TOP - angle: "+angle);
//2.1 - goes leftwards
if (angle > 90) {
print("goes leftwards");
boundaryAngle = atan2(startX, height)+180;
print("boundary angle: "+boundaryAngle);
endY = tan(angle) * startX;
print("case 2.1 / endY = "+endY);
// 2.1.1 - reaches bottom
if (endY >= height) {
print("case 2.1.1");
endY = height;
endX = sqrt(startX*startX + endY*endY);
// 2.1.2 otherwise reaches left side
} else {
print("case 2.1.2");
endX = 0;
}
}
// 2.2 - otherwise goes rightwards
else {
boundaryAngle = atan2(height, width-startX)+180;
print("boundary angle: "+boundaryAngle);
endY = tan(angle) * (width-startX);
// 2.2.1 - reaches bottom
if (endY > height) {
print("case 2.2.1");
endY = height;
endX = sqrt(startX*startX + endY*endY);
// 2.2.2 - otherwise reaches right side
} else {
print("case 2.2.2");
endX = width;
}
}
}
lineCoords = [startX, startY, endX, endY];
print("lineCoords: ", lineCoords);
}