// Input variables

let x, y, w, h;

​

// You cannot initialize stuff in relation to the canvas here.

// let x = width * 0.17;

// let y = height * 0.34;

// let w = width * 0.56;

// let h = height * 0.73;

​

function setup() {

  createCanvas(800, 400);

  x = width * 0.07;

  y = height * 0.14;

  w = width * 0.06;

  h = height * 0.03;

}

​

function draw() {

  background(220);

  // Call my very own rect function made out of lines

  drawMyRect(x, y, w, h);

  // Move the rect towards the mouse

  x += (mouseX - x) * 0.01;

  y += (mouseY - y) * 0.01;

​

  // I can re-use the function

  drawMyRect(10, 50, 60, 70);

}

​

function drawMyRect(x, y, w, h) {

  // Define the 4 edges of the rectangle

  let topEdge;

  let bottomEdge;

  let leftEdge;

  let rightEdge;

​

  // Output variables

  let topLeftX,

    topLeftY,

    topRightX,

    topRightY,

    bottomRightX,

    bottomRightY,

    bottomLeftX,

    bottomLeftY;

  //rect(width/4, height/4, width/2,height/2);

​

  // How do you re-write these line() calls so they refer to corners instead of edges?

​

  // Position the edges of the rectangle

  leftEdge = x;

  rightEdge = x + w;

  topEdge = y;

  bottomEdge = y + h;

​

  topLeftX = leftEdge;

  topLeftY = topEdge;

  topRightX = rightEdge;

  topRightY = topEdge;

  bottomRightX = rightEdge;

  bottomRightY = bottomEdge;

  bottomLeftX = leftEdge;

  bottomLeftY = bottomEdge;

​

  // Top line

  line(topLeftX, topLeftY, topRightX, topRightY);

  // Right line

  line(topRightX, topRightY, bottomRightX, bottomRightY);

  // Bottom line

  line(bottomRightX, bottomRightY, bottomLeftX, bottomLeftY);

  // Left line

  line(bottomLeftX, bottomLeftY, topLeftX, topLeftY);

}

​