旋转点的位置
Location of Rotated Point
问题：旋转后如何获取点的位置？
目标： 我想创建一个给定两个角的三角形。用户可以操纵两个角度(a0,b0)，程序将根据两条边的交点确定第三个顶点。
解释：要找到两条边的交点，我需要四个点：l1和l2的端点。为了跟踪这些点，我创建了 vertices=[]。但是在用户旋转边并更改 (a0,b0).
后，数组不会更新点的位置
因此，当我检索我的点时，其中两个点处于它们的初始位置，并且在用户旋转边后没有更新。我在网上搜索过这个问题，但无济于事。感谢任何帮助。
MWE:
let angle = 0;
let sides = [];
let vertices = [];
function setup(){
createCanvas(600, 400);
angleMode(DEGREES);
angleOne = createSlider(0, 180, 100);
angleOne.position(10,10);
angleOne.style('width', '80px');
angleTwo = createSlider(0, 180, 100);
angleTwo.position(10,30);
angleTwo.style('width', '80px');
}
function draw(){
background(255);
let angOne = angleOne.value();
let angTwo = angleTwo.value();
strokeWeight(0);
textSize(15);
text(angOne, 90, 17);
text(angTwo, 90, 37);
let v1 = createVector(width/2 - 50, height/2);
let v2 = createVector(width/2 + 50, height/2);
sides[0] = new Side(v1.x, v1.y, v2.x, v2.y);
sides[0].show();
vertices[0] = new Vertex(v1.x, v1.y);
vertices[0].show();
vertices[1] = new Vertex(v2.x, v2.y);
vertices[1].show();
/** ROTATE TIME **/
push();
translate(v1.x, v1.y);
rotate(-1*angOne);
translate(-v1.x, -v1.y);
sides[1] = new Side(v1.x, v1.y, v2.x, v2.y);
sides[1].show();
vertices[2] = new Vertex(v2.x, v2.y);
vertices[2].show();
pop();
/** ROTATE TIME **/
push();
translate(v2.x, v2.y);
rotate(angTwo);
translate(-v2.x, -v2.y);
sides[2] = new Side(v1.x, v1.y, v2.x, v2.y);
sides[2].show();
vertices[3] = new Vertex(v1.x, v1.y);
vertices[3].show();
pop();
// const x1 = sides[0].a.x;
// const y1 = sides[0].a.y;
// const x2 = sides[1].a.x;
// const y2 = sides[1].a.y;
//
// const x3 = p3.x;
// const y3 = p3.y;
// const x4 = p4.x;
// const y4 = p4.y;
}
class Side {
constructor(x1, y1, x2, y2){
this.a = createVector(x1, y1);
this.b = createVector(x2, y2);
}
show() {
stroke(0);
strokeWeight(4);
line(this.a.x, this.a.y, this.b.x, this.b.y);
}
}
class Vertex {
constructor(x1, y1){
this.a = createVector(x1, y1);
}
show() {
stroke(255,0,0);
strokeWeight(20);
point(this.a.x, this.a.y);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
<title>Billiards #2</title>
</head>
<body>
</body>
</html>
一句话：三角学。不使用 rotate() 函数来旋转绘图参照系，而是使用 trig 来计算各个顶点位置。这是带有注释的代码，希望能解释这是如何完成的：
let angle = 0;
let sides = [];
let vertices = [];
const len = 100;
function setup() {
createCanvas(600, 400);
angleMode(DEGREES);
angleOne = createSlider(0, 180, 45);
angleOne.position(10, 10);
angleOne.style('width', '80px');
angleTwo = createSlider(0, 180, 100);
angleTwo.position(10, 30);
angleTwo.style('width', '80px');
// Initial vertice & side setup (these don't change)
let v1 = createVector(width / 2 - len / 2, height / 2);
let v2 = createVector(width / 2 + len / 2, height / 2);
sides[0] = new Side(v1.x, v1.y, v2.x, v2.y);
vertices[0] = new Vertex(v1.x, v1.y);
vertices[1] = new Vertex(v2.x, v2.y);
}
function draw() {
background(255);
let angOne = angleOne.value();
let angTwo = angleTwo.value();
strokeWeight(0);
textSize(15);
text(angOne, 90, 17);
text(angTwo, 90, 37);
// Calculate vertices 2 and 3 based on angles
// We can use trigonometry to find the x and y component of a vector of known length based on the angle from some refference.
// In this case our reference will be in the positive X direction.
// The sine of an angle is, given a right triangle, equal to the ratio of the opposite side from that angle and the hypotenuse of the triangle, so that corresponds to our Y component.
// The cosine is the ratio of the adjacent side over the hypotenuse, so that represents our X component
let v2Offset = createVector(
len * cos(-angOne),
len * sin(-angOne)
);
// Our reference vector for this is in the negative X direction and we are rotating clockwise instead of counter clockwise, hence the different signs
let v3Offset = createVector(-len * cos(angTwo), -len * sin(angTwo));
// Add our offsets to the origins in order to calculate the actual positions for these vertices.
vertices[2] = new Vertex(
vertices[0].a.x + v2Offset.x,
vertices[0].a.y + v2Offset.y
);
vertices[3] = new Vertex(
vertices[1].a.x + v3Offset.x,
vertices[1].a.y + v3Offset.y
);
// Update the sides
sides[1] = new Side(
vertices[0].a.x,
vertices[0].a.y,
vertices[2].a.x,
vertices[2].a.y
);
sides[3] = new Side(
vertices[1].a.x,
vertices[1].a.y,
vertices[3].a.x,
vertices[3].a.y
);
// Now that are vertices are all computed properly finding the intersection of these two lines is a simple matter:
// Calculate the slopes
const m1 = (vertices[2].a.y - vertices[0].a.y) / (vertices[2].a.x - vertices[0].a.x);
const m2 = (vertices[3].a.y - vertices[1].a.y) / (vertices[3].a.x - vertices[1].a.x);
// Calculate the y-offset relative to vertices[0]
const b2 = (vertices[1].a.x - vertices[0].a.x) * -m2;
// y1 = m1 * x
// y2 = m2 * x + b2
// Find the x where y1 = y2
// m1 * x = m2 * x + b2
// m1 * x - m2 * x = b2
// x * (m1 - m2) = b2
// x = b2 / (m1 - m2)
const xInt = b2 / (m1 - m2)
const yInt = xInt * m1;
// Note xInt and yInt are relative to vertices[0]
// draw all the things
sides.forEach(s => s.show());
vertices.forEach(v => v.show());
stroke(0, 255, 0);
strokeWeight(20);
point(vertices[0].a.x + xInt, vertices[0].a.y + yInt);
}
class Side {
constructor(x1, y1, x2, y2) {
this.a = createVector(x1, y1);
this.b = createVector(x2, y2);
}
show() {
stroke(0);
strokeWeight(4);
line(this.a.x, this.a.y, this.b.x, this.b.y);
}
}
class Vertex {
constructor(x1, y1) {
this.a = createVector(x1, y1);
}
show() {
stroke(255, 0, 0);
strokeWeight(20);
point(this.a.x, this.a.y);
}
}
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
问题：旋转后如何获取点的位置？
目标： 我想创建一个给定两个角的三角形。用户可以操纵两个角度(a0,b0)，程序将根据两条边的交点确定第三个顶点。
解释：要找到两条边的交点，我需要四个点：l1和l2的端点。为了跟踪这些点，我创建了 vertices=[]。但是在用户旋转边并更改 (a0,b0).
因此，当我检索我的点时，其中两个点处于它们的初始位置，并且在用户旋转边后没有更新。我在网上搜索过这个问题，但无济于事。感谢任何帮助。
MWE:
let angle = 0;
let sides = [];
let vertices = [];
function setup(){
createCanvas(600, 400);
angleMode(DEGREES);
angleOne = createSlider(0, 180, 100);
angleOne.position(10,10);
angleOne.style('width', '80px');
angleTwo = createSlider(0, 180, 100);
angleTwo.position(10,30);
angleTwo.style('width', '80px');
}
function draw(){
background(255);
let angOne = angleOne.value();
let angTwo = angleTwo.value();
strokeWeight(0);
textSize(15);
text(angOne, 90, 17);
text(angTwo, 90, 37);
let v1 = createVector(width/2 - 50, height/2);
let v2 = createVector(width/2 + 50, height/2);
sides[0] = new Side(v1.x, v1.y, v2.x, v2.y);
sides[0].show();
vertices[0] = new Vertex(v1.x, v1.y);
vertices[0].show();
vertices[1] = new Vertex(v2.x, v2.y);
vertices[1].show();
/** ROTATE TIME **/
push();
translate(v1.x, v1.y);
rotate(-1*angOne);
translate(-v1.x, -v1.y);
sides[1] = new Side(v1.x, v1.y, v2.x, v2.y);
sides[1].show();
vertices[2] = new Vertex(v2.x, v2.y);
vertices[2].show();
pop();
/** ROTATE TIME **/
push();
translate(v2.x, v2.y);
rotate(angTwo);
translate(-v2.x, -v2.y);
sides[2] = new Side(v1.x, v1.y, v2.x, v2.y);
sides[2].show();
vertices[3] = new Vertex(v1.x, v1.y);
vertices[3].show();
pop();
// const x1 = sides[0].a.x;
// const y1 = sides[0].a.y;
// const x2 = sides[1].a.x;
// const y2 = sides[1].a.y;
//
// const x3 = p3.x;
// const y3 = p3.y;
// const x4 = p4.x;
// const y4 = p4.y;
}
class Side {
constructor(x1, y1, x2, y2){
this.a = createVector(x1, y1);
this.b = createVector(x2, y2);
}
show() {
stroke(0);
strokeWeight(4);
line(this.a.x, this.a.y, this.b.x, this.b.y);
}
}
class Vertex {
constructor(x1, y1){
this.a = createVector(x1, y1);
}
show() {
stroke(255,0,0);
strokeWeight(20);
point(this.a.x, this.a.y);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
<title>Billiards #2</title>
</head>
<body>
</body>
</html>
一句话：三角学。不使用 rotate() 函数来旋转绘图参照系，而是使用 trig 来计算各个顶点位置。这是带有注释的代码，希望能解释这是如何完成的：
let angle = 0;
let sides = [];
let vertices = [];
const len = 100;
function setup() {
createCanvas(600, 400);
angleMode(DEGREES);
angleOne = createSlider(0, 180, 45);
angleOne.position(10, 10);
angleOne.style('width', '80px');
angleTwo = createSlider(0, 180, 100);
angleTwo.position(10, 30);
angleTwo.style('width', '80px');
// Initial vertice & side setup (these don't change)
let v1 = createVector(width / 2 - len / 2, height / 2);
let v2 = createVector(width / 2 + len / 2, height / 2);
sides[0] = new Side(v1.x, v1.y, v2.x, v2.y);
vertices[0] = new Vertex(v1.x, v1.y);
vertices[1] = new Vertex(v2.x, v2.y);
}
function draw() {
background(255);
let angOne = angleOne.value();
let angTwo = angleTwo.value();
strokeWeight(0);
textSize(15);
text(angOne, 90, 17);
text(angTwo, 90, 37);
// Calculate vertices 2 and 3 based on angles
// We can use trigonometry to find the x and y component of a vector of known length based on the angle from some refference.
// In this case our reference will be in the positive X direction.
// The sine of an angle is, given a right triangle, equal to the ratio of the opposite side from that angle and the hypotenuse of the triangle, so that corresponds to our Y component.
// The cosine is the ratio of the adjacent side over the hypotenuse, so that represents our X component
let v2Offset = createVector(
len * cos(-angOne),
len * sin(-angOne)
);
// Our reference vector for this is in the negative X direction and we are rotating clockwise instead of counter clockwise, hence the different signs
let v3Offset = createVector(-len * cos(angTwo), -len * sin(angTwo));
// Add our offsets to the origins in order to calculate the actual positions for these vertices.
vertices[2] = new Vertex(
vertices[0].a.x + v2Offset.x,
vertices[0].a.y + v2Offset.y
);
vertices[3] = new Vertex(
vertices[1].a.x + v3Offset.x,
vertices[1].a.y + v3Offset.y
);
// Update the sides
sides[1] = new Side(
vertices[0].a.x,
vertices[0].a.y,
vertices[2].a.x,
vertices[2].a.y
);
sides[3] = new Side(
vertices[1].a.x,
vertices[1].a.y,
vertices[3].a.x,
vertices[3].a.y
);
// Now that are vertices are all computed properly finding the intersection of these two lines is a simple matter:
// Calculate the slopes
const m1 = (vertices[2].a.y - vertices[0].a.y) / (vertices[2].a.x - vertices[0].a.x);
const m2 = (vertices[3].a.y - vertices[1].a.y) / (vertices[3].a.x - vertices[1].a.x);
// Calculate the y-offset relative to vertices[0]
const b2 = (vertices[1].a.x - vertices[0].a.x) * -m2;
// y1 = m1 * x
// y2 = m2 * x + b2
// Find the x where y1 = y2
// m1 * x = m2 * x + b2
// m1 * x - m2 * x = b2
// x * (m1 - m2) = b2
// x = b2 / (m1 - m2)
const xInt = b2 / (m1 - m2)
const yInt = xInt * m1;
// Note xInt and yInt are relative to vertices[0]
// draw all the things
sides.forEach(s => s.show());
vertices.forEach(v => v.show());
stroke(0, 255, 0);
strokeWeight(20);
point(vertices[0].a.x + xInt, vertices[0].a.y + yInt);
}
class Side {
constructor(x1, y1, x2, y2) {
this.a = createVector(x1, y1);
this.b = createVector(x2, y2);
}
show() {
stroke(0);
strokeWeight(4);
line(this.a.x, this.a.y, this.b.x, this.b.y);
}
}
class Vertex {
constructor(x1, y1) {
this.a = createVector(x1, y1);
}
show() {
stroke(255, 0, 0);
strokeWeight(20);
point(this.a.x, this.a.y);
}
}
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>