Rotating Vectors around different points

Processing Coding Questions
1

Im trying to make a visualizaztion I saw in one of 3blue1brown videos
The code below is supposed to rotate two vectors (x,y and mpos.x, mpos.y) around another vector (dx,dy). I wrote my own function, because the built in rotate fuction didnt work. This doesnt either.
Thanks for your help!

PVector iHatHalfPi = new PVector(0, 1);
PVector jHatHalfPi = new PVector(-1, 0);

void setup() {
  size(800, 800);
}

void draw() {
  translate(width / 2, height / 2);
  background(0);
  PVector mpos = new PVector(mouseX - width / 2, mouseY - height / 2);

  noFill();
  stroke(255);
  strokeWeight(4);

  point(mpos.x, mpos.y);


  beginShape();
  for (int a = 0; a < 360; a += 10) {
    float x = cos(radians(a)) * 350;
    float y = sin(radians(a)) * 350;
    vertex(x, y);
  }
  endShape(CLOSE);

  for (int a = 0; a < 360; a += 10) {
    float x = cos(radians(a)) * 350;
    float y = sin(radians(a)) * 350;

    float dx = lerp(mpos.x, x, 0.5);
    float dy = lerp(mpos.y, y, 0.5);
    
    stroke(255);
    strokeWeight(2);
    line(mpos.x, mpos.y, x, y);

    stroke(0, 255, 0, 80);
    point(dx, dy);
    PVector rotated1 = Rotate(new PVector(x, y), new PVector(dx, dy), iHatHalfPi, jHatHalfPi);
    PVector rotated2 = Rotate(new PVector(mpos.x, mpos.y), new PVector(dx, dy), iHatHalfPi, jHatHalfPi);
    line(rotated1.x, rotated1.y, rotated2.x, rotated2.y);
  }
}



PVector Rotate(PVector p, PVector c, PVector t, PVector t2) {
  PVector pt = new PVector(p.x - c.x, p.y - c.y);

  PVector point = new PVector(pt.x * t.x + pt.y * t2.x, pt.x * t.y + pt.y * t2.y);
  return point;
}
2

Hello,

I modified the example here:

And added PVectors alongside the existing transformations:

float x, y;
float angle1 = 0.0;
float angle2 = 0.0;
float segLength = 100;

PVector v0 = new PVector (0, 0);
PVector v1 = new PVector (0, 100);
PVector v2 = new PVector (0, 100);

void setup()
  {
  size(640, 360);
  //strokeWeight(30);
  //stroke(255, 160);
  
  x = width * 0.3;
  y = height * 0.5;
  }

void draw() 
  {
  background(0);
  
  angle1 = (mouseX/float(width) - 0.5) * -PI;
  angle2 = (mouseY/float(height) - 0.5) * PI;
 
  strokeWeight(30);
  stroke(255, 160);
 
 pushMatrix();
  segment(x, y, angle1); 
  segment(segLength, 0, angle2);
 popMatrix();
  
  //Added by glv
  v0.set(2*width/3, height/2);
  v1.set(50, 0);
  v2.set(50, 0);

  v1.rotate(angle1);
  v2.rotate(angle1 + angle2);
  
  v1.add(v0);
  v2.add(v1);
  
  stroke(255, 255, 0, 160);
  line(v0.x, v0.y, v1.x, v1.y);
  line (v1.x, v1.y, v2.x, v2.y);
  }

void segment(float x, float y, float a) 
  {
  translate(x, y);
  rotate(a);
  line(0, 0, segLength, 0);
  }

image

Check out the resources avaiable:

Resources

I encourage you to review the resources available here:

:)

3

Thanks a lot, but sadly im still to dumb to figure out how i could apply this to my project

4

Inexperienced or noob is a better word.
You will gain experience with time and practice.

:)

6

I would really apreciate if you corrected my code, because i really dont know what i did wrong
thx :slight_smile: