Worksheet # 2 Documentation

Draw a rectangle in the middle of the screen that is half the width and half the height of the canvas. Write it so that you can change the size of the canvas and the rectangle will stay in the center and maintain its size relationship to the canvas.

Version A: using rectMode(CENTER);

```cpp
function draw() {
  background(220);
  
  rectMode(CENTER);
  rect(width / 2, height / 2, width / 2, height / 2);
}
```

**Version B :**using rectMode(CORNER);

```cpp
function draw(){
  background(220);
  rect(width / 4, height / 4, width / 2, height / 2)
}
```

Re-draw the rectangle using line(). Challenge: Write it so that you can easily change the location and size relationship with the canvas.
Move a circle from the middle of the screen to the right side of the screen.
1. Add 3 more, 1 moving left, 1 moving up, 1 moving down.
  
  For this, I set a variable for the “movement” (number of pixels moving on one draw() frame) of the circles. I initially set it to 2 variables for movement along X and Y coordinates. But it seems like this question has no specification for circle speed, so simply opted to have same speed for all circles.
```
// Movement in pixels along axis
let mov;

function setup() {
  createCanvas(400, 400);
  mov = 1;
}

function draw() {
  background(220);
  mov++;

  // move right
  ellipse(width / 2 + mov, height / 2, 50, 50);

  // move left
  ellipse(width / 2 - mov, height / 2, 50, 50);

  // move up
  ellipse(width / 2, height / 2 + mov, 50, 50);

  // move down
  ellipse(width / 2, height / 2 - mov, 50, 50);
}
```
  If we were to have differing speed for each circle, we would have to set a different speed for each circle, i.e.
2. Add 4 more, each moving towards each of the 4 corners of the canvas. && Re-write 4b. so if I change the width of the canvas, the circles still go to the corners without having to change any other code.
  
  For a circle to move from center to each 4 corners of the canvas, you need either 1) angle to each corner or 2) location of each corner.
  
  Version 1: Location of each corner
  
  These are the corner coordinates of the canvas:
  
  (0, 0), (0, width), (height, 0), (width, height)
  
  To move diagonally, the center of ellipse should move a certain distance in the X axis and Y axis.
  
  (A , B) is center
  
  xPos = A + xMov (=movement along x axis)
  
  yPos = B + yMov (=movement along y axis)
  
  To define the relationship even more (addressing 4-b), the relationship is:
  
  while A moves 1 pixel (as a baseline), B moves x/y pixel.
  
  OR while A moves y/x pixel, B moves 1 . Here, x is defined as width/2 and y is height/2.
  
  First step of code:
```
let xMov;
let yMov;

function setup() {
  createCanvas(400, 400);
  xMov = 1;
  yMov = 1;
}

function draw() {
  background(220);

  ellipse(width / 2 + xMov, height / 2 + yMov, 50, 50);
  xMov++;
  yMov++;
}
```
  Relationship between xMov and yMov, however, is related to canvas size (width, height) as to reach canvas corner.
  
  xMov : yMov = width : height
  
  xMov = width * yMov / height
  
  yMov = height * xMov / width
  
  Therefore, if we set xMov to 1 (as speed isn’t specified for 4-b and 4-d), yMov will be height/width.
  
  Therefore, a more customizable code answering 4-(d) is:
```
// variable setting canvas width
let w;
let h;

// variable setting speed of circles moving
let s;

// movement along width
let xMov;

// movement along height
let yMov;

function setup() {
  // set canvas size
  w = 600;
  h = 300;
  createCanvas(w, h);
  
  // set speed
  s = 2;
  
  // initialize xMov and yMov
  xMov = 1;
  yMov = 1;
}

function draw() {
  background(220);

  // movement of center(s) along x and y axis with speed s
  xMov = xMov + 1 * s;
  yMov = yMov + (h / w) * s;
  // * without speed variable, xMov++; && yMov += h/w
  
  // Draw circles
  fill (255, 200, 0, 100);
  noStroke();
  
  // circle moving right down
  ellipse(w / 2 + xMov, h / 2 + yMov, 50, 50);

  // circle moving right up
  ellipse(w / 2 + xMov, h / 2 - yMov, 50, 50);

  // circle moving left down
  ellipse(w / 2 - xMov, h / 2 + yMov, 50, 50);

  // circle moving left up
  ellipse(w / 2 - xMov, h / 2 - yMov, 50, 50);
}
```
4-(c) Make one of your circles move 10 times faster than the other circles.

multiply movement variables (xMov, yMov) by 10
Move a circle towards the mouse. Hint: Use mouseX + mouseY.

Random brainstorm about how to “move a circle” towards the mouse.

ellipse(mouseX, mouseY, 50, 50);

This line of code will draw circle at the point of the mouse.

For this problem, the setup() value of the ellipse is not the mouse, and will move towards the mouse.

Therefore, what needs to change? center of ellipse (x1, y1).

We should use if statements because if the circle “reaches” (mouseX, mouseY), it should not move.

→ This is where I had a little problem thinking of how to go forth. How do I make the circle “follow” it without immediately syncing itself to the location of (mouseX, mouseY)?

I decided to start with a simpler mechanism:

→ Move an ellipse towards the mouse on the same x axis (y coordinate remains the same)

// set x coordinate of circle as variable
let x1; 

function setup() {
  createCanvas(400, 400);
  x1 = width / 2;
}

function draw() {
  background(220);
  
  ellipse (x1, 100, 50, 50);
  
  if (x1 < mouseX){
    x1++;
  }
  if (x1 < mouseX){
    x1--;
  }
  }
}

However, this code doesn’t work because the x1++; and x1—; cancels each other in the draw() function. We need to differentiate the movement from the coordinate itself.

→ Just like previous question, set xMov as “amount of movement” per frame. This is better to keep this value consistent as this is movement right and left along the y axis.