class Experience {
  constructor( container ) {
    console.clear()

    this.canvas = document.createElement( 'canvas' )
    container.appendChild( this.canvas )
    this.context = this.canvas.getContext( '2d' )

    const fps = 120
    this.fpsInterval = 1000 / fps
    this.then = Date.now()
    
    // Play with these values
    this.tailLength = 20
    this.lineWidth = 20
    this.speed = 0.02
    this.waveFrequency = 8
    this.waveHeight = 20

    this.oldPositions = []
    
    this.counter = 0

    this.resize()
    this.bind()
    this.loop()
  }
 
  bind() {
    window.addEventListener( 'resize', this.resize.bind( this ), false )
  }

  render() {
    const position = {
      'x': Math.sin( this.counter ) * 300 + this.center.x,
      'y': Math.sin( this.counter * this.waveFrequency ) * this.waveHeight + this.center.y
    }
    
    this.oldPositions.unshift( position )
    if( this.oldPositions.length > this.tailLength ) {
      this.oldPositions.pop()
    }
    
    this.context.beginPath()
    this.context.moveTo( position.x, position.y )

    for( let position of this.oldPositions ) {
      this.context.lineTo( position.x, position.y )
    }

    const gradient = this.context.createLinearGradient( this.oldPositions[0].x, this.oldPositions[0].y, this.oldPositions[this.oldPositions.length - 1].x, this.oldPositions[this.oldPositions.length - 1].y )
    gradient.addColorStop( 0.0, '#FFFFFF' )
    gradient.addColorStop( 1.0, '#323232' )

    this.context.lineWidth = this.lineWidth
    this.context.lineCap = 'round'
    this.context.strokeStyle = gradient
    this.context.stroke()
    this.context.closePath()
    
    this.counter += this.speed
  }

  loop() {
    this.raf = window.requestAnimationFrame( this.loop.bind( this ) )

    const now = Date.now()
    const delta = now - this.then

    if( delta > this.fpsInterval ) {
      this.context.clearRect( 0, 0, this.canvas.width, this.canvas.height )
      this.render()
      this.then = now
    }
  }

  resize() {
    this.canvas.width = window.innerWidth
    this.canvas.height = window.innerHeight
    this.center = {
      'x': this.canvas.width / 2,
      'y': this.canvas.height / 2
    }
    
    this.reset()
  }
  
  reset() {
    window.cancelAnimationFrame( this.raf )
    this.context.clearRect( 0, 0, this.canvas.width, this.canvas.height )
    this.loop()
  }
}

const container = document.getElementById( 'canvas' )
let experience = new Experience( container )