p5jsのコードをsketchファイル上で実行する方法

以前TidalCyclesというコーディングによる作曲ツールで簡単なBGMを作りました。
そのときに、ジャケットもコーディングでつけれないかなと思って、
試しに、P5.sketchpluginというプラグインを使って絵をかいたら、
とても簡単にコードで絵を書けたので、今回はそのプラグインを紹介したいと思います。

そのジャケットはこちらです。

P5.sketchpluginの特徴

大量の類似パターンの繰り返しに強い

手作業だと時間がかかるような、幾何学形態の繰り返しなどに強いです。

後の加工がしやすい

作った絵に対して、

• ちょっとロゴをのせたい
• 部分的に手直ししたい

など、あとから加工する場合に最適です。

インストール

1. まずSketchがインストールされていることを確認してください。 有償ですが無料使用できます。バージョンアップしないなら1万円前後で買い切りです。
2. Githubのリリースノートから最新のp5.*.*.*.sketchplugin.zipをダウンロードしましょう。
3. zipファイルを解答して、p5.sketchpluginというファイルをダブルクリックして実行しましょう。もしSketchを起動していたら再起動してください。
4. メニュー > Plugins > p5 という項目があればインストール完了です。

コードを実行する

1. sketchを起動し、空の新規ファイルを作成してください。
2. メニュー > Plugins > p5 > Edit and run を実行しましょう。
3. 表示されたウィンドウに以下のコードを貼り付け、左上のPlayを押してみてください。コードが実行されSketch上で描画されます。

//Simple palette of pretty colors
var palette = ["#2C3E50","#FC4349","#D7DADB","#6DBCDB","#FFFFFF"]
var num = 8
function setup() {
    createCanvas(1400, 1400);
}
function draw() {
  noStroke();
  var size = width/num;
  for(y=0;y<height;y=y+size){

    for(x=0;x<width;x=x+size){

      fill(palette[floor(random(5))]);
      rect(x,y,size,size);
      if (random()>0.7){
        fill(palette[floor(random(5))]);
        push();
        translate(+size/2,+size/2);

        var temp = random();
        if(temp < 0.3) {
          ellipse(x,y,size,size);
        }else if(temp >= 0.3 && temp <= 0.6) {
          triangle(x - size/2, y + size/2, x + size/2, y + size/2, x, y - size/2);
        }else if(temp > 0.6 && temp <= 0.7) {
          triangle(x - size/2, y - size/2, x - size/2, y + size/2, x + size/2, y);
        }else {
          triangle(x - size/2, y - size/2, x + size/2, y - size/2, x, y + size/2);
        }

        pop();
      }
    }
  }
}

サポートされているメソッド

ソースを見ると以下の箇所のmethodがサポートされているようです。

• メイン関数 ... 代表的な関数のみ移植されていますね
• 図形描画 ... サポートしている2Dプリミティブの関数です
• 未サポート ... サポートしていない関数が列挙されています

どこでコードを書くか

Sketchのプラグイン上でコードを書く

簡単に実行できますし、最終的には必ずここで実行して試します。
ただし、Sketchファイル自体に保存できないので、
Sketchファイルとは別にp5Sketch.jsなどように、
JavaScriptファイルとしてSketchファイルと同じ場所に保存することをおすすめします。

p5jsオンラインエディタ上で書く

p5jsオンラインエディタはブラウザ上で実行できる公式のオンラインエディタです。
ファイルをダウンロードできますし、
アカウントを作ればオンラインで保存することもできます。
はSketchのプラグイン上で動くか確認しながら書いていきましょう。