1 шаг
void setup() {
  size(400, 400); 
  background(255,255,255);
  fill(255);
}
void draw() {
  rect(width/2, height/2, width/4, height/4); 
  rect(0, 0, 100, 100);
}

2 шаг
void setup() {
  size(400, 400); 
  background(255,255,255);
 rectMode(CENTER);  
  fill(255);
}
void draw() {
  rect(width/2, height/2, width/4, height/4); 
  rect(0, 0, 100, 100);
}

3 шаг
void setup() {
  size(400, 400); 
  background(255,255,255);
 rectMode(CENTER);  
  fill(255);
}
void draw() {
  translate(mouseX, mouseY);
  rect(0, 0, 100, 100);
}

Шаг 4.
float r = 0;
void setup() {
  size(400, 400); 
  background(255,255,255);
 rectMode(CENTER);  
  fill(255);
}
void draw() {
  translate(mouseX, mouseY);
 rotate(r);
  rect(0, 0, 100, 100);
  r = r + 0.05;
}

Шаг 5
float r = 0;
void setup() {
  size(400, 400); 
  background(255,255,255);
 rectMode(CENTER);  
  fill(255);
}
void draw() {
rect(width/2, height/2, width/4, height/4); 
  translate(mouseX, mouseY);
 rotate(r);
  rect(0, 0, 100, 100);
  r = r + 0.05;
}
 

шаг 1

void setup() {size(200, 200);}
void draw() { 
rect(0, 0, 30, 30);
rect(0, 0, 15, 15);
}

шаг 2

void setup() {size(200, 200);}
void draw() {
rect(0, 0, 30, 30);

/*смещение начала координат  относительно верхнего левого угла окна
по оси ОХ на 35 пк.,  оси ОУ на 10 пк. */

translate(35, 10);
rect(0, 0, 15, 15);
}

шаг 3

void setup() {size(200, 200);}

void draw() {
 translate(mouseX, mouseY);//вместо точки (0,0) записывает координаты курсора

 rect(0, 0, 30, 30);

/*смещение началоа координат  относительно верхнего левого угла окна
относительно оси ОХ на 35 пк., относительно оси ОУ на 10 пк. */

translate(35, 10);
rect(0, 0, 15, 15);
}

Меньший прямоугольник рисуется относительно точки mouseX + 35 и mouseY + 10.

Состояния системы координат

Чтобы смещение одной группы фигуры не влияло на позицию других фигур, нарисованных следом за ними, примените функции  pushMatrix() и popMatrix():

•    при запуске функции pushMatrix() происходит сохранение текущей координаты системы, 
•    функция popMatrix() восстанавливает сохраненную координату.

шаг 4

void setup() {size(200, 200);}

void draw() {
  
pushMatrix();//происходит сохранение текущей координаты системы

translate(mouseX, mouseY);//вместо точки (0,0) записывает координаты курсора

rect(0, 0, 30, 30);

popMatrix();//восстанавливает сохраненную координату

/*смещение начала координат  относительно верхнего левого угла окна
по оси ОХ на 35 пк., оси ОУ на 10 пк. */

translate(35, 10);

rect(0, 0, 15, 15);
}

В этом примере меньший прямоугольник всегда будет находиться в левом верхнем углу так как действие функции translate(mouseX, mouseY) прекращается командой popMatrix().

ПРИМЕЧАНИЕ: Функции pushMatrix() и popMatrix() всегда используются вместе. Для каждой pushMatrix() вам нужно применить соответствующую popMatrix().