Processingで作品をつくった!
みんなに見てほしい!触ってほしい!遊んでほしい!
というわけでwebで公開するためにp5.jsに書き換えてみましょう〜!

p5.jsとは


p5.jsはProcessingの特徴を受け継いだJavaScriptライブラリです。
home | p5.js
Processingの文法と一部は共通で、webでも柔軟にクリエイティブな表現ができるようになっています。

同じようなライブラリでProcessing.jsというライブラリもありましたが、
継続的なメンテナンスがされていないため、現在ではp5.jsの利用がオススメです。
Processing系作品投稿サービスのOpenProcessingでもProcessing.jsでの投稿はdeprecated(非推奨)とされています。
Processingjs Deprecation Notice | OpenProcessing FAQ

エディタの準備


p5.jsには公式でweb上で動かせるエディタもあります。
p5.js Web Editor
有志によって日本語でも利用できるようになりました。
右上の「English ▼」を押すと言語メニューが出てくるので、そこから「日本語」を選択すると切り替わります。
エディタではコーディングから実行、コードの保存などひととおりのことができます。
p5.jsに初めて触れる場合はここからスタートするのがオススメです!

お気に入りのエディタがある人はそれを利用してもokです!
CDNから利用できるのでそちらから読み込むとスムーズだと思います。
p5 CDN by jsDelivr - A CDN for npm and GitHub

html側はこんな感じで用意して、「sketch.js」側にp5.jsとしてのコードを書く構成です。


See the Pen
p5_html
by reona396 (@reona396)
on CodePen.



Processingからp5.jsへの書き換え


まずはベーシックなスケッチから書き換えてみましょう。
Processingのコードがこんな感じの時…


p5.jsではこんな感じに書き換えます。


See the Pen
p5_basic
by reona396 (@reona396)
on CodePen.



書き換えのポイントは次のとおりです。

* 関数の記述を書き換える。例: void setup → function setup
* size → createCanvas に書き換える
* 変数の定義時にconstやletを利用する

詳しく解説していきます!

関数の書き換え


Processingのコードが次のような時…


p5.jsなら次のように書きます。


See the Pen
p5_func
by reona396 (@reona396)
on CodePen.



何でもfunctionですね。引数の型もとっぱらってます。
コンソールに出力しているのでブラウザのデベロッパーツールを開いて確認してみてください。

名称が異なる関数


Processingとp5.jsとで名称が異なる主な関数は次のようなものがあります。
コード書き換えの際には置き換えましょう。

Processing
p5.js
size()createCanvas()
pushMatrix()push()
popMatrix()pop()

また、(現状)p5.jsにだけ導入されている機能としてangleMode()が挙げられます。
angleMode()は角度の記述方法を切り替えられる関数です。
Processingで複数回radians()で変換していた場合、p5.jsではangleMode()を導入するのがオススメです。
例えばProcessingで次のように書いている時、


p5.jsならこうするとすっきりします。


See the Pen
p5_angle
by reona396 (@reona396)
on CodePen.



変数の定義


Processingでは型ごとに異なりましたが、p5.jsではletとconstを利用します。
let - JavaScript | MDN
let 文はブロックスコープのローカル変数を宣言します。任意で値を代入して初期化できます。
const - JavaScript | MDN
定数 (const) は、let キーワードを使って定義する変数と同じ、ブロックスコープを持ちます。
定数の値は、再代入による変更はできず、再宣言もできません。

クラスの書き換え


クラスを利用しているコードの書き換えに挑戦してみます。
(元ネタ : Array of Objects - examples | p5.js)

Processingならこんな感じですかね…


p5.jsならこんな感じ!


See the Pen
p5_class
by reona396 (@reona396)
on CodePen.



画像を利用したスケッチ


画像を利用している場合は次のような書き換えになります。
ProcessingはPImageを利用しています。


p5.jsではpreload()を利用します。


See the Pen
p5_image
by reona396 (@reona396)
on CodePen.



p5.jsの作品をwebで展示しよう


コードをProcessingからp5.jsへ書き換えたら、webで作品を展示してみましょう!
↓の記事にp5.jsを展示できるサービスをまとめたので、参考にしてみてください!
p5.js のスケッチを展示できるサービスを試してまとめてみた : だらっと学習帳

投稿したら「#p5js」のハッシュタグをつけてツイートするのがオススメです!!!
p5.jsのコミュニティを盛り上げていきましょう〜〜〜!!!

参考リンク


* get started | p5.js
* Processing transition · processing/p5.js Wiki
* Processingjs Deprecation Notice | OpenProcessing FAQ
* Processingからp5.jsへの移植は(難しいことしなければワリと)簡単 – infosmith.biz
* P5 mode
* こーひーをぶんなぐれ! - P5.jsの基礎
* ArrayObjects \ Examples \ Processing.org