learning trig with canvas

by andersand

HTML

<canvas width="400" height="300" id="can"></canvas>
<div>
  <label>degs: </label><label id="degs"></label><br/>
  <label>dx: </label><label id="dx"></label><br/>
  <label>dy: </label><label id="dy"></label><br/>
  <label>mx: </label><label id="mx"></label><label> ax: </label><label id="ax"></label><br/>
  <label>my: </label><label id="my"></label><label> ay: </label><label id="ay"></label><br/>
</div>

CSS

body {
  background-color: #242623;
  margin: 0;
  padding: 0;
}
canvas {
  background-color: #333;
  cursor: crosshair;
}
div {
  position: absolute;
  top: 0; left: 0;
  display: none;
}

JavaScript

const can = document.getElementById("can")
const ctx = can.getContext("2d")
const pi2 = Math.PI * 2

let mx = 0, my = 0

let r = 5

let x = 200 // originating point
let y = 200

let x1 = x, y1 = y // point to cursor pos


function plot() {
	let degs = Math.atan2(my-y, mx-x)
  
  let dx = Math.cos(degs)
  let dy = Math.sin(degs)
	
//	showInfo(degs, dx, dy, ax, ay, mx, my)
  
  ctx.clearRect(x1-r*3, y1-r*3, r*6, r*6) // clr pink
  
  // recalc pink 
  x1 = x + (dx * 30)
  y1 = y + (dy * 30)
  
  ctx.clearRect(mx-10*r, my-10*r, r*20, r*20) // clr yellow
  drawBullet(x, y, "red")
  drawBullet(x1, y1, "pink")
  drawBullet(mx, my, "yellow")
	
}

function showInfo(degs, dx, dy, ax, ay, mx, my) {
	document.querySelector("#degs").innerHTML = degs
	document.querySelector("#dx").innerHTML = dx
	document.querySelector("#dy").innerHTML = dy
	document.querySelector("#ax").innerHTML = ax
	document.querySelector("#ay").innerHTML = ay
	document.querySelector("#mx").innerHTML = mx
	document.querySelector("#my").innerHTML = my
}

document.addEventListener("mousemove", function(ev) {
  mx = ev.clientX
  my = ev.clientY
  plot()
})

function drawBullet(x, y, color) {
  ctx.fillStyle = color
  ctx.beginPath()
  ctx.ellipse(x, y, r, r, 0, 0, pi2)
  ctx.fill()
}