# \[SOLVED\] Getting lines to rotate from their centre

**URL:** <https://discourse.processing.org/t/solved-getting-lines-to-rotate-from-their-centre/4063>\
**Category:** Coding Questions\
**Created:** [October 2, 2018, 11:30pm UTC](https://discourse.processing.org/t/solved-getting-lines-to-rotate-from-their-centre/4063 "2018-10-02T23:30:15Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![ianmarquette](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ianmarquette/32/1811_2.png) [@ianmarquette](https://discourse.processing.org/u/ianmarquette)\
**Post date:** [October 2, 2018, 11:30pm UTC](https://discourse.processing.org/t/solved-getting-lines-to-rotate-from-their-centre/4063/1 "2018-10-02T23:30:15Z")

</div>

I’m trying to create some works by Vera Molnar in Processing to get a better understanding of how to use it. This is the piece I am trying to recreate:

 ![vera-molnar](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/e/ecaaea5f7888813c220ade11ce96e899f3a003c8.jpeg)

The part I am struggling with is getting the lines to all rotate from their centre. This is the code I have so far:

```auto
void setup() {
  size(2000, 1066);
  background(255, 255, 255);
}

void draw() {
  for (int i = 20, j = 1400; i < 1400 && j > 0; i+=20, j-=20) {
    if (i<700){
      strokeWeight(i/50);
      strokeCap(ROUND);
      pushMatrix();   
      translate(i,5);
      rotate(radians(random(60)));
      line(0, 0, 0, 40);
      popMatrix();       
    } else {
      //unrelated code
        }
    }
  noLoop();
}

```

But it rotates each line from it’s top point rather than it’s centre point. Can anyone help me?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 3, 2018, 12:37am UTC](https://discourse.processing.org/t/solved-getting-lines-to-rotate-from-their-centre/4063/2 "2018-10-03T00:37:17Z")

</div>

Example code:

```auto
void setup() {
  size(600,400);
  strokeCap(ROUND);
}

void draw() {
  background(255);
  for ( int i = 0; i < 10; i++) {
    for ( int j = 0; j < 10; j++) {
      pushMatrix();
      translate(20+20*i, 20+20*j);      
      strokeWeight(i);
      rotate(radians(random(60)));
      line(0, 0, 40, 0);
      popMatrix();
    }
  }
  noLoop();
}

```

---

<div class="post-metadata">

**Author:** ![Sarah](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sarah/32/1675_2.png) [@Sarah](https://discourse.processing.org/u/Sarah)\
**Post date:** [October 3, 2018, 7:39am UTC](https://discourse.processing.org/t/solved-getting-lines-to-rotate-from-their-centre/4063/3 "2018-10-03T07:39:26Z")

</div>

All the `rotate();` function knows is how much to rotate it by. rotate always rotates the shapes from an origin of (0, 0), so when you draw a line with one point at (0, 0), and one with (0, 40) the point at (0, 0) doesn’t change, but the (0, 40) rotates around the origin. Then the line would get translates to (i, 5).

Luckily there is an easy solution for this. You can draw the line to the center of the line is at (0, 0), so the lines points will be `(0, -20, 0, 20)`. Here is an example of that:

 ![Untitled%20drawing%20(10)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d1b55f5adb1591f3a2f383dd0f566118eb108f39.png)

---

<div class="post-metadata">

**Author:** ![ianmarquette](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/ianmarquette/32/1811_2.png) [@ianmarquette](https://discourse.processing.org/u/ianmarquette)\
**Post date:** [October 3, 2018, 11:49pm UTC](https://discourse.processing.org/t/solved-getting-lines-to-rotate-from-their-centre/4063/4 "2018-10-03T23:49:43Z")

</div>

Thank you @Sarah and @TfGuy44 ! Between your code and explanation I got the result I wanted.