<?xml version="1.0" encoding="UTF-8"?>
<svg width="46px" height="58px" viewBox="0 0 46 58" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 48.1 (47250) - http://www.bohemiancoding.com/sketch -->
    <title>spaceship</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="spaceship" fill-rule="nonzero">
            <path d="M30.75,48 L30.75,39 C30.75,38.448 31.198,38 31.75,38 C32.302,38 32.75,38.448 32.75,39 L32.75,41 L45.631,41 C44.567,36.701 39.318,32.885 35.704,30.368 C34.193,29.316 33.578,27.644 32.75,26 C31.189,22.901 29.553,18.521 28.981,15.086 L28.451,12.019 C28.395,12.029 28.339,12.043 28.283,12.043 C27.954,12.043 27.632,11.881 27.441,11.584 C26.384,9.942 24.833,9 23.186,9 C21.583,9 20.061,9.896 19.009,11.458 C18.782,11.794 18.386,11.945 18.01,11.881 L17.456,15.086 C16.883,18.521 15.311,22.901 13.75,26 C12.922,27.644 12.243,29.316 10.732,30.368 C7.118,32.885 1.928,36.701 0.868,41 L13.75,41 L13.75,39 C13.75,38.448 14.198,38 14.75,38 C15.302,38 15.75,38.448 15.75,39 L15.75,48 C15.75,48.478 15.407,48.859 14.959,48.958 C15.017,48.984 15.08,49 15.147,49 L17.156,49 C17.347,49 17.518,49.118 17.586,49.296 L18.508,51.704 C18.577,51.882 18.748,52 18.939,52 L23.218,52 L27.497,52 C27.688,52 27.859,51.882 27.928,51.704 L28.85,49.296 C28.918,49.118 29.089,49 29.28,49 L31.289,49 C31.363,49 31.43,48.979 31.492,48.948 C31.068,48.832 30.75,48.461 30.75,48 Z" id="Shape" fill="#38454F"></path>
            <path d="M32.75,46.008 C32.759,46.007 32.767,46.001 32.776,46 L45.269,44.996 C45.541,44.974 45.75,44.747 45.75,44.475 L45.75,43 L32.75,43 L32.75,46.008 Z" id="Shape" fill="#38454F"></path>
            <path d="M0.75,43 L0.75,44.475 C0.75,44.747 0.959,44.974 1.231,44.996 L13.661,45.999 C13.693,46.002 13.719,46.02 13.75,46.026 L13.75,43 L0.75,43 Z" id="Shape" fill="#38454F"></path>
            <path d="M15.75,48 L15.75,39 C15.75,38.448 15.302,38 14.75,38 C14.198,38 13.75,38.448 13.75,39 L13.75,41 L0.868,41 C0.826,41.17 0.778,41.339 0.75,41.511 L0.75,43 L13.75,43 L13.75,46.026 C14.285,46.127 14.686,46.584 14.686,47.137 L14.686,48.539 C14.686,48.726 14.799,48.886 14.959,48.958 C15.407,48.859 15.75,48.478 15.75,48 Z" id="Shape" fill="#546A79"></path>
            <path d="M45.631,41 L32.75,41 L32.75,39 C32.75,38.448 32.302,38 31.75,38 C31.198,38 30.75,38.448 30.75,39 L30.75,48 C30.75,48.461 31.068,48.832 31.492,48.948 C31.643,48.872 31.75,48.72 31.75,48.539 L31.75,47.138 C31.75,46.561 32.181,46.081 32.75,46.008 L32.75,43 L45.75,43 L45.75,41.511 C45.721,41.339 45.673,41.17 45.631,41 Z" id="Shape" fill="#546A79"></path>
            <g id="Group" transform="translate(4.000000, 51.000000)" fill="#F3D55B">
                <circle id="Oval" cx="1.75" cy="2" r="1.5"></circle>
                <circle id="Oval" cx="37.5" cy="2.5" r="1.5"></circle>
            </g>
            <g id="Group" transform="translate(17.000000, 54.000000)" fill="#E57E25">
                <path d="M1.686,0 C1.134,0 0.686,0.448 0.686,1 L0.686,2 C0.686,2.552 1.134,3 1.686,3 C2.238,3 2.686,2.552 2.686,2 L2.686,1 C2.686,0.448 2.238,0 1.686,0 Z" id="Shape"></path>
                <path d="M4.686,0 C4.134,0 3.686,0.448 3.686,1 L3.686,3 C3.686,3.552 4.134,4 4.686,4 C5.238,4 5.686,3.552 5.686,3 L5.686,1 C5.686,0.448 5.238,0 4.686,0 Z" id="Shape"></path>
                <path d="M7.686,0 C7.134,0 6.686,0.448 6.686,1 L6.686,3 C6.686,3.552 7.134,4 7.686,4 C8.238,4 8.686,3.552 8.686,3 L8.686,1 C8.686,0.448 8.238,0 7.686,0 Z" id="Shape"></path>
                <path d="M10.686,0 C10.134,0 9.686,0.448 9.686,1 L9.686,2 C9.686,2.552 10.134,3 10.686,3 C11.238,3 11.686,2.552 11.686,2 L11.686,1 C11.686,0.448 11.238,0 10.686,0 Z" id="Shape"></path>
            </g>
            <path d="M23.186,7 C24.948,7 26.609,7.724 27.934,9.031 L27.467,6.327 C27.035,3.737 25.942,2.565 24.305,0.536 C23.748,-0.155 22.689,-0.155 22.132,0.536 C20.495,2.565 19.402,3.736 18.97,6.327 L18.516,8.953 C19.829,7.697 21.463,7 23.186,7 Z" id="Shape" fill="#38454F"></path>
            <path d="M23.186,9 C24.833,9 26.384,9.942 27.441,11.583 C27.632,11.88 27.954,12.042 28.283,12.042 C28.339,12.042 28.395,12.028 28.451,12.018 L27.934,9.03 C26.609,7.724 24.948,7 23.186,7 C21.463,7 19.829,7.697 18.516,8.953 L18.01,11.881 C18.386,11.945 18.782,11.794 19.009,11.458 C20.061,9.896 21.583,9 23.186,9 Z" id="Shape" fill="#8697CB"></path>
            <g id="Group" transform="translate(17.000000, 30.000000)" fill="#546A79">
                <path d="M10.75,10 L1.75,10 C1.198,10 0.75,10.448 0.75,11 C0.75,11.552 1.198,12 1.75,12 L10.75,12 C11.302,12 11.75,11.552 11.75,11 C11.75,10.448 11.302,10 10.75,10 Z" id="Shape"></path>
                <path d="M10.75,5 L1.75,5 C1.198,5 0.75,5.448 0.75,6 C0.75,6.552 1.198,7 1.75,7 L10.75,7 C11.302,7 11.75,6.552 11.75,6 C11.75,5.448 11.302,5 10.75,5 Z" id="Shape"></path>
                <path d="M1.75,2 L10.75,2 C11.302,2 11.75,1.552 11.75,1 C11.75,0.448 11.302,0 10.75,0 L1.75,0 C1.198,0 0.75,0.448 0.75,1 C0.75,1.552 1.198,2 1.75,2 Z" id="Shape"></path>
                <path d="M9.75,14 L2.75,14 C2.198,14 1.75,14.448 1.75,15 L1.75,17 C1.75,17.552 2.198,18 2.75,18 C3.302,18 3.75,17.552 3.75,17 L3.75,16 L8.75,16 L8.75,17 C8.75,17.552 9.198,18 9.75,18 C10.302,18 10.75,17.552 10.75,17 L10.75,15 C10.75,14.448 10.302,14 9.75,14 Z" id="Shape"></path>
            </g>
            <path d="M35.704,30.368 C34.193,29.316 33.578,27.644 32.75,26 C31.19,22.903 29.556,18.528 28.982,15.094 C28.285,21.77 28.262,36.935 42.429,37 C42.793,37.002 43.13,36.99 43.455,36.972 C41.312,34.348 38.138,32.063 35.704,30.368 Z" id="Shape" fill="#546A79"></path>
            <path d="M17.493,14.87 L17.456,15.086 C16.883,18.521 15.311,22.901 13.75,26 C12.922,27.644 12.243,29.316 10.732,30.368 C8.299,32.062 5.152,34.347 3.028,36.97 C3.358,36.989 3.701,37.001 4.071,37 C18.403,36.934 18.212,21.419 17.493,14.87 Z" id="Shape" fill="#546A79"></path>
        </g>
    </g>
</svg>

*,
*::before,
*::after {
  padding: 0;
  margin: 0;
}

html,
body,
canvas {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

const COLORS = {
  SIN: '#FFB947',
  COS: '#D04051'
}

const canvas = {
  init () {
    this.ele = document.createElement('canvas')
    document.body.appendChild(this.ele)
    this.resize()
    window.addEventListener('resize', () => this.resize(), false)
    return this.ele.getContext('2d')
  },
  onResize (callback) {
    this.resizeCallback = callback
  },
  resize () {
    this.width = this.ele.width = this.ele.offsetWidth * 2
    this.height = this.ele.height = this.ele.offsetHeight * 2
    this.ele.style.width = this.ele.width * 0.5 + 'px'
    this.ele.style.height = this.ele.height * 0.5  + 'px'
    this.ctx = this.ele.getContext('2d')
    this.ctx.scale(2, 2)
    this.resizeCallback && this.resizeCallback()
  },
  run (callback) {
    requestAnimationFrame(() => {
      this.run(callback)
    })
    callback(this.ctx)
  }
}

let mouse = {
  x: 0,
  y: 0
}

function getCurrentDegree () {
  const deltaX = mouse.x - window.innerWidth * 0.5
  const deltaY = mouse.y - window.innerHeight * 0.5
  return Math.atan2(deltaY, deltaX) * 180 / Math.PI
}

const ctx = canvas.init()

class Bullet {
  constructor ({ angle = 0, speed = 2}) {
    this.angle = angle
    this.speed = speed
    this.length = 6
    this.distance = 24
  }
  draw()  {
    this.distance += this.speed
    const radians = this.angle / 180 * Math.PI
    const x = Math.cos(radians) * this.distance
    const y = Math.sin(radians) * this.distance
    const tx = Math.cos(radians) * (this.distance + this.length)
    const ty = Math.sin(radians) * (this.distance + this.length)
    ctx.save()
    ctx.lineWidth = 4
    ctx.beginPath()
    ctx.translate(window.innerWidth * 0.5, window.innerHeight * 0.5)
    ctx.moveTo(x, y)
    ctx.lineTo(tx, ty)
    ctx.strokeStyle = '#D04051'
    ctx.stroke()
    ctx.closePath()
    ctx.restore()
  }
}

class Plane {
  constructor () {
    this.img = document.querySelector('svg');
    
    this.img.style = `
      position: fixed;
      left: 50%;
      top: 50%;
      width: 46px;
      height: 58px;
      margin-top: -29px;
      margin-left: -23px;
    `
  }
  draw() {
    const degress = getCurrentDegree();

    this.img.style.transform = `
      rotate(${degress + 90}deg)
    `
  }
}

let elements = []
const init = () => {
  elements = []
  elements.push(new Plane())
}

init()
canvas.run(ctx => {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  elements.forEach(e => e.draw())
})

canvas.onResize(() => {
  init()
})

window.addEventListener('mousemove', (e) => {
  mouse = {
    x: e.pageX,
    y: e.pageY
  }
})


window.addEventListener('keydown', (e) => {
  if (e.key === ' ') {
    elements.push(new Bullet({
      angle: getCurrentDegree()
    }))
  }
})