0
115
ViewsLínea giratoria alrededor del punto en p5.js
Objetivo: estoy tratando de crear un triángulo dados dos ángulos (a0,b0) . Para hacerlo, estoy tratando de rotar un vector r0 por algún ángulo a0 alrededor de uno de los vértices de r0 . Aquí hay un diagrama que ilustra mi idea. 
Problema: Sin embargo, cuando giro la línea, parece girar alrededor del origen. He leído muchos , muchos artículos sobre cómo solucionar esto, pero ninguna de las soluciones sugeridas (es decir, traducir y luego rotar, push() , pop() ) no parece funcionar, tal vez porque estoy lidiando con un segmento de línea aquí. A continuación se muestra mi código.
Código MWE:
let angle = 0; function setup() { createCanvas(600, 400); angleMode(DEGREES); } function draw() { let v1 = createVector(width / 2 - 50, height / 2); let v2 = createVector(width / 2 + 50, height / 2); background(255); stroke(0); strokeWeight(4); let r0 = line(v1.x, v1.y, v2.x, v2.y); rotate(20); let r1 = line(v1.x, v1.y, v2.x, v2.y); strokeWeight(10); } <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>Cualquier ayuda es apreciada.
1 answers
Answer question0
rotate gira alrededor del origen del sistema de coordenadas. Para rotar alrededor de un punto de pivote, debe:
- mover el pivote al origen
- girar el objeto
- mover el pivote de nuevo a su lugar en la escena
translate(v1.x, v1.y); rotate(-1 * mouseX); translate(-v1.x, -v1.y); let angle = 0; function setup() { createCanvas(600, 300); angleMode(DEGREES); } function draw() { let v1 = createVector(width / 2 - 50, height / 2); let v2 = createVector(width / 2 + 50, height / 2); background(255); stroke(0); strokeWeight(4); push(); translate(v1.x, v1.y); rotate(-1 * mouseX); translate(-v1.x, -v1.y); let r0 = line(v1.x, v1.y, v2.x, v2.y); strokeWeight(10); let p1 = point(v1.x, v1.y); let p2 = point(v2.x, v2.y); pop(); } <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script> Para transformaciones de modelos individuales, debe push() la matriz actual antes de especificar las transformaciones y pop() la matriz después de dibujar los objetos. Entonces puedes dibujar diferentes objetos con diferentes transformaciones.