# Rotating Vectors around different points

**URL:** <https://discourse.processing.org/t/rotating-vectors-around-different-points/19807>\
**Category:** Coding Questions\
**Created:** [April 15, 2020, 3:47pm UTC](https://discourse.processing.org/t/rotating-vectors-around-different-points/19807 "2020-04-15T15:47:51Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Kport1](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@Kport1](https://discourse.processing.org/u/Kport1)\
**Post date:** [April 15, 2020, 3:47pm UTC](https://discourse.processing.org/t/rotating-vectors-around-different-points/19807/1 "2020-04-15T15:47:51Z")

</div>

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!

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 15, 2020, 4:27pm UTC](https://discourse.processing.org/t/rotating-vectors-around-different-points/19807/2 "2020-04-15T16:27:03Z")

</div>

Hello,

> [@Kport1](#):
>
> the built in rotate fuction didnt work

I modified the example here:

> **[Arm / Examples](https://processing.org/examples/arm.html)**
>
> The angle of each segment is controlled with the mouseX and mouseY position. The transformations applied to the first segment are also applied to the second segment because they are inside the same pu…

And added PVectors alongside the existing transformations:

```auto
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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/a/a3598b3371cdee84e29368000fd96f914ac6c9b1.png)

Check out the resources avaiable:

> **Resources**
>
> I encourage you to review the resources available here:
> 
> - The Processing website has references, examples, tutorials, etc.  
> [https://processing.org/](https://processing.org/)
> - Those available with the Processing PDE (IDE).  
> An exploration of the tabs will reveal what is available; there are libraries and examples there.
> - The Coding Train  
> [https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1\_aw](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw)  
> [https://thecodingtrain.com/](https://thecodingtrain.com/)
> - Happy Coding  
> [Processing Tutorials - Happy Coding](https://happycoding.io/tutorials/processing/)
> - The Processing Foundation  
> [https://processingfoundation.org/](https://processingfoundation.org/)  
> Check out the tabs.  
> In the education tab, there is a reference to the Coding Train.

`:)`

---

<div class="post-metadata">

**Author:** ![Kport1](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@Kport1](https://discourse.processing.org/u/Kport1)\
**Post date:** [April 15, 2020, 5:24pm UTC](https://discourse.processing.org/t/rotating-vectors-around-different-points/19807/3 "2020-04-15T17:24:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [April 15, 2020, 5:35pm UTC](https://discourse.processing.org/t/rotating-vectors-around-different-points/19807/4 "2020-04-15T17:35:50Z")

</div>

> [@Kport1](#):
>
> but sadly im still to ~~dumb~~ to figure out how i could apply this to my project

Inexperienced or [noob](https://en.wikipedia.org/wiki/Newbie) is a better word.  
You will gain experience with time and practice.

`:) `

---

<div class="post-metadata">

**Author:** ![Kport1](https://avatars.discourse-cdn.com/v4/letter/k/278dde/32.png) [@Kport1](https://discourse.processing.org/u/Kport1)\
**Post date:** [April 15, 2020, 6:22pm UTC](https://discourse.processing.org/t/rotating-vectors-around-different-points/19807/6 "2020-04-15T18:22:03Z")

</div>

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