Processingで作品をつくった！
みんなに見てほしい！触ってほしい！遊んでほしい！
というわけでwebで公開するためにp5.jsに書き換えてみましょう〜！
【2021/03/15 追記】
3Dの項目を追記
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としてのコードを書く構成です。
まずはベーシックなスケッチから書き換えてみましょう。
Processingのコードがこんな感じの時…
p5.jsではこんな感じに書き換えます。
書き換えのポイントは次のとおりです。
* 関数の記述を書き換える。例: void setup → function setup
* size → createCanvas に書き換える
* 変数の定義時にconstやletを利用する
詳しく解説していきます！
Processingのコードが次のような時…
p5.jsなら次のように書きます。
何でもfunctionですね。引数の型もとっぱらってます。
コンソールに出力しているのでブラウザのデベロッパーツールを開いて確認してみてください。
Processingとp5.jsとで名称が異なる主な関数は次のようなものがあります。
コード書き換えの際には置き換えましょう。
また、(現状)p5.jsにだけ導入されている機能としてangleMode()が挙げられます。
angleMode()は角度の記述方法を切り替えられる関数です。
Processingで複数回radians()で変換していた場合、p5.jsではangleMode()を導入するのがオススメです。
例えばProcessingで次のように書いている時、
p5.jsならこうするとすっきりします。
Processingでは型ごとに異なりましたが、p5.jsではletとconstを利用します。
let - JavaScript | MDN
クラスを利用しているコードの書き換えに挑戦してみます。
(元ネタ : Array of Objects - examples | p5.js)
Processingならこんな感じですかね…
p5.jsならこんな感じ！
画像を利用している場合は次のような書き換えになります。
ProcessingはPImageを利用しています。
p5.jsではpreload()を利用します。
3Dで描画している作品の場合、細々と書き方が異なります。
Processingの場合はこんな感じ。
p5.jsではWEBGLモードで、座標位置(0, 0)がデフォルトでキャンバスの中央になります。
コードを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
みんなに見てほしい！触ってほしい！遊んでほしい！
というわけでwebで公開するためにp5.jsに書き換えてみましょう〜！
【2021/03/15 追記】
3Dの項目を追記
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.
3Dのスケッチの書き換え
3Dで描画している作品の場合、細々と書き方が異なります。
Processingの場合はこんな感じ。
p5.jsではWEBGLモードで、座標位置(0, 0)がデフォルトでキャンバスの中央になります。
See the Pen
p5_3D 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
