2012.07.20 | mucho
夏の暑さに負けるのは困るけど、勝てる見込みもなく。
こんにちは、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
