p5.jsでCoffeeScriptを自動コンパイルさせると楽しい、が・・

8712 ワード
CoffeeScript JavaScript p5.js JavaScript テキストリンク

クリエイティブコーディングといえばCoffeeScriptなんじゃね？ということで、CoffeeScriptの自動コンパイル環境（コピー→コンパイル）を作ってみましたが(p5との相性？的に)色々手こずったのでメモ。

まずは、してない人はnode.jsをインストールしましょう。

次にnpmよりCoffeeScriptをインストールします。

sudo npm install -g coffee-script

大まかな流れ

1 .「myScript.coffee」でcoffeeのコーディングをする
2 .「myScript.coffee」にウォッチャーをつける（後述）
3 . coffeeを保存するたびに「myScript.js」が生成される(htmlからはmyScript.jsをインクルードしておく)
4 . 楽しい

自動コンパイル時の注意点

編集しているmyScript.coffeeファイルにウォッチャーをつけることで、保存したタイミングで逐次コンパイルしてくれます。
この時に注意！「-b」＝bare（まっさらな）オプションをつけましょう。これつけないとコード全体がクローズされてp5.jsが動きません。これが伝えたくてこの記事を書いたようなもんです。

coffee --watch --compile -b ./myScript.coffee

そうするとmyScript.jsというファイルがmyScript.coffeeを保存するたびに自動生成されます。これをhtmlからインクルードすれば楽しいです。

クリエイティブコーディング感（）

こんなすっきりしますよ、と。

myScript.coffee

obj = undefined

MovingObj = (x, y) ->
  @pos = createVector(x, y)
  @vel = createVector(1, 1)
  @acc = createVector(1, 0)

  @move = ->
    @vel.add @acc
    @pos.add @vel
    @acc.mult 0
    return

  @draw = ->
    ellipse @pos.x, @pos.y, 30, 30

  return

setup = ->
  createCanvas 600, 400
  smooth()
  obj = new MovingObj()
  return

draw = ->
  background 205
  obj.move()
  obj.draw()
  return

自動コンパイル後。thisとか@で表すとすっきり。

myScript.js
// Generated by CoffeeScript 1.9.2
var MovingObj, draw, obj, setup;

obj = void 0;

MovingObj = function(x, y) {
  this.pos = createVector(x, y);
  this.vel = createVector(1, 1);
  this.acc = createVector(1, 0);
  this.move = function() {
    this.vel.add(this.acc);
    this.pos.add(this.vel);
    this.acc.mult(0);
  };
  this.draw = function() {
    return ellipse(this.pos.x, this.pos.y, 30, 30);
  };
};

setup = function() {
  createCanvas(600, 400);
  smooth();
  obj = new MovingObj();
};

draw = function() {
  background(205);
  obj.move();
  obj.draw();
};

おしまい。

awk高速コピーlddライブラリファイル依存性の巧みな使用
new編