// Drool. function Logo (is_looping = false) {  this.el = document.createElement('splash')  this.el.style.position = 'fixed'  this.el.style.top = '0px'  this.el.style.left = '0px'  this.el.style.width = '100vw'  this.el.style.height = '100vh'  this.el.style.backgroundColor = '#000'  this.el.style.zIndex = '9999'  this.el.style.display = 'block'  this.el.style.transition = 'all 1000ms'  this.el.style.opacity = '1'   this.canvas = document.createElement('canvas')  this.canvas.style.display = 'block'   this.el.appendChild(this.canvas)   var is_looping = is_looping   this.size = null  this.is_playing = true   this.install = function (size) {    document.body.appendChild(this.el)    this.size = size     this.canvas.width = 600    this.canvas.height = 600    this.canvas.style.width = '300px'    this.canvas.style.height = '300px'    this.canvas.style.display = 'block'    this.canvas.style.margin = 'calc(50vh - 150px) auto'    this.canvas.style.transition = 'all 1000ms'    this.canvas.style.opacity = '1'     this.create_tiles()    animate()     var timer = setInterval(this.draw, 17)  }   this.remove = function () {    this.canvas.style.opacity = 0    setTimeout(() => { this.el.style.opacity = 0 }, 500)    setTimeout(() => { document.body.removeChild(this.el) }, 1500)  }   this.context = function () {    return this.canvas.getContext('2d')  }   this.clear = function () {    this.context().clearRect(0, 0, this.canvas.width, this.canvas.height)  }   this.stop = function () {    if (logo.is_playing == false) { return }     setTimeout(function () { logo.draw(true) }, 50)    this.is_playing = false  }   this.frame = 0   this.draw = function (override = false) {    if (override == false && !tiles_still_moving()) { logo.stop(); return }     logo.clear()    var offset = 200    for (i = 0; i < tiles.length; i++) {      var tile = tiles[i]      var max_size = (tile.size / 2) - 2      var progress_toward_end = 1 - clamp(tile.distance_from_end() / (max_size * 4), 0, 1)      var progress_fade = clamp(logo.frame / 10000, 0, 1)      var size = clamp(progress_toward_end * progress_fade, 0, 1) * max_size       logo.frame += 1      logo.context().beginPath()      logo.context().arc(tile.el_pos.x + offset, tile.el_pos.y + offset, size, 0, 2 * Math.PI, false)      logo.context().fillStyle = 'white'      logo.context().fill()      logo.context().closePath()      logo.frame += 1    }  }   var tiles = []   this.create_tiles = function () {    for (x = 0; x < 10; x++) {      for (y = 0; y < 10; y++) {        var pos = { x: x, y: y }        tiles.push(new Tile(pos, this.size / 5))      }    }  }   function scare_tiles (steps) {    for (s = 0; s < steps; s++) {      for (t = 0; t < tiles.length; t++) {        tiles[t].flee()      }    }  }   function return_tiles_to (step) {    for (i = 0; i < tiles.length; i++) {      tiles[i].move_to(tiles[i].history[step])      tiles[i].update()    }  }   function animate_return_to (step, id) {    if (id == -1) { return }    tiles[id].animate_until(tiles[id].history[step])    setTimeout(function () { animate_return_to(step, id - 1) }, 10)  }   function animate_to (step, id) {    if (id == 100) { return }    tiles[id].animate_until(tiles[id].history[step])    setTimeout(function () { animate_to(step, id + 1) }, 10)  }   function tiles_still_moving () {    for (i = 0; i < tiles.length; i++) {      var tile = tiles[i]      if (tile.offset().x != 0 || tile.offset().y != 0) { logo.is_playing = true; return true }    }    return false  }   function animate () {    scare_tiles(6)    return_tiles_to(5)     var speed = 300     setTimeout(function () { animate_return_to(9, 99) }, 0)    setTimeout(function () { animate_return_to(8, 99) }, 1 * speed)    setTimeout(function () { animate_return_to(7, 99) }, 2 * speed)    setTimeout(function () { animate_return_to(6, 99) }, 3 * speed)    setTimeout(function () { animate_return_to(5, 99) }, 4 * speed)    setTimeout(function () { animate_return_to(4, 99) }, 5 * speed)    setTimeout(function () { animate_return_to(3, 99) }, 6 * speed)    setTimeout(function () { animate_return_to(2, 99) }, 7 * speed)    setTimeout(function () { animate_return_to(1, 99) }, 8 * speed)     if (is_looping == true) {      setTimeout(function () { scare_tiles(6) }, 6000)      setTimeout(function () { return_tiles_to(1) }, 6000)       setTimeout(function () { animate_to(2, 0) }, 6500)      setTimeout(function () { animate_to(3, 0) }, 7500)      setTimeout(function () { animate_to(4, 0) }, 8000)      setTimeout(function () { animate_to(5, 0) }, 8500)       setTimeout(function () { animate() }, 11500)    }  }   // Generate   function Tile (pos, size) {    this.pos = pos    this.size = size    this.el_pos = { x: this.pos.x * this.size, y: this.pos.y * this.size }    this.origin = { x: this.pos.x * this.size, y: this.pos.y * this.size }    this.history = []    this.history.push({ x: this.pos.x, y: this.pos.y })     function tile_at (target_pos, neighboors) {      for (t2 = 0; t2 < neighboors.length; t2++) {        if (neighboors[t2].pos.x == target_pos.x && neighboors[t2].pos.y == target_pos.y) {          return neighboors[t2]        }      }      return null    }     this.move_to = function (target_pos) {      this.pos.x = target_pos.x      this.pos.y = target_pos.y    }     var target_pos = null     this.animate_until = function (target_pos) {      if (!target_pos) { return }       this.target_pos = target_pos       var target_el_pos = { x: target_pos.x * this.size, y: target_pos.y * this.size }       var to_move = { x: target_el_pos.x - this.el_pos.x, y: target_el_pos.y - this.el_pos.y }       if (to_move.x > 0) { this.el_pos.x += 1 } else if (to_move.x < 0) { this.el_pos.x -= 1 }      if (to_move.y > 0) { this.el_pos.y += 1 } else if (to_move.y < 0) { this.el_pos.y -= 1 }       if (target_el_pos.x != this.el_pos.x || target_el_pos.y != this.el_pos.y) {        var target = this        setTimeout(function () { target.animate_until(target_pos) }, 5)      }    }     this.update = function () {      this.el_pos = { x: pos.x * this.size, y: pos.y * this.size }    }     this.offset = function () {      if (!this.target_pos) { return { x: 0, y: 0 } }      var target_el_pos = { x: this.target_pos.x * this.size, y: this.target_pos.y * this.size }      return { x: target_el_pos.x - this.el_pos.x, y: target_el_pos.y - this.el_pos.y }    }     this.neighboor_left = function () { return tile_at({ x: pos.x - 1, y: pos.y }, tiles) }    this.neighboor_right = function () { return tile_at({ x: pos.x + 1, y: pos.y }, tiles) }    this.neighboor_top = function () { return tile_at({ x: pos.x, y: pos.y + 1 }, tiles) }    this.neighboor_down = function () { return tile_at({ x: pos.x, y: pos.y - 1 }, tiles) }     this.distance_from_end = function () {      var a = this.origin.x - this.el_pos.x      var b = this.origin.y - this.el_pos.y      return Math.sqrt(a * a + b * b)    }     this.flee = function () {      var random = Math.random()       this.history.push({ x: this.pos.x, y: this.pos.y })       if (random < 0.25 && !this.neighboor_top()) {        this.pos.y += 1      } else if (random < 0.5 && !this.neighboor_down()) {        this.pos.y -= 1      } else if (random < 0.75 && !this.neighboor_right()) {        this.pos.x += 1      } else if (!this.neighboor_left()) {        this.pos.x -= 1      }    }  }  function clamp (v, min, max) { return v < min ? min : v > max ? max : v }}