[SOLVED] Getting lines to rotate from their centre

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:

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

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?

1 Like

Example code:

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();
}
2 Likes

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:

2 Likes

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