Goal: I’m trying to create a triangle given two angles (a0,b0). To do so, I’m trying to rotate a vector r0 by some angle a0 around one of the vertices of r0. Here’s a diagram illustrating my idea.
Problem: However, when I rotate the line, it seems to rotate around the origin. I’ve read many, many articles on how to fix this, but none of the suggested solutions (i.e., translate then rotate, push(), pop()) don’t seem to work, perhaps because I’m dealing with a line segment here. Below is my code.
MWE Code:
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);
rotate(-1 * mouseX);
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);
}<!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/[email protected]/lib/p5.min.js"></script>
<title>Billiards #2</title>
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>Any help is appreciated.