The Vector2D definition for an epicycle

epicycle-vector.js

class Vector2D {
  constructor(sx=10, sy=10, size=50, angle=0) {
    this.sx = sx
    this.sy = sy
    this.size = size
    this.angle = angle
    this.rotation = angle
    this.rotationStep = 0
    this.color = '#000'
    this.isPencil = false
  }
  set rotation(angle) {
    const { sx, sy, size } = this
    const rot = angle * Math.PI / 180
    this.ex = sx + (size * Math.cos(rot))
    this.ey = sy + (size * Math.sin(rot))
    this.angle = angle % 360
  }
  get rotation() {
    return this.angle
  }
  render (ctx) {
    const { sx, sy, ex, ey, size, isPencil, color } = this
    
    // radius / vector
    ctx.beginPath()
    ctx.moveTo(sx, sy)
    ctx.lineTo(ex, ey)
    ctx.stroke()
    
    // circumference
    ctx.save()
    ctx.beginPath()
    ctx.strokeStyle = '#ccc'
    ctx.arc(sx, sy, size, 0, Math.PI * 2)
    ctx.stroke()
    ctx.restore()
    
    // tip
    ctx.save()
    ctx.beginPath()
    ctx.fillStyle = isPencil ? color : '#000'
    ctx.arc(ex, ey, 4, 0, Math.PI * 2)
    ctx.stroke()
    ctx.fill()
    ctx.restore()
  }
}