### Lesson 41

by golan @ 12:06 pm September 28, 2011

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<nCircles; i++){ myArray[i] = random(0, 255); } }   void draw(){ background(200,100,100); updateMyArray(); drawFromMyArray(); }   void updateMyArray(){ for (int i=0; i<nCircles; i++){ myArray[i] = myArray[i] + 1; if (myArray[i] > 255){ myArray[i] = 0; } } }   void drawFromMyArray(){ for (int i=0; i<nCircles; i++){ float ithGray = myArray[i]; fill (ithGray); float x = i*100 + 50; ellipse (x, 100, 50,50); } }```