The tasks in this recitation are very similar to our class practice which draws multiple smiling faces.

(I apologize for not using screen recording. I only have videos on my phone. I will remember to record the screen next time.)

Step 1:

I came up with the idea of the logo of Microsoft. Instead of drawing four rectangles, I found an easier way. I can only draw one rectangle and then draw a horizontal and a vertical line with heavy stroke weight. The steps of defining a function and call a function are very similar to what I learned for Python. A difference I notice is that I have to always define the data type of a new variable in Java. I will show the photo together with Step 2.

Step 2 and Question 1:

In the “for loop,” it draws ten random logos at random places. When I put it inside setup(), it draws 10 logos in the beginning and remains still since the code in setup() will only be executed once. Therefore, it only draws once.

When I put it inside draw(), it is constantly drawing logos and does not stop. Since draw() is looping, by every time it executes, 10 logos will be drawn on the screen. Therefore, it is drawing all the time without stop.

Step 3 and Question 2:

In step 2, I use “display(random(100, 500), random(100, 500), random(50, 300), color(random(255), random(255), random(255))).” However, if I want every object to have a series of fixed random values, this would not work. This statement will give a series of new values every time it executes.

So, instead of defining hundreds of variables to solve this problem, creating an array to store these values in sequence would be a convenient way to add and refer the data. Since every value in the array is assigned an index, by using for loop to add and get the value, it can simplify thousands of hundreds of repeating lines of code to a few lines, which is more readable and saves memory.

Since my function has four attributions: x, y, size, and color, I create four arrays to store each of the sequences of values. Then I add random values to the arrays in setup() and call them by index in the draw().

Step 4:

At first, I add a random value every time when a logo is drawn. Every time the same logo is drawn, I give it a random speed to move. However, this random speed is changing every time when I create a random value in draw(). So, it looks like this.

After this, I realize that I should make this random speed fixed for every logo. Therefore, I figure out that I need also to create another array to store the speed values in a sequence. Then I add “speedX” and “speedY” arrays that work similarly to other arrays. I add the “if-else statement” to reverse the direction of the movement when it touches the edge. This is covered in our class.

Optional:

I try to make the graph stop when I put my mouse on it and start to move when I move the mouse away. I achieved this by adding another “if-else statement” in the draw() to detect the position of the mouse. If the mouse is on the graph,  then it does not add “speed” to the corresponding logo in this loop. If not, it will normally add “speed” to make the graphs moving. It works. And I find it interesting to interact with it!

The answer to Question 1 and Question 2 are included in the documentation above.

Code:

int numbers = 100;
float[] moveX = new float[numbers];
float[] moveY = new float[numbers];
float[] x = new float[numbers];
float[] y = new float[numbers];
float[] size = new float[numbers];
color[] c = new color[numbers];
void setup(){
  size(600, 600);
  background(255);
  for(int i = 0; i < numbers; i++){
    x[i] = random(100, 500);
    y[i] = random(100, 500);
    size[i] = random(100, 300);
    c[i] = color(random(255), random(255), random(255));
    moveX[i] = random(-5, 5);
    moveY[i] = random(-5, 5);
  }
  //for(int i = 0; i < 100; i++){
  //  display(random(100, 500), random(100, 500), random(50, 300), color(random(255), random(255), random(255)));
  //}
}

void draw(){
  background(255);
  for(int i = 0; i < numbers; i++){
    display(x[i], y[i], size[i], c[i]);
    if(x[i] > width || x[i] < 0){
      moveX[i] = -moveX[i];
    }
    if(y[i] > height || y[i] < 0){
      moveY[i] = -moveY[i];
    }
    if(mouseX > x[i] - size[i]/4 & mouseX < x[i] + size[i]/4 & mouseY > y[i] - size[i]/4 & mouseY < y[i] + size[i]/4){
    }else{
      x[i] += moveX[i];
      y[i] += moveY[i];
    }
  }
  //for(int i = 0; i < 100; i++){
  //  display(random(100, 500), random(100, 500), random(50, 300), color(random(255), random(255), random(255)));
  //}
}

void display(float x, float y, float size, color c) {
  //Use these parameters to create your graphics
  noStroke();
  fill(c);
  ellipse(x, y, size, size);
  fill(255);
  rect(x - size/4, y - size/4, size/2, size/2);

  fill(c);
  stroke(c);
  strokeWeight(size/25);
  line(x - size/4, y, x + size/4, y);
  line(x, y - size/4, x, y+ size/4);

}