Exemplo do Processing

Na nossa segunda aula, foi pedido que fosse pegue um dos exemplos presentes no site https://processing.org/examples , analisássemos algum que nos chamasse a atenção e o modificasse para ter algum tipo de efeito diferenciado.

Dentre os exemplos, um dos que mais me chamaram a atenção foi este simples código em que eram criados algumas elipses que seguiam a seta do mouse.

Segue o código desse exemplo abaixo: 

float x = 100;
float y = 100;
float angle1 = 0.0;
float segLength = 50;

void setup() {
  size(640, 360);
  strokeWeight(20.0);
  stroke(255, 100);
}

void draw() {
  background(0);
  
  float dx = mouseX - x;
  float dy = mouseY - y;
  angle1 = atan2(dy, dx);  
  x = mouseX - (cos(angle1) * segLength);
  y = mouseY - (sin(angle1) * segLength);
 
  segment(x, y, angle1); 
  ellipse(x, y, 20, 20);
}

void segment(float x, float y, float a) {
  pushMatrix();
  translate(x, y);
  rotate(a);
  line(0, 0, segLength, 0);
  popMatrix();
}

Para efeitos de exemplo, resolvi fazer com que no lugar das elipses tivessem retângulos e a cor deste objeto fosse mudando dependendo do local que se encontrava o mouse na tela. Para ter o efeito desejado, precisei retirar a função stroke de dentro da função setup e deixá-la na função draw, para que a cor do objeto fosse mudando a cada novo frame.

Segue o código editado abaixo:

float x = 100;
float y = 100;
float angle1 = 0.0;
float segLength = 50;

void setup() {
  size(640, 360);
  strokeWeight(20.0);
  
}

void draw() {
  background(0);
  stroke(mouseX, 100, mouseY);
  float dx = mouseX - x;
  float dy = mouseY - y;
  angle1 = atan2(dy, dx);  
  x = mouseX - (cos(angle1) * segLength);
  y = mouseY - (sin(angle1) * segLength);
 
  segment(x, y, angle1); 
  rect(x, y, 20, 20);
}

void segment(float x, float y, float a) {
  pushMatrix();
  translate(x, y);
  rotate(a);
  line(0, 0, segLength, 0);
  popMatrix();
}