Page Comparison

...

Processing uses a Cartesian coordinate system. It is important to note that the zero point is in the upper left corner in processing. The X axis is from left to right and the Y axis is from top to bottom. While this might seem odd, it comes from the tradition that bitmaps were always read in that order. In computer graphics the cartesian coordinate system is almost always used. This provides some convenience, so you can also move, scale, or even rotate coordinate systems. I can

In processing we can simplify the drawing of objects in many cases by assigning them their own local coordinate system. Imagine an animation of a car . The wheels should rotate naturallymoving across the screen. If you draw this per in processing you must always could add the current position a value to the the x and y coordinates for every detail of the body car to the wheels and then turn them. If you do this with the change of the coordinate system, this is a lot simpler. Here you just have to move the coordinate system, draw the car body and then move the coordinate system again for the respective wheelsmove it across the screen. When it comes to the wheels, it would get complicated as we would not only change the position relative to the car, but rotate every detail in relation to the wheel axis! But if we modify the coordinate systems this becomes a lot simpler. Such coordinate system changes are called transformations. There are three basic types:

...

These two commands work according to the stack principle. This is an very old form of working with computer memory. Just imagine a stack of graph paper: when you call pushMatrix, the stack is increased by one sheet. On this page we would describe the current data of our coordinate system. Now you can rotate, scale and transform as you want. If you now want to bring the coordinate system back to the position of the last pushMatrix call, you must call popMatrix. Now this sheet is removed from the stack. 

With an example program, this should be easer to understoodunderstand:

void setup()
{
  size(400,400);      // def. window size
  strokeWeight(15);    // line thickness 
}
 
void draw()
{
  background(255);    // def. background colour
  float radius = dist(mouseX,mouseY,width/2,height/2);  // calculate the distance from the mouse curser to the center of the screen 
  radius = map(radius,0,width,1,4);                     // modify the radius to keep it within a specific range. 
 
  pushMatrix();
    translate(200,200);
    rotate(calcAngle());
    scale(radius);
    smiley();          // function call
  popMatrix();
 
  pushMatrix();
    translate(30,30);
    scale(.2);
    smiley();          // function call
  popMatrix();
}
 
// funktion
void smiley()
{
  noFill();
  ellipse(0,0,180,180);  // head
 
  fill(0);
  ellipse(0 - 30,0 - 30,20,20);  // left eye
  ellipse(0 + 30,0 - 30,20,20);  // right eye
 
  noFill();
  arc(0,0,100,100,radians(20),radians(180-20));  // mouth
}
 
// calculate the angle from the screen middle to the mouse cursor
// the angle is in radians 
float calcAngle()
{
  return -atan2(mouseX - (width / 2),mouseY - (height / 2));
}

...