import {
  browser, requestAudioContext,
  randint, randrange, clamp,
} from './lib/util'

import mouse from './lib/mouse'
import color from './lib/color'

let w, h
let rx, ry

const canvas = document.createElement('canvas')
const ctx = canvas.getContext('2d')

document.body.appendChild(canvas)
document.body.addEventListener('resize', resize)
resize()
recenter()
requestAnimationFrame(animate)

function resize(){
  w = canvas.width = window.innerWidth
  h = canvas.height = window.innerHeight
  clear()
}
function recenter(){
  rx = randint(w), ry = randint(h)
}
function animate(t){
  requestAnimationFrame(animate)
  ctx.save()
  ctx.globalAlpha = 0.0001
  ctx.translate(w/2, h/2)
  ctx.rotate(0.1)
  ctx.translate(-rx, -ry)
  ctx.drawImage(canvas, 0, 0)
  ctx.restore()
}
function clear(n){
  ctx.fillStyle = 'rgba(255,255,255,' + (n || 0.5) + ')'
  ctx.fillRect(0,0,w,h)
  recenter()
}
function triangle(px,py,r){
  setTimeout( () => tri(px,py,r), Math.random()*10)
  // setTimeout( () => tri(px,py,r), Math.random()*200)
  // setTimeout( () => tri(px,py,r), Math.random()*300)
}
function tri(px, py, r) {
  ctx.save()
  ctx.globalCompositeOperation = 'multiply'
  ctx.fillStyle = color((px+py)/(w+h), 0, 1, 1)
  function p(){
    let theta = randrange(0, Math.PI*2)
    let x = px + Math.cos(theta) * r
    let y = py + Math.sin(theta) * r
    return { x, y }
  }
  ctx.beginPath()
  const p0 = p(), p1 = p(), p2 = p()
  ctx.moveTo(p0.x, p0.y)
  ctx.lineTo(p1.x, p1.y)
  ctx.lineTo(p2.x, p2.y)
  ctx.lineTo(p0.x, p0.y)
  ctx.fill()
  ctx.restore()
}
function line(y){
  ctx.beginPath()
  ctx.moveTo(0, y)
  ctx.lineTo(w, y)
  ctx.strokeStyle = "#888"
  ctx.strokeWidth = 1
  ctx.stroke()
}
function dot(x, y, r){
  ctx.fillStyle = "#f00"
  ctx.beginPath()
  ctx.moveTo(x, y)
  ctx.arc(x, y, r, 0, 2*Math.PI)
  ctx.fill()
}

export default {
  triangle, clear, line, dot, ctx
}