2012.07.20 | 

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

2012.07.06 | 

どうも、kaminalyです。
「てめぇの馬鹿さ加減にはなぁ、父ちゃん情けなくて涙が出てくらぁ」
ということがあったので訂正します。

この前、「CoffeeScriptでstatic/private/publicなメンバ/メソッドをもったクラスのつくりかた」
というメモを書いたのですが、
最終的に落ち着いた方法だと、片手落ちというか、かなり問題があることがわかったので、
再度メモします。

(続きを読む...)

2012.06.29 | 

ども、2日連続でエントリしちゃうぜ!kaminalyです。
今日は、色々とハマったのでメモ。

Socket.ioを使った開発をCoffeeScriptで楽しく進めていた。
ChromeとFirefoxで検証して問題なかったが、
さすがIE、華麗に地獄を味合わせてくれた。
ガッデム!
※全部IEのせいにしたいけど本当は違う。

(続きを読む...)

2012.06.27 | 

///
このメモの方法だと問題がある事がわかり、
改訂版のメモを書きました。
[改訂]CoffeeScriptでstatic/private/publicなメンバ/メソッドをもったクラスのつくりかた
以下のメモを読んでから改訂版に飛ぶもよし、すぐに改訂版に飛ぶもよし。
///

JavaScriptを勉強するのを避け
CoffeeScriptを今更勉強しているいじってる。
※勉強しているレベルではなかった事が今回判明。知らないこと大杉(汗

アルミカン氏の
JavaScriptでstatic/private/publicなメンバ/メソッドをもったクラスのつくりかた
を読んで、

おろ?Coffeeでなんとなくクラス使ってたが、
吐き出されたコードどうなんだぃ?
おもむろにCoffeeでクラスを書き始めるが・・・
あれ、privateな変数とメソッドはどう書いたらいいんだべ?

(続きを読む...)

2012.04.24 | 

おはようございます。muchoです。

前回、MacOS版SublimeText2でCoffeeScriptを使えるようにしましたが、
Windowsでも同じようにしてしまおうということで、やってみました。
これまたいつの日か同じことをやることになりそうなのでメモ。

Node.jsもPythonも入ってない前提で

1.Python2.7のインストール
http://www.activestate.com/activepython/downloads
2.7.2.5のインストーラーを選択
デフォルトで"C:\Python27"にインストールされます。
とりあえずそのままやってみました。
コマンドプロンプトを起動して、python --version と打ってバージョン番号が
出ればPythonは無事完了。

2.Node.jsのインストール
http://nodejs.org/
私が試したときは0.6.15
何の選択肢も出ずに"C:\Program Files\nodejs"にインストールされます。
ええー。そこでいいのかー?と思ったんですが、これまたそのまま続行。
再びコマンドプロンプトを起動して、node -v か、npm -v
うまくいっていればバージョンが表示されます。
なんとnpmも一緒にインストールされてくれてました。ステキ。

3.CoffeeScriptのインストール
コマンドプロンプトで



npm install -g coffee-script


これで "C:\Users\<ユーザー名>\AppData\Roaming\npm\"にインストールされます。

4.SublimeText2にCoffeeScript用のパッケージを追加する
・コマンドパレットを起動して(
メニュー - Tools - Command Palette(Ctrl+Shift+P)
)
・Package Control: Install Package を選択
・パッケージの一覧からCoffeeScriptを選択
・メニュー - Preference - Browse Packages... を選択
・"Packages\CoffeeScript\Commands\CoffeeScript.sublime-build"を開いて
 下記のように修正



 {
"path": "$HOME/bin:/usr/local/bin:$PATH",
"cmd": ["coffee","-c","$file"],
"file_regex": "^(...*?):([0-9]*):?([0-9]*)",
"selector": "source.coffee"
}
↓
{
"cmd": ["coffee.cmd","-c","$file"],
"file_regex": "^(...*?):([0-9]*):?([0-9]*)",
"selector": "source.coffee"
}


以上で環境は出来上がりました。
確認のために以下のような適当なスクリプトを書いて
"hello.coffee"とか名前を付けて保存



console? log? "Hello world"


メニュー - Tools - Build System で CoffeeScriptを選択し、
メニュー - Tools - Build(ctrl+b)でビルド

うまくいけば[Finished]と表示されて、hello.coffeeと同じフォルダに
hello.jsが出来てるはずです。