夏の暑さに負けるのは困るけど、勝てる見込みもなく。
こんにちは、muchoです。
以前、若きホープのきょんたろ君がアップしたHtml5 Canvas Templete ver.1を
クラスっぽく作り直してみました。
ついでにcoffee scriptで書いてみました。

Processing.jsを試してみたんですが、IE8でエラーが出て動かなかったため、
簡易Processing風なテンプレートを自作することにした次第です。
そんな背景があるので、記述の仕方はProcessingになるべくあわせています。

基本となるCanvasクラスを拡張して書くことを前提にしています。
coffee scriptだとこんな感じ

view source
print?
01
class Canvas1 extends Canvas
02
    #---------------------------------------------------
03
    setup: ->
04
        @fillColor = "#202020"
05
        @strokeColor = 'rgba(0, 0, 0, 0.1)'
06
        @backgroundColor = 'rgb(240, 240, 240)'
07
 
08
        @pi = Math.PI * 2
09
        @pointMin = 5
10
        @pointMax = 60
11
        @Num = 0
12
 
13
        @play()
14
 
15
    update: ->
16
        pointNum = (@mouseX / @width * @pointMax + @pointMin)
17
        @Num += (pointNum - @Num) * 0.1
18
 
19
    draw: ->
20
        @background()
21
        points = @getPoints()
22
 
23
        l = points.length
24
        i = 0
25
        while i < l
26
            j = i + 1
27
            while j < l
28
                @line points[i][0], points[i][1], points[j][0], points[j][1]
29
                j++
30
            i++

吐き出されたJSはこんな感じ

view source
print?
01
(function() {
02
  var Canvas1,
03
    __hasProp = {}.hasOwnProperty,
04
    __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
05
 
06
  Canvas1 = (function(_super) {
07
 
08
    __extends(Canvas1, _super);
09
 
10
    function Canvas1() {
11
      return Canvas1.__super__.constructor.apply(this, arguments);
12
    }
13
 
14
    Canvas1.prototype.setup = function() {
15
      this.fillColor = "#202020";
16
      this.strokeColor = 'rgba(0, 0, 0, 0.1)';
17
      this.backgroundColor = 'rgb(240, 240, 240)';
18
      this.pi = Math.PI * 2;
19
      this.pointMin = 5;
20
      this.pointMax = 60;
21
      this.Num = 0;
22
      return this.play();
23
    };
24
 
25
    Canvas1.prototype.update = function() {
26
      var pointNum;
27
      pointNum = this.mouseX / this.width * this.pointMax + this.pointMin;
28
      return this.Num += (pointNum - this.Num) * 0.1;
29
    };
30
 
31
    Canvas1.prototype.draw = function() {
32
      var i, j, l, points, _results;
33
      this.background();
34
      points = this.getPoints();
35
      l = points.length;
36
      i = 0;
37
      _results = [];
38
      while (i < l) {
39
        j = i + 1;
40
        while (j < l) {
41
          this.line(points[i][0], points[i][1], points[j][0], points[j][1]);
42
          j++;
43
        }
44
        _results.push(i++);
45
      }
46
      return _results;
47
    };
48
  this.Canvas1 = Canvas1;
49
 
50
}).call(this);

ソースをGithubにアップしてみました。まだ慣れてないのでgitドキドキ
https://github.com/devjam/canvas.js