Using variables to resize a shape that has been rotated.

The shape is being rotated from the center of rotation. Think of rotating like a circle. The shape is on the edge of that circle, thus the shape will end up going around the circle (rotate). But you want the center of the shape to be the center of that imaginary circle. You can accomplish this by using the translate(); function.

translate(x, y);

The translate function translate the shape so that if you put the shapes x and y coordinates at 0 then the corner of the shape will be at the translate x and y coordinates. For example, if I create a rect at (0, 0) and the translate at (200, 200) then the top left corner of the rect will be at (200, 200).

translate(200, 200);
rotate(45);
rect(0, 0, 100, 100);

// rect is really at (200, 200) not (0, 0)

Now when you rotate the rect will still go around in a circle but the center is at the translation's x and y coordinates (200, 200). To fix this we need to move the rect to the left and up some. However, we do not want to change the translate's x and y as that would do nothing to fix the problem. Instead we need to subtract half of the width from the rect's x and half of the height from the rect's y.

translate(200, 200);
rotate(45);
rect(-50, -50, 100, 100);

// because the width and height are both 100 then all we need to do is subtract 50 from the x and y
// it was 0, 0 so if we subtract 50 then it becomes -50
//there is no need to write the 0

Now the center of the rect is at the center of the rotation.

Back to your problem. You only need to translate the one shape for the eye not both. If you were to add the translate and rotate, no matter where you put it it will still modify both shapes. To fix this PJS has these functions:

pushMatrix();
popMatrix();

Basically, these two create a code block. In other words everything between them will be modified by the translate and rotate that you put. Here is an example

rect(200, 200, 100, 100);// this will NOT be rotated

pushMatrix();

translate(200, 200);
rotate(45);

rect(-50, -50, 100, 100);// this WILL be rotated

popMatrix();

rect(200, 200, 100, 100);// this will NOT be rotated

Hopefully that made sense to you. If it did not then let me know, and I will give you the correct answer and see if I can explain it a bit easier.

Rect Example: https://www.khanacademy.org/computer-programming/new-program/6161419382341632