Flowing lights

vibrating

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: 500px;
  width: 500px;
}
#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) ->
    duration = 13000
    v = Math.random() * height + 'px';
    light.animate { 'top': '-'+v }, duration / 2
    light.animate { 'top': '+'+v }, duration / 2
    setInterval (->
      v = Math.random()* height + 'px';
      light.animate { 'top': '-'+v }, Math.random()*duration / 2
      v = Math.random()* height + 'px';
      light.animate { 'top': '+'+v }, Math.random()*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
  

 ...