For step1, I used triangle rectangle and ellipse to create a man wearing a pair of glasses. I used x, y and c to set the position of the triangle rectangle and ellipse, then call the display(200,200,0); in setup();
step1 (the video of step one).
For step two, I used random to fill in the ruction. I first put the display(random(width),random(height),color (random(0,255),random(0,255),random(2,255))); in setup(); then I put it in the draw();
step2(1) and step2(2)(the video of step2).
For step3, I used three Arrays to store the data and use for loop to create the graphic.
step3 (the video of step3).
For step4, to make it move, I first added two new Arrays in the code. Then I change i<x.length into I<xpositions.length. Then I make the x position and y position to be random. x[i] += random(-5, 5); y[i] += random(-5, 5);
step4 (the video of step4)
Q1: In the setup(), things only happen once, then the whole things end after one time. So there is only 100 graphics drawn if the loop is in setup();
In the draw(), things happen many times and keep going on. After one time finish, then the computer executes the loop again and keep executing. So the computer draw 100 graphics randomly for many times which make the graphic moving.
Q2: Arrays can store many variables it is like a collection of variables of the same type. Programmer can shorten the line of the code and simplify the code using one line instead of keep storing the variables using many lines. So all the values stay in Arrays and each time when the programmer want to call the value, he can first set int[] numbers = new int[]; then call numbers[] . This simplifies the code. Also the Arrays can store different type of value, it can store booleans, ints and other which is very convenient and can apply to different situation when using different type of value. It can also store the data when managing large statistic.
The code:
https://github.com/clover0208/recitation07/commit/8756c609e41f3a85989a2dd954da6ab4ee47406a
https://github.com/clover0208/recitation07/blob/master/step4.pde