文書の過去の版を表示しています。
p5.jsの開発環境
Processing を javascript 形式でコーディングすることで簡単にブラウザ上でプロセッシングを動作させることができます.様々なやり方でブラウザ上での実装ができます.ここではそのやり方と最初に抑えておくべきjsでのポイント(java-Processingとjs-Processingの違い)を記述します.これまでProcessingを利用して行ってきたことをそのままブラウザで動かそう程度のことであれば、以下をよく読んでおけばほとんど問題ないかなと思います。ただし実はそれだけではP5jsの恩恵を有効に活用できているとは言えません。p5jsのすごいところは、html, cssとjsの組み合わせをProcessingライクに実装できる点にあります。これまではjavascriptや周辺ライブラリを利用して同様のこともできましたが、p5.jsを使うことで、様々なアプリケーションをウェブ上に容易に実装できるようになるのです。
このページはその導入として、まずはProcessingからp5.jsへ移行するための必要最低限の知識を共有します。
種類
Processing IDEからp5.jsモードに切り替える
Processingに慣れていればこれが一番簡単かもしれません.下記のようにp5.jsを選択すれば js モードに切り替わります.記述したプログラムを実行するとデフォルトのブラウザが開いて画面が描画されます.
試しに下記プログラムをコピペして動作を確認してみましょう.
function piet(x0, y0, x1, y1, N) { if (N == 0) { let sw = 10; //this is the stroke width for the rectangle's border let c = [[255,0,0], [0,0,255], [0,255,255], [255,255,0] ]; fill(c[int(random(c.length))]); stroke(0); strokeWeight(sw); rect (x0, y0, x1-x0, y1-y0); } else { let i = int(random(x0, x1)); //Pick a random x coordinate inside the current rectangle let j = int(random(y0, y1)); //Pick a random y coordinate inside the current rectangle piet(x0, y0, i, j, N-1); // Recurse on upper left rectangle piet(i, y0, x1, j, N-1); // Recurse on upper right rectangle piet(x0, j, i, y1, N-1); // Recurse on lower left rectangle piet(i, j, x1, y1, N-1); // Recurse on lower right rectangle } } function setup() { createCanvas(400, 400); piet(0,0,400,400,2); } function draw() { }
p5.js Web Editor を利用する
利用するブラウザはchromeを利用してください。トラブルが起きた場合にブラウザを統一しておくことで問題解決が早くなりますので。
上記が伝統的なProcessing IDEを利用した場合の実行ですが,2018年8月31日にProcessing Foundationからp5.js Web Editorがアナウンスされたことで,環境構築の手間が大きく省かれました.端的に言えば,ブラウザで動作するProcessing IDEになります.試しに下記リンクに飛んでみてください.
先ほど作成したモンドリアンのコンポジションが確認できたと思います,これは同時に編集もできます.使い方は下記動画を参照してください.ログインせずとも利用できますが,ファイルの保存やshare等の機能を利用するにはアカウントを作成し,ログインしておくとよいでしょう. x1rJJRVTpAI
Visual Studio Code で利用する
一番手軽なのはprocessingのp5jsモードを利用するのがよいのですが、そもそもprocessingが起動しなくなっちゃったり、processingの使いづらいエディタが気に入らなかったりすることもあるでしょう。最近ではVisual Studio Code(以下vscode)が一般的に広く利用されているため、このvscodeを利用してのp5js開発をすすめるための開発環境構築手順を示します。
- vscodeを立ち上げて、ExtensionsからLive Server、p5js Snippetsをインストールする
をまず最初に準備してください。次にファイルを準備します。hogehogeというフォルダをデスクトップに作成して、以下のファイルを保存します。
- index.html
<!DOCTYPE html> <html lang="en"> <head> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.2.0/addons/p5.sound.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css"> <meta charset="utf-8" /> </head> <body> <script src="sketch.js"></script> </body> </html>
以下のようなファイル構成になったかと思います。このhogehogeフォルダをvscodeで開きましょう。
hogehoge ├── index.html ├── sketch.js └── style.css
では最後にsketch.jsを選択した後、vscodeの右下に Go Liveなる文言が表示されているので、これをクリックしてみてください。
ブラウザが開き、プログラムが実行できるようになりました。
syntax(構文)の違い
下記のオフィシャル解説がよくまとまっているので,このページを参照してください.
このページでも簡単にまとめておきます.
最初の雛形
最初のsetupとdrawは次のようになります.
// Processingの場合 void setup(){} void draw(){}
// p5.jsの場合 function setup(){} function draw(){}
型の宣言
varとletを用いて変数を指定します.従来のマニュアル型指定ではなく自動型指定になるので,勝手によろしくやってくれるわけです.で,varとletは何が違うかというと,スコープが異なる点です.ブロックが変わると参照できないのがletで参照できるのがvarです.もうちょっと簡単にいうと,global変数はvarでローカル変数はletで宣言すると思っておけば良いです.直感的に言い換えると、そこでしか使わないのがletで、他でも使うものをvarとして考えておいてください。プログラム初学者は最初は全部varだっていいと思います。
classのsyntax
javascriptにおいてもclassは利用できますが,微妙に書き方が異なりますので,覚えておきましょう.クラス内のメンバ変数の宣言はjavascriptではコンストラクタ内にてthis参照付きで宣言してあげるとそれがメンバ変数として利用できるようになります.
// Processing class Hello{ Hello(String _message) { message = _message; } void echo(){ print(message); } String message; } Hello hello = new Hello("Hello World"); void setup() { hello.echo(); } void draw() { }
// p5.js class Hello { constructor(message) { this.message = message; } echo() { print(this.message); } } var hello = new Hello("Hello World"); function setup() { hello.echo(); } function draw() { }
チートシート
Processingに慣れているけど,p5.jsは初めて,という方にチートシート(よく使う項目を見やすく一枚のスライドにまとめたもの)があるので,以下リンクを利用するとよいでしょう.