旋转点的位置

Question

旋转点的位置

3

问题：如何在旋转后获取点的位置？

目标：我想创建一个三角形，并给出两个角度。用户可以操纵两个角度 (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>

- rb3652

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paul Wheeler · Accepted Answer

简而言之：三角函数。不要使用rotate()函数来旋转绘图参考框架，使用三角函数计算各个顶点位置。以下是带有注释的代码，希望能够解释如何实现这一点：

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>