Flowing lights

align back regular

by jshacker

HTML

<div class="lights">Click at me</div>
<button id="light-switch-off" class="light-switches">turn off</button>
<button id="light-switch-on" class="light-switches">turn on</button>

SCSS

body {
    height: 400px;
    width: 400px;
}
#light-switches { z-index: 1000; }
.lights {
    position: fixed;
    top: 30px;
    &:hover{ border: thin solid red;}
    :hover{ border: thin solid purple; }
}

.light {
    position: fixed;
    border-radius: 50%;
}

CoffeeScript

$ ->
  id = undefined

  getRandomPlane = ->
    parseInt Math.random() * 100

  height = $('.lights').parent().height()
  width = $('.lights').parent().width()

  animation = (light) ->

    val = ->
      [
        '-' + parseInt(Math.random() * height) + 'px'
        '+' + parseInt(Math.random() * width) + 'px'
      ][parseInt(Math.random() * 2) % 2]

    duration = 10000
    v = val()
    light.animate { 'top': v }, duration / 2
    light.animate { 'left': v }, duration / 2
    setInterval (->
      v = val()
      light.animate { 'left': v }, duration / 2
      return
    ), duration
    setInterval (->
      light.animate { 'top': v }, duration / 2
      return
    ), duration
    return

  createNewLight = ->
    light = undefined
    light = $('<div class="light" id="' + getNextId() + '"></div>')
    plane = getRandomPlane()
    w = getRandomWidth()
    bgcolor = getRandomColor()
    top = getRandomTop()
    top = if top - w < 0 then top + w else if top + w > height then top - w else top
    left = getRandomLeft()
    left = if left - w < 0 then left + w else if left + w > width then left - w else left
    light.css
      'z-index': plane
      'width': w
      'height': w
      'background-color': bgcolor
      'top': top
      'left': left
    animation light
    light.appendTo '.lights'
    return

  ((h, w) ->
    $('.lights').css
      height: h
      width: w
    return
  ) height, width

  getRandomLeft = ->
    Math.random() * width

  getRandomTop = ->
    Math.random() * height

  getRandomWidth = ->
    w = undefined
    w = Math.random() * 100
    if w < 20
      w += 20
    parseInt w

  id = 1

  getNextId = ->
    id++
    id

  getRandom8BitInt = ->
    parseInt Math.random() * 255

  getRandomColor = ->
    'rgba(' + getRandom8BitInt() + ', ' + getRandom8BitInt() + ', ' + getRandom8BitInt() + ', ' + Math.random() + ')'

  $('.lights').on 'click', ->
    createNewLight()
  i = 0
  while i < 100
    $('.lights').trigger 'click'
    i += 1
...