====== 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 モードに切り替わります．記述したプログラムを実行するとデフォルトのブラウザが開いて画面が描画されます．
{{:processing:pasted:20200106-203549.png}}
試しに下記プログラムをコピペして動作を確認してみましょう．
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になります．試しに下記リンクに飛んでみてください．
* https://editor.p5js.org/tetsuakibaba/sketches/8ygaoJ6Aj
先ほど作成したモンドリアンのコンポジションが確認できたと思います，これは同時に編集もできます．使い方は下記動画を参照してください．ログインせずとも利用できますが，ファイルの保存やshare等の機能を利用するにはアカウントを作成し，ログインしておくとよいでしょう．
{{youtube>x1rJJRVTpAI?medium}}
==== Visual Studio Code で利用する ====
一番手軽なのはprocessingのp5jsモードを利用するのがよいのですが、そもそもprocessingが起動しなくなっちゃったり、processingの使いづらいエディタが気に入らなかったりすることもあるでしょう。最近ではVisual Studio Code（以下vscode）が一般的に広く利用されているため、このvscodeを利用してのp5js開発をすすめるための開発環境構築手順を示します。
- [[https://code.visualstudio.com/download|Visual Studio Codeのダウントーロとインストール]]
- vscodeを立ち上げて、ExtensionsからLive Server、p5js Snippetsをインストールする
をまず最初に準備してください。次にファイルを準備します。hogehogeというフォルダをデスクトップに作成して、以下のファイルを保存します。
html, body {
margin: 0;
padding: 0;
}
canvas {
display: block;
}
function setup() {
createCanvas(400, 400);
}
function draw() {
background(220);
}
以下のようなファイル構成になったかと思います。このhogehogeフォルダをvscodeで開きましょう。
hogehoge
├── index.html
├── sketch.js
└── style.css
では最後にsketch.jsを選択した後、vscodeの右下に Go Liveなる文言が表示されているので、これをクリックしてみてください。
{{:processing:p5js:pasted:20210309-022912.png}}
以下のようにブラウザが開き、プログラムが実行できるようになりました。
{{:p5js:pasted:20210309-090709.png}}
===== syntax（構文）について =====
Processignを触った事がある人は参考にしてください。p5.jsはjavascriptなので、javascriptの構文に従いますが、processingと比較した場合はいかに載せておきます。
下記のオフィシャル解説がよくまとまっているので，このページを参照してください．
* https://github.com/processing/p5.js/wiki/Processing-transition
このページでも簡単にまとめておきます．
==== 最初の雛形 ====
最初の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は初めて，という方にチートシート（よく使う項目を見やすく一枚のスライドにまとめたもの）があるので，以下リンクを利用するとよいでしょう．
* https://bmoren.github.io/p5js-cheat-sheet/ja.html