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

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

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

class Canvas1 extends Canvas
	#---------------------------------------------------
	setup: ->
		@fillColor = "#202020"
		@strokeColor = 'rgba(0, 0, 0, 0.1)'
		@backgroundColor = 'rgb(240, 240, 240)'

		@pi = Math.PI * 2
		@pointMin = 5
		@pointMax = 60
		@Num = 0

		@play()

	update: ->
		pointNum = (@mouseX / @width * @pointMax + @pointMin)
		@Num += (pointNum - @Num) * 0.1

	draw: ->
		@background()
		points = @getPoints()

		l = points.length
		i = 0
		while i < l
			j = i + 1
			while j < l
				@line points[i][0], points[i][1], points[j][0], points[j][1]
				j++
			i++

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

(function() {
  var Canvas1,
    __hasProp = {}.hasOwnProperty,
    __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; };

  Canvas1 = (function(_super) {

    __extends(Canvas1, _super);

    function Canvas1() {
      return Canvas1.__super__.constructor.apply(this, arguments);
    }

    Canvas1.prototype.setup = function() {
      this.fillColor = "#202020";
      this.strokeColor = 'rgba(0, 0, 0, 0.1)';
      this.backgroundColor = 'rgb(240, 240, 240)';
      this.pi = Math.PI * 2;
      this.pointMin = 5;
      this.pointMax = 60;
      this.Num = 0;
      return this.play();
    };

    Canvas1.prototype.update = function() {
      var pointNum;
      pointNum = this.mouseX / this.width * this.pointMax + this.pointMin;
      return this.Num += (pointNum - this.Num) * 0.1;
    };

    Canvas1.prototype.draw = function() {
      var i, j, l, points, _results;
      this.background();
      points = this.getPoints();
      l = points.length;
      i = 0;
      _results = [];
      while (i < l) {
        j = i + 1;
        while (j < l) {
          this.line(points[i][0], points[i][1], points[j][0], points[j][1]);
          j++;
        }
        _results.push(i++);
      }
      return _results;
    };
  this.Canvas1 = Canvas1;

}).call(this);

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