canvas practice1 | frok from http://barmamutha.net/html5/canvas11_2.html

Particle.coffee

_g
class Hole
  constructor: () ->
    @SPRING = .1
    @FRICTION = .9
    @x = _g.document.width() / 2
    @y = _g.document.height() / 2
    @radius = 3
    @radius2 = 14
    @vec = {x: 100 * Math.random() - 50, y: 100 * Math.random() - 50}
  render: (mouseX, mouseY, h) ->
    @vec.x += (mouseX - @x) * @SPRING
    @vec.y += (mouseY - @y) * @SPRING
    @vec.x *= @FRICTION
    @vec.y *= @FRICTION
    @x += @vec.x
    @y += @vec.y

    _g.context.beginPath()
    grad = _g.context.createRadialGradient(@x, @y, @radius, @x, @y, @radius2)
    grad.addColorStop(0, "hsla(#{h}, 100%, 50%, 1)")
    grad.addColorStop(1, "hsla(#{h}, 100%, 50%, 0)")
    _g.context.fillStyle = grad
    _g.context.rect(@x - @radius2, @y - @radius2, @radius2*2, @radius2*2)
    _g.context.fill()
    _g.context.closePath()

class StarSprite
  constructor: (distance, move_speed, clear_speed, scale_speed, rotation, x, y, h) ->
    @distance = distance.min + Math.random() * (distance.max - distance.min)
    @moveSpeed = move_speed.min + Math.random() * (move_speed.max - move_speed.min)
    @clearSpeed = clear_speed.min + Math.random() * (clear_speed.max - clear_speed.min)
    @scaleSpeed = scale_speed.min + Math.random() * (scale_speed.max - scale_speed.min)
    @rotation = rotation
    @scale = 1
    @alpha = 1
    rot = @rotation + Math.random() * 120 - 60
    theta = rot * Math.PI / 180
    @h = h
    @x = x
    @y = y
    @vx = x - Math.cos(theta) * @distance
    @vy = y + Math.sin(theta) * @distance

  render: () ->
    @x += (@vx - @x) * @moveSpeed
    @y += (@vy - @y) * @moveSpeed
    @alpha -= @clearSpeed
    @scale += @scaleSpeed
    color = "hsla(#{@h}, 100%, 50%, #{@alpha})"
    _g.context.strokeStyle = color
    _g.context.beginPath()
    _g.context.arc(@x, @y, 4*@scale, 0, Math.PI*2, false)
    _g.context.stroke()
    _g.context.closePath()

class Global
  constructor: () ->
    @distance = { min:200, max:300 }
    @moveSpeed = { min:0.01, max:0.03 }
    @clearSpeed = { min:0.02, max:0.06 }
    @scaleSpeed = { min:0.02, max:0.06 }
    @rotation = 0
    @prevX = 0
    @prevY = 0
    @renderCount = 0
    @canvas
    @context
    @hole
    @h = 0
    @particles = []
    @mouseXY = {x:250, y:250}
    @document = $(document)
    @clearRect = true
  init: () ->
    me = this
    @canvas = document.getElementById 'canvas01'
    @context = @canvas.getContext '2d'
    @context.lineWidth = 2
    @context.shadowBlur = 20
    @canvas.onmousemove = (e) ->
      me.mouseXY = me.mousePosition(me.canvas, e)
    @hole = new Hole()
    @fps = 20
    me = this
    setInterval () ->
      me.render()
    , 1000/@fps
  mousePosition: (obj, e) ->
    pos = {x:0, y:0}
    pos.x += obj.offsetLeft
    pos.y += obj.offsetTop
    p = obj.offsetParent
    while (p)
      pos.x += p.offsetLeft
      pos.y += p.offsetTop
      p = p.offsetParent

    d = document

    if window.pageXOffset
      pageX = window.pageXOffset
    unless pageX?
      if d.documentElement and d.documentElement.scrollLeft
        pageX = d.documentElement.scrollLeft
    unless pageX?
      if d.body
        pageX = d.body.scrollLeft
    unless pageX?
      pageX = 0

    if window.pageYOffset
      pageY = window.pageYOffset
    unless pageY?
      if d.documentElement and d.documentElement.scrollTop
        pageY = d.documentElement.scrollTop
    unless pageY?
      if d.body
        pageY = d.body.scrollTop
    unless pageY?
      pageY = 0

    pos.x  = e.clientX - pos.x + pageX
    pos.y  = e.clientY - pos.y + pageY
    pos

  render: () ->
    unless @h is 360
      @h += 10
    else
      @h = 0
    @context.clearRect(0, 0, @document.width(), @document.height()) if @clearRect
    @context.shadowColor = "hsl(#{@h}, 100%, 50%)"

    @rotation = Math.atan2(@prevX - @hole.x, @prevY - @hole.y) * 180 / Math.PI + 90
    @prevX = @hole.x
    @prevY = @hole.y

    for [1..3]
      obj = new StarSprite(@distance, @moveSpeed, @clearSpeed, @scaleSpeed, @rotation, @hole.x, @hole.y, @h)
      if @renderCount is 4
        obj.scale = Math.random() * 10 + .8
        @renderCount = 0
      else
        obj.scale = Math.random() * .4 + .4
        @renderCount++
      @particles.push obj

    alives = []
    for p in @particles
      if p.alpha > 0
        p.render()
        alives.push p
    @particles = alives
    @hole.render(@mouseXY.x, @mouseXY.y, @h)

  toggleRect: () ->
    @clearRect = if @clearRect then false else true

_g = new Global()

$ ->
  $("#canvas01").attr("width", Math.floor($(document).width()))
  $("#canvas01").attr("height", Math.floor($(document).height()))
  _g.init()
  $("canvas").on 'click',
    () ->
      _g.toggleRect()