Test Number 1

<canvas id="c"></canvas>

body {

  background: #EEE;

}

###

  Text masked spring particles

    Author: Kushagra Gour a.k.a. Chin Chang

    (@chinchang457)

###

# requestanimationframe polyfill

window.requestAnimFrame = (->

  return  window.requestAnimationFrame       || 

      window.webkitRequestAnimationFrame || 

      window.mozRequestAnimationFrame    || 

      window.oRequestAnimationFrame      || 

      window.msRequestAnimationFrame     ||  

      (callback) ->

      window.setTimeout callback, 1000 / 60

)();

PI_BY_180 = Math.PI / 180

# variables

canvas = null

ctx = null

num_particles = 500

display_list = []

last_time = null

spring_constant = 0.2

damping_constant = 0.08

colors = ['#0066CC']

W = window.innerWidth

H = window.innerHeight

cx = W / 2

cy = H / 2

time = 1

init = (e) ->

  canvas = document.getElementById 'c'

  ctx = canvas.getContext '2d'

  canvas.width = W

  canvas.height = H

  canvas.addEventListener 'mousemove', onMouseMove

  # create particles

  for i in [10...W/2] by 10

    for j in [0...10]

      display_list.push new Particle(i)

onMouseMove = (e) ->

  mx = e.offsetX || e.pageX

  my = e.offsetY || e.pageY

  time = mx / W

animate = ->

  animationLoop()

  requestAnimFrame animate

animationLoop = ->

  if !last_time then last_time = (new Date).getTime()

  current_time = (new Date).getTime()

  dt = (current_time - last_time) / 1000

  last_time = current_time

  window.fps = 1 / dt

  draw()

  update()

draw = ->

  ctx.fillStyle = "#111"

  ctx.fillRect 0, 0, W, H

  for child in display_list

    continue if typeof child.draw isnt 'function'

    ctx.save();

    ctx.translate child.x, child.y unless isNaN child.x or isNaN child.y 

    ctx.scale child.scale_x, child.scale_y unless isNaN child.scale_x or isNaN child.scale_y 

    ctx.globalAlpha = child.alpha unless isNaN child.alpha 

    child.draw()

    ctx.restore();

update = ->

  # update particles

  for child in display_list

    child.update() if typeof child.update is 'function'

class Particle

  constructor: (@radius = 1) ->

    @theta = ~~(Math.random() * 360)

    @speed_theta = 0.5 + Math.random() * @radius * 0.005

    @alpha = @radius / (W / 2)

    if Math.random() > 0.5 then @dir = 1 else @dir = -1

    @color = colors[0]

    @scale_x = @scale_y = 0.5

  draw: ->

    #ctx.drawImage canvas2, 0, 0

    ctx.fillStyle = @color

    ctx.beginPath()

    ctx.arc 0, 0, @radius*0.04, 0, Math.PI*2, true

    ctx.fill()

  update: ->

    @scale_x += @dir * 0.06 * time

    @scale_y += @dir * 0.06 * time

    @theta += @speed_theta * time

    @x = cx + @radius * Math.cos @theta * PI_BY_180

    @y = cy + @radius * Math.sin @theta * PI_BY_180

    if @scale_x > 1.5

      @scale_x = 1.5

      @dir = -1

    else if @scale_x < 0

      @scale_x = 0

      @dir = 1

  reset: ->

    @dir *= -1

    @scale_x = @scale_y = 0.5

    @color = colors[~~(Math.random() * colors.length)]

  reposition: ->

    @ox = @x = ~~(Math.random() * W)

    @oy = @y = 100 + ~~(Math.random() * 5)

init()

animate()