p5.js のスケッチを展示できるサービスを試してまとめてみました。
2019/03/19追記 : NEORTを追加しました。
2021/01/15追記 : 最新の情報にアップデートしました。
OpenProcessing
OpenProcessing - Algorithmic Designs Created with Processing
Processingの老舗投稿サイトです。どれくらい老舗かというとJavaアプレットで投稿してた時代があったくらいです。
p5.jsおよびProcessing.jsでの投稿を受け付けており、交流機能や作品に対するお気に入り機能なども提供されています。
(※2021/01/15追記 : Processing.jsでの投稿はできますが技術的に古いので非推奨となっています)
最近リニューアルされて、作品がよりかっこよく展示できるような工夫が凝らされています(背景色を抽出して同じ色にしてくれる等)。
各種ライブラリも完備されているので便利です。
サイト内のどこをクリックしてもProcessingスケッチしか出てこないので、いろんなスケッチを鑑賞することでアイデアを練ったり、写経したりするのもオススメです。
ちなみに、私はOpenProcessingのことをProcessing界のPixivと勝手に呼んでいます。
p5.js Web Editor
p5.js Web Editor
公式が開発中のWebエディタで、ブラウザ上で p5.js のコードを書いたり実行したりできます。
ログインすればコードの保存も可能なので、複数台の端末で作業したい場合は便利だと思います。
ささっと試せるのも良いところですね。
シェア方法についても、埋め込み型の他、スケッチのみを展示するためのURLやコードと一緒に展示できるURLなども発行してくれます。
下記は埋め込み型。
jsdo.it
jsdo.it - Share JavaScript, HTML5 and CSS
おなじみのjs、html、cssのコード共有サイトです。
日本語で書かれているのでとっつきやすい印象です。
p5.jsを利用したい場合はhtml部に以下を記述する必要があります。
また、埋め込み表示もソースコードを全面に出すか、作品(スケッチ)を自動再生するか等、いくつか選べます。
(※2021/01/15追記 : jsdo.it閉鎖されてました！おつかれさまでした)
CodePen
CodePen
こちらもjs、html、cssのコード共有サイトです。
私も最近利用を始めたのですが、埋め込みテーマがおしゃれなので気に入っています。
p5.jsの利用についてはjsdo.it同様、html部分にCDNからのライブラリ呼び出しを記述しておく必要があります。
JSFiddle
Create a new fiddle - JSFiddle
js、html、cssのコード共有サイトです。4つの分割された画面が有名ですね。
p5.jsを利用するにはhtml部にCDNからの呼び出しを記述するとともに、
js部を以下のような設定にする必要があります。
「Tidy」ボタンを押せばコードを整形してくれるのも面白いポイントです。
NEORT
NEORT | Digital Art Platform
2019年2月23日にβ版がオープンしたデジタルアートプラットフォームです。
投稿するとこんな感じになります。
blocks - NEORT
blocks2 - NEORT
p5.jsを利用するにはCDNを利用してコードを貼りつけるか、投稿画面の「Resources」からp5.jsライブラリを導入すればokです。
サイズの大きな作品が映えるデザインになっているのが面白いポイントだと思っています。
(※2021/01/15追記 : p5.jsの導入方法について修正。埋め込みプレイヤーも追加！)
目的に合わせて選ぶとよさそうです。
それでは良いp5.jsライフを！
2019/03/19追記 : NEORTを追加しました。
2021/01/15追記 : 最新の情報にアップデートしました。
OpenProcessing
OpenProcessing - Algorithmic Designs Created with Processing
Processingの老舗投稿サイトです。どれくらい老舗かというとJavaアプレットで投稿してた時代があったくらいです。
p5.jsおよびProcessing.jsでの投稿を受け付けており、交流機能や作品に対するお気に入り機能なども提供されています。
(※2021/01/15追記 : Processing.jsでの投稿はできますが技術的に古いので非推奨となっています)
最近リニューアルされて、作品がよりかっこよく展示できるような工夫が凝らされています(背景色を抽出して同じ色にしてくれる等)。
各種ライブラリも完備されているので便利です。
サイト内のどこをクリックしてもProcessingスケッチしか出てこないので、いろんなスケッチを鑑賞することでアイデアを練ったり、写経したりするのもオススメです。
ちなみに、私はOpenProcessingのことをProcessing界のPixivと勝手に呼んでいます。
p5.js Web Editor
p5.js Web Editor
公式が開発中のWebエディタで、ブラウザ上で p5.js のコードを書いたり実行したりできます。
ログインすればコードの保存も可能なので、複数台の端末で作業したい場合は便利だと思います。
ささっと試せるのも良いところですね。
シェア方法についても、埋め込み型の他、スケッチのみを展示するためのURLやコードと一緒に展示できるURLなども発行してくれます。
下記は埋め込み型。
jsdo.it - Share JavaScript, HTML5 and CSS
おなじみのjs、html、cssのコード共有サイトです。
日本語で書かれているのでとっつきやすい印象です。
p5.jsを利用したい場合はhtml部に以下を記述する必要があります。
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>コードの共有方法も複数用意されており、特にQRコード発行機能ですぐにスマホ上での動作を確認できるのが面白いところです。
また、埋め込み表示もソースコードを全面に出すか、作品(スケッチ)を自動再生するか等、いくつか選べます。
CodePen
CodePen
こちらもjs、html、cssのコード共有サイトです。
私も最近利用を始めたのですが、埋め込みテーマがおしゃれなので気に入っています。
p5.jsの利用についてはjsdo.it同様、html部分にCDNからのライブラリ呼び出しを記述しておく必要があります。
<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script>埋め込みの表示サイズをドラッグで直感的に調整できるので大きいスケッチから小さいスケッチまで対応できそうです。
JSFiddle
Create a new fiddle - JSFiddle
js、html、cssのコード共有サイトです。4つの分割された画面が有名ですね。
p5.jsを利用するにはhtml部にCDNからの呼び出しを記述するとともに、
js部を以下のような設定にする必要があります。
「Tidy」ボタンを押せばコードを整形してくれるのも面白いポイントです。
NEORT
NEORT | Digital Art Platform
2019年2月23日にβ版がオープンしたデジタルアートプラットフォームです。
投稿するとこんな感じになります。
blocks - NEORT
blocks2 - NEORT
p5.jsを利用するにはCDNを利用してコードを貼りつけるか、投稿画面の「Resources」からp5.jsライブラリを導入すればokです。
サイズの大きな作品が映えるデザインになっているのが面白いポイントだと思っています。
(※2021/01/15追記 : p5.jsの導入方法について修正。埋め込みプレイヤーも追加！)
目的に合わせて選ぶとよさそうです。
それでは良いp5.jsライフを！