Rotating Line around Point in p5.js

Question

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);
  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>

Any help is appreciated.

Answer 1

rotate rotates around the origin of the coordinate system. To rotate around a pivot point, you must:

• move the pivot to the origin
• rotate the object
• move the pivot back to its place in the scene

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>

For individual model transformations, you must push() the current matrix before specifying the transformations and pop() the matrix after drawing the objects. So you can draw different objects with different transformations.