html5-canvas-study-2.coffee

###
# Class.Canvas
###
class Class.Canvas
  constructor: (options)->
    # Variables
    @items = []
    @fps = 30
    # Context initialize
    until options? then return false
    until options.canvasId? then return false
    @el = document.getElementById options.canvasId
    @width = @el.width = if options.width? then options.width else 800
    @height = @el.height = if options.height? then options.height else 800
    @ctx = @el.getContext("2d")
    # Origin styles
    @ctx.font = '18px sans-serif'
    @ctx.strokeStyle = '#000'
    @ctx.lineJoin = 'round'
    @ctx.save()
    # イベントリスナーの登録
    @events()
    # Animation start
    @startAnimation()
  events: =>
    @el.addEventListener 'tick', @onTick, false
  tick: =>
    @el.dispatchEvent new Event('tick')
  onTick: =>
    @draw()
  startAnimation: =>
    @draw()
    @interval = setInterval @tick, Math.floor(1000/@fps)
  stopAnimation: =>
    if @interval? then clearInterval @interval
  addItem: (_id, _instance, _zIndex)=>
    unless _id?
      console.error 'undefind "id" => You must set the text that becomes the ID to the first argument.'
      return false
    unless _instance?
      console.error 'undefind "instance" => You must set the instance of Path Class to the second argument.'
      return false
    unless _zIndex?
      _maxZIndexItem = _.max @items, (item)->
        item.zIndex
      _zIndex = _maxZIndexItem.zIndex + 1
    @items.push
      id: _id
      instance: _instance
      zIndex: _zIndex
  removeItem: (_id)=>
    _item = _.findWhere(@items, {id: _id})
    if _item
      @items = _.without @items, _item
    else
      false
  draw: =>
    # Clear the canvas
    @ctx.clearRect 0, 0, @width, @height

    if @items.length > 0
      # zIndex 順に整列
      _sortItems = _.sortBy @items, 'zIndex'
      for item in _sortItems
        item.instance.draw()



###
# Class.WavePath
###
class Class.WavePath
  constructor: (@canvas, @originX, @originY)->
    until @canvas? then return false
    until @originX? then return false
    until @originY? then return false
    @ctx = @canvas.ctx
    @frame = 0
    # インスタンス毎の差分
    @periodicityRange = Math.random() * 400
    @amplitudeRange = Math.random() * 2 * Math.PI
    @style =
      fillStyle: "rgba(#{Math.floor(Math.random() * 200)},#{Math.floor(Math.random() * 200)},255,0.3)"
    # イベントリスナーの登録
    @events()
  events: =>
    @canvas.el.addEventListener 'tick', @onTick, false
  onTick: =>
    @frame++
  draw: =>
    # 描画前のスタイルを保存
    @ctx.save()
    # スタイルのセット
    @ctx.fillStyle = @style.fillStyle
    # パスの描画
    @ctx.beginPath()
    @drawPath()
    @ctx.closePath()
    @ctx.fill()
    # 描画前のスタイルを復元
    @ctx.restore()
  drawPath: =>
    t = @frame * 2 * ( Math.PI / 180 )
    # 周期
    _periodicity = 200 + @periodicityRange
    # 振幅
    _amplitude = 30 * Math.sin (t + @amplitudeRange)/3
    # 
    _x = t
    _y = Math.sin t
    # 初期位置
    @ctx.moveTo @originX, @originY + _y * _amplitude
    # 
    _i = @originX
    while _i <= @canvas.width
      x = t + (_i - @originX) / _periodicity
      y = Math.sin(x)
      @ctx.lineTo(_i, @originY + y * _amplitude)
      _i += 10
    @ctx.lineTo(_i, @canvas.height)
    @ctx.lineTo(@originX, @canvas.height)



###
# Run
###
$ ->
  window.Canvas = new Class.Canvas
    canvasId: 'canvas'
    height: 300
  Canvas.addItem 'sin0', new Class.WavePath(Canvas, 0, 150), 0
  Canvas.addItem 'sin1', new Class.WavePath(Canvas, 0, 150), 1
  Canvas.addItem 'sin2', new Class.WavePath(Canvas, 0, 150), 2
  Canvas.addItem 'sin3', new Class.WavePath(Canvas, 0, 150), 3
  Canvas.addItem 'sin4', new Class.WavePath(Canvas, 0, 150), 4