More than 5 years have passed since last update.

p5.js + CoffeeScriptの開発環境構築

Last updated at 2018-04-12Posted at 2018-03-07

CodePenにてp5.jsで遊んでいたが、コードが大きくなってきたのでローカル環境構築。「とりあえず自分用プレイグラウンドができればよい」という状況。

今時functionとか打っていられないのでCoffeeScriptを使いたい。もちろん最近のESはfunctionなど書かなくてよいが、const draw = () => {}ではp5.jsが作動しない。(thisの問題だろうか)

ビルドツールにはParcelを使用する。なお、各ライブラリ・ツールの解説はしない。

必要なパッケージをインストールする。

$ mkdir p5
$ cd ./p5
$ npm init
$ npm i --save p5 coffeescript parcel-bundler

npm startにparcelコマンドを設定。

package.json

{
  // ...
  "scripts": {
    "start": "parcel index.html"
  },
  // ...
}

index.htmlでindex.coffeeを読み込む。

index.html

<body>
  <script src="index.coffee"></script>
</body>

index.coffeeでp5.jsを読み込み、setup()やdraw()を書く。なお、通常モードで使う方法について深く調べてはいない。Parcelなので、そんな方法はないかもしれない。

index.coffee

import p5 from 'p5'

s = (p) ->
  p.draw = ->
    p.line 0, 0, p.width, p.height

myp5 = new p5 s

それでは、よきp5.jsライフを。

$ npm start