Reproduce this figure. It consists of two (stretched) 100×100 squares which have been rotated by 30 degrees and -30 degrees, respectively. You may find it helpful to interactively print the mouse coordinates in order to test out various translations, etc. Note that there are several possible solutions.

Here’s one solution:

void setup() {
  size(400, 400);
  noLoop();
}

void draw() {
  background(129);

  pushMatrix();
  rotate( radians(30.0));
  translate (234,0);
  scale (2.0, 1.0);
  fill (255);
  rect (0, 0, 100, 100);
  fill (0);
  text ("ONE", 5, 15);
  popMatrix();

  pushMatrix();
  rotate ( radians(-30.0));
  scale(1.0, 2.0);
  translate (0, 40);
  fill (255, 128);
  rect(0, 0, 100, 100);
  fill (0);
  text ("TWO", 5, 15);
  popMatrix();

  // saveFrame("transforms.jpg");
}

Declare, allocate and initialize an array of 5 floats. Init them with random numbers between 0-255. Use these floats to control the gray-level color of 5 corresponding circles. Now create a time-based program in which, on each time-step (draw() call), the values in these arrays are increased by 1. When the value stored in each position is greater than 255, have it reset to 0.

float myArray[]; // declaration
int nCircles = 5;

void setup(){
  size (500,200);
  smooth();
  myArray = new float[nCircles];
  for (int i=0; i 255){
      myArray[i] = 0;
    }
  }
}

void drawFromMyArray(){
  for (int i=0; i