var doc, scrollPos, scrollHeight, mobile

var lines = function($_) {

  var w, h, canvas
  // driving values
  var xoff, yoff, sinX, sinDepth, sinDepthL, sinDepthR
  // modifiers
  var yStep, xoffStep, offL, offR, yMargin, offSize, speed, mSpeed

  $_.setup = function() {
    w = window.innerWidth
    h = window.innerHeight + 300
    canvas = $_.createCanvas(w, h)
    yStep = 20
    yMargin = h * 2
    xoffStep = 0.05
    offR = w / 2
    yoff = 1000
    offSize = $_.random(150, 200)
    speed = 0.001

    if (w < 768) {
      mobile = true
    } else {
      mobile = false
    }
    if (!mobile) {
      $_.frameRate(30)
      offL = $_.random(-0.2 * w, 0)
      sinDepth = w / 3
      sinDepthL = w / 3
      sinDepthR = w / 3
    } else {
      $_.frameRate(60)
      offL = w / 3
      sinDepth = w / 2
      sinDepthL = w / 2
      sinDepthR = w / 2
    }
  }

  $_.draw = function() {
    $_.clear()
    $_.background(scrollPos, 255, 255, 1)
    $_.stroke('#b0ff53')
    $_.noFill()

    // if (!mobile) { mSpeed = $_.map(speed, 0, 1000, 0.5, 0.1) }

    // left
    $_.beginShape()
    xoff = 0
    for (var y = 0; y < scrollHeight + yMargin; y+= yStep) {
      sinX = $_.sin(xoff)
      var nX = $_.map($_.noise(xoff, yoff), 0, 1, -1 * offSize, offSize)
      var nY = $_.map($_.noise(xoff + 500, yoff - 500), 0, 1, -1 * offSize, offSize)
      var sinXoffset = $_.map(sinX, -1, 1, 0, sinDepthL) + offL
      var yIncMargin = y - yMargin / 2
      $_.curveVertex(sinXoffset + nX, yIncMargin - scrollPos + nY)
      xoff += xoffStep
    }
    $_.endShape()

    if (!mobile) {
      // right
      $_.beginShape()
      xoff = 400000
      for (var y = 0; y < scrollHeight + yMargin; y+= (yStep + 2)) {
        sinX = $_.sin(xoff)
        var nX = $_.map($_.noise(xoff, yoff), 0, 1, -1 * offSize, offSize)
        var nY = $_.map($_.noise(xoff + 500, yoff - 500), 0, 1, -1 * offSize, offSize)
        var sinXoffset = $_.map(sinX, -1, 1, w, w - sinDepthR)
        var yIncMargin = y - yMargin / 2
        $_.curveVertex(sinXoffset + nX, yIncMargin - scrollPos + nY - h / 2)
        xoff += xoffStep
      }
      $_.endShape()
    }

    if(!mobile) { yoff += speed }
  }

  // $_.mouseMoved = function() {
  //   if (!mobile) {
  //     if ($_.mouseX < w / 2) {
  //       sinDepthL = $_.map($_.mouseX, 0, w, w / 2.8, w / 3)
  //     } else {
  //       sinDepthR = $_.map($_.mouseX, 0, w, w / 2.8, w / 3)
  //     }
  //   }
  // }
}

//
// INIT
//

document.addEventListener("DOMContentLoaded", function() {
  doc = document.documentElement
  calculateScrollValues()
  var sketch = new p5(lines)
})

function calculateScrollValues() {
  var top = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0)
  scrollHeight = Math.max(doc.clientHeight, doc.scrollHeight, doc.offsetHeight)
  scrollPos = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0)
}

window.addEventListener('scroll', function() {
  calculateScrollValues()
})

//
// END INIT
//