1. По умолчанию в Processing используется двухмерная система координат с нулем в верхнем левом углу окна приложения. Ось X направлена вправо, ось Y вниз.

2. Поля (сетки), с которой работает скетч задается командой size,

size(300,300);
fill(0,0,255);
rect(0,30,20,40);
rect(60,30,20,40);//смещение фигуры вправо на 60 пикселей.

size(300,200);
fill(0,0,255);
rect(0,30,20,40);

translate(60,0);//смещение системы координат вправо на 60 пикселей

fill(0,0,255,90);
rect(0,30,20,40);

   size(500,400);

   translate(40,20);//смещает систему координат относительно верхнего левого угла окна по оси ОХ на 40 пк, относительно оси ОУ на 20 пк.

   fill(255,0,0);
   rect(20,20,20,40);

   translate(60,70);//смещает систему координат относительно верхнего левого угла окна по оси ОХ на 60 пк, относительно оси ОУ на 70 пк.
 

   fill(0,255,0);
   rect(20,20,20,40);

В среде Processing можно воспользоваться некоторыми системными переменными, в частности:

 mouseX содержит x-координату мыши
 mouseY содержит y-координату мыши

Фактически, функция translate() вместо точки (0,0) записывает координаты курсора. В следующей строчке функция rect() рисует прямоугольник относительно новой нулевой точки, которой является координата мыши.

   void setup() {
     size(400, 200);
     frameRate(2);
  }
  void draw() {

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

     rect(0, 0, 30, 30);
  }

void setup () {  
size (300, 300);
 background (100,70.150);// закрасит фон окна приложения 
}

void draw () {
 frameRate(2);//частота смены кадров в секунду - 2 кадра

 fill(random(255),random(255),random(255));
  
translate(mouseX, mouseY); /* функция translate() вместо точки (0,0)   записывает координаты курсора. В следующей строчке функция rect()
  рисует прямоугольник относительно новой нулевой точки,   которой является координата мыши.*/
 
 rect(0,0,random(50),random(50));
}