title: “Rotate” and “translate” in processing give me headaches
body: <p>As a small homework to get into Processing, I had to write some code to get the following:
  <img src="https://i.stack.imgur.com/uqeN2.png" alt="task" /></p>
  <p>Using</p>
  <pre><code>public void setup() {
     size(300,200);
     noFill();
     rect(100, 20, 40, 80);
     ellipseMode(CENTER);
     fill(#000000);
     ellipse(width/2, height/2, 5,5);
     
     noFill();
     translate(width/2, height/2);
     rotate(radians(65));
     rect(-20, -40, 40, 80);
  }
  public void draw() {
  }
  </code></pre>
  <p>this worked very good, so far. But I don’t like that I had to change the coordinates inside of the bottom <code>rect</code> instruction in order to get the rotation right. I know that by rotating you don’t rotate single elements but in fact the whole coordinate system.
  What I don’t know is which values to put into the <code>translate</code> instruction to have the output be like in the picture above while also still using the same coordinates within the <code>rect</code> command.</p>
  <p>The task is already done with the code I used, I just don’t like it too much. So this isn’t mere asking for somebody else doing my homework but pure interest.</p>
  <p>EDIT: More generalised attempt of a question: How do I know which values to pit into translate before rotate to get whatever result I want? Is there a way to calculate them? For sure, it’s not just trying out, is it?</p>