<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.min.js"></script>

body {
  margin: 0;
  overflow: hidden;
  background: #fbf8f3;
}

let diagram, center
const padding = 10

function setup() {
  createCanvas(windowWidth, windowHeight)
  center = createVector(windowWidth/2, windowHeight/2)
  
  setupDiagram()
}

function draw() {
  clear()
  image(diagram, 0, 0)
  
  // draw point at current mouse
  strokeWeight(16)
  point(mouseX, mouseY)
  
  stroke(0)
  fill(0)
  strokeWeight(5)
  
  translate(windowWidth/2, windowHeight/2)
  
    // draw red line
  stroke(255, 0, 0)
  strokeWeight(8)
  
  const mx = (mouseX - windowWidth / 2)
  const my = (mouseY - windowHeight / 2)

  line(-my, -mx, my, mx)
  // line(0, 0, my, mx)
  console.log(`(${mx},${my})  >  (${my},${mx})`)
  
  
}

function setupDiagram() {
  diagram = createGraphics(windowWidth, windowHeight)
  
  // write text labels for angles
  diagram.stroke(0)
  
  // draw axes and unit circle
  diagram.strokeWeight(3)
  diagram.stroke(0)
  diagram.noFill()
  
  diagram.line(windowWidth/2, 0, windowWidth/2, windowHeight)
  diagram.line(0, windowHeight/2, windowWidth, windowHeight/2)
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight)
  setup()
}