Week2

Worksheet

Most of the worksheet is straight forward and covered in the class already.

For the third question, while coding in the class with my group partner, I had an idea of creating objects for each corner. What I could have done was creating four objects: tr, tl, br, bl. Then use tr.x, tr.y, tl.x, tl.y, etc. So, less repetitive code while coding each of the four lines. However, I felt It was more work than the little amount of work I saved.

Here is a quick sketch that helped me to think:

Final code

let x, y, w, h;

function setup() {
  createCanvas(400, 400);
  x = width * 0.5;
  y = height * 0.5;
  w = width * 0.5;
  h = height * 0.5;
}

function draw() {
  background(220);
  //top line
  //line(width / 4, height / 4, 3 * width / 4, height / 4);
  line(x - w / 2, y - h / 2, x + w / 2, y - h / 2);

  //right line
  //line(3 * width / 4, height / 4, 3 * width / 4, 3 * height / 4);
  line(x + w / 2, y - h / 2, x + w / 2, y + h / 2);

  //bottom line
  //line(3 * width / 4, 3 * height / 4, width / 4, 3 * height / 4);
  line(x + w / 2, y + h / 2, x - w / 2, y + h / 2);

  //left line
  //line(width / 4, 3 * height / 4, width / 4, height / 4);
  line(x - w / 2, y + h / 2, x - w / 2, y - h / 2);
}

For the 5th question. My first thought was to use x = mouseX; y = mouseY. But then I realized that in this way, the circle is moving “with” the mouse, not “towards” the mouse. It required a bit of thinking, but the overall idea is similar to the fourth question. The only thing that changed was x, and y are no longer only increment by one each time.

Here is a rough sketch I did to figure out how much the x and y need to be changed:

Essentially, the center point of the circle (x, y) needs to move to (mouseX, mouseY). 

x = x + (the difference between x and mouseX);

y = y + (the difference between y and mouseY);

the difference between x and mouseX = mouseX – x

the difference between y and mouseY = mouseY – y

(I realized it needs to be mouseX – x; otherwise, the circle is flying away from the mouse)

Final code

let x, y;

function setup() {
  createCanvas(400, 400);
  //putting the circle in the middle of the screen
  x = width / 2;
  y = height / 2;
}

function draw() {
  background(220);
  ellipse(x, y, 50);
  x = x + (mouseX - x) / 10;
  y = y + (mouseY - y) / 10;
}

Sketch

For the sketch, I wanted to keep on working on the self-portrait created from last week. 

For the random part, I made the R-value of the background random, so it looks like the background is flashing with red-ish purple colors. I also declared 3 variables for each of the RGB value of the clothes. Every time I run the sketch, a random number will be assigned, thus creating a new color for the dresses every time.

let eyex1, eyex2, eyey1, eyey2;
let br, bb, gr;

function setup() {
  createCanvas(400, 400);
  eyex1 = 172;
  eyex2 = 262;
  eyey = 180;
  //reating a new random color for the clothes everytime the sketch was run
  br = random (255);
  bb = random (255);
  bg = random (255);
}

I wanted to move the eyes with the mouse, so I used mouseX and mouseY. 

I also don’t want the eyes to fly all over, so I used constrain() to limit how far they can move.

  //Eyes
  fill(255);
  ellipse(160, 180, 40);
  ellipse(250, 180, 40);
  
  //Eye balls
  fill(0);
  ellipse(eyex1, eyey, 15);
  ellipse(eyex2, eyey, 15);
  //moving the eyeballs with mouse
  eyex1 = constrain(mouseX, 147, 172);
  eyex2 = constrain(mouseX, 237, 262);
  eyey = constrain(mouseY, 167.5, 192.5);

On top of the eyes, I applied a “mouse detection” for the mouth. 

When the mouse is out of the canvas (mouseX > width | mouseY > height), it will draw a sad face. 

  //Mouth
  strokeWeight(5);
  //showing a smilling face when mouse is in the canvas
  if (mouseX > width | mouseY > height) {
    arc(200, 280, 80, 70, 16, 12);
  } else {
    arc(200, 230, 80, 70, 120, 166);
  }

(mouse tracking is not available here I think)

You can see the Sketch here