Pregunta: ¿Cómo obtengo la ubicación de un punto después de la rotación?
Objetivo: Quiero crear un triángulo dados dos ángulos. El usuario puede manipular dos ángulos (a0,b0) y el programa determinará el tercer vértice en función de la intersección de los dos lados.
Explicación: Para encontrar el punto de intersección de los dos lados, necesito cuatro puntos: los extremos de l1 y l2 . Para realizar un seguimiento de los puntos, creé vertices=[] . Pero la matriz no actualiza la ubicación de los puntos después de que el usuario rota los lados y cambia (a0,b0) .
Por lo tanto, cuando recupero mis puntos, dos de ellos están en su posición inicial y no se han actualizado después de que el usuario rota los lados. He buscado este problema en línea, pero fue en vano. Cualquier ayuda es apreciada.
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].ax; // const y1 = sides[0].ay; // const x2 = sides[1].ax; // const y2 = sides[1].ay; // // 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.ax, this.ay, this.bx, this.by); } } class Vertex { constructor(x1, y1){ this.a = createVector(x1, y1); } show() { stroke(255,0,0); strokeWeight(20); point(this.ax, this.ay); } } <!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>