Aula 2 - Código comentado e alterado

Meu exemplo consiste em dois quadrados que mudam de tamanho conforme seu afastamento. O afastamento é o mesmo pros dois, mas o tamanho é inverso. Por exemplo, quando o retângulo 1 está na extrema esquerda tem seu tamanho mínimo e o 2 está na extrema direita com o tamanho máximo. A medida que chegam ao centro, o tamanho e a distância são o mesmo, logo ficam "iguais" em tamanho e sobrepostos.

void setup()
{
  size(640, 360); //tamanho da janela
  noStroke(); //cor da linha
  rectMode(CENTER); /*desenha um retângulo "central", ou seja, os dois primeiros parâmetros de rect() são o ponto central. O terceiro e quarto são parâmetros de largura e altura. E os demais podem ser acrescentados para configurar arredondamento nas bordas*/
}

void draw()
{  
  background(170,124,211); //cor do backgroung; alterei o valor de 51 (tom de cinza) para lilás
  fill(254,206,251,85); //preenchimento da forma inversa
  rect(mouseX, height/2, mouseY/2+10, mouseY/2+10); /*se alterado para "line", mostra apenas um retângulo, ao invés de dois, com no comando original "rect". */
  fill(254,206,251,85); //preenchimento do segundo retângulo
  int inverseX = width-mouseX;
  int inverseY = height-mouseY; /*configuram o segundo retângulo para ser o "inverso" do primeiro em tamanho (quando o 1 está em tamanho mínimo, o 2 está em tamanho máximo*/
  rect(inverseX, height/2, (inverseY/2)+10, (inverseY/2)+10);
}