class Vector2 {
	constructor(x, y) {
  	this.x = x;
    this.y = y;
  }
  
  plus(otherVector) {
    return new Vector2(this.x + otherVector.x, this.y + otherVector.y);
  }
  
  timesScalar(scalar) {
    return new Vector2(this.x * scalar, this.y * scalar);
  }
  
  componentsTimesVector(otherVector) {
    return new Vector2(this.x * otherVector.x, this.y * otherVector.y);
  }
  
  magnitude() {
    return Math.sqrt(this.x ** 2 + this.y ** 2);
  }
  
  rotate(rotationRadians) {
    // avoid divide by zero
    if (this.magnitude() === 0) {
      return new Vector2(this.x, this.y);
    }
    
    // tangent of an angle is opposite / adjacent, or in a vector y / x
    // you could use sine, cosine, or tangent here, but I'm using tangent
    // because you don't have to get the magnitude
    const yOverHypotenuse = this.y / this.x;
    
    // to solve for angle, we need to undo tangent on both sides. This can be done with
    // arctangent. Beyond knowing that it cancels out tangent, arctangent (and arcsine and arccosine)
    // are out of scope of this example, as we won't be using them immediately.
    const angleOfVector = Math.atan(yOverHypotenuse);
    
    // Add the existing angle to the new rotation angle
    const newAngleForVector = angleOfVector + rotationRadians;
    
    // Get the new positions within the unit circle
    const newXInUnitCircle = Math.cos(newAngleForVector);
    const newYInUnitCircle = Math.sin(newAngleForVector);
    
    // Create vector
    const newVectorInUnitCircle = new Vector2(newXInUnitCircle, newYInUnitCircle);
    
    // Scale it back out of the unit circle by the vectors existing length
    return newVectorInUnitCircle.timesScalar(this.magnitude());
  }
}

// Our translate, or "move" vector, that we will add to each vector of our square.
const translateVector = new Vector2(10, 20);

// Our scale vector which should triple the width of the square and double its height
const scaleVector = new Vector2(2, 3);

// Radians to rotate by
const rotation = -0.4;

const upperLeftCorner = new Vector2(0, 0);
const upperRightCorner = new Vector2(40, 0);
const lowerRightCorner = new Vector2(40, 40);
const lowerLeftCorner = new Vector2(0, 40);

const transatedUpperLeftCorner = upperLeftCorner.plus(translateVector);
const translatedUpperRightCorner = upperRightCorner.plus(translateVector);
const translatedLowerRightCorner = lowerRightCorner.plus(translateVector);
const translatedLowerLeftCorner = lowerLeftCorner.plus(translateVector);

const scaledUpperLeftCorner = transatedUpperLeftCorner.componentsTimesVector(scaleVector);
const scaledUpperRightCorner = translatedUpperRightCorner.componentsTimesVector(scaleVector);
const scaledLowerRightCorner = translatedLowerRightCorner.componentsTimesVector(scaleVector);
const scaledLowerLeftCorner = translatedLowerLeftCorner.componentsTimesVector(scaleVector);

const rotatedUpperLeftCorner = scaledUpperLeftCorner.rotate(rotation);
const rotatedUpperRightCorner = scaledUpperRightCorner.rotate(rotation);
const rotatedLowerRightCorner = scaledLowerRightCorner.rotate(rotation);
const rotatedLowerLeftCorner = scaledLowerLeftCorner.rotate(rotation);

const context = document.querySelector('canvas').getContext('2d');

// Set canvas origin to its center
const centerX = context.canvas.width / 2;
const centerY = context.canvas.height / 2;
context.translate(centerX, centerY);

context.beginPath();
context.moveTo(rotatedUpperLeftCorner.x, rotatedUpperLeftCorner.y);
context.lineTo(rotatedUpperRightCorner.x, rotatedUpperRightCorner.y);
context.lineTo(rotatedLowerRightCorner.x, rotatedLowerRightCorner.y);
context.lineTo(rotatedLowerLeftCorner.x, rotatedLowerLeftCorner.y);
context.closePath();
context.stroke();