- 追加された行はこの色です。
- 削除された行はこの色です。
[[Programing]] > p5.js
クリエイティブなグラフィックワークに利用されているビジュアルプログラミング言語ProcessinをJavascriptをベースに移植したのがp5.js。
#contents
~
#htmlinsert(p5js.html)
~
* 公式 [#r562ee67]
-[[p5.js:http://p5js.org/]]
-[[ライブラリ:http://p5js.org/libraries/]]
-[[p5.jsの技術概要:https://github.com/processing/p5.js/wiki/p5.js-overview]]
* P5.jsとProcessing.jsの違い [#de63f174]
Javascriptベースで、Processingを元にしたビジュアルプログラミング言語に、p5.jsとProcessing.jsがある。両者の違いは、こんな感じ。
- HTMLページへの埋め込み
-- Processing: <script id="processing-code" type="application/processing">としてコードを記述するか、「*.pde」「*.pjs」ファイルを読み込む
-- p5.js: Javascriptとして記述するか読み込む
- 文法
-- Processing:関数の先頭は「void」
-- p5.js:関数の先頭は「function」
つまり、Processing.jsはJavaッぽい感じで、p5.jsはJavascriptに近い。
その分、p5.jsのほうが他のJavascriptライブラリと共存しやすい。
* 作ってみた [#qcea8225]
-p5.jsの練習場
--[[グローバルモード:http://www.catch.jp/program/p5.js/]]
--[[インスタンスモード:http://www.catch.jp/program/p5.js/index_ls-mode.html]]
--[[Github:https://github.com/ycatch/p5.js_sandbox]]
-[[p5.jsによるタートルグラフィックス:http://ycatch.github.io/p5.turtle.js/]]
* 参考リンク [#f2375e32]
** p5.js 入門 [#wffb7dc5]
-[[p5.js 入門(公式のGet startedを意訳しながらやってみた) - 君たちは永遠にそいつらより若い:http://kuteken.hatenablog.com/entry/2014/08/07/162714]]
-[[クリエイティブコーディングを大衆化するP5.js:http://www.infoq.com/jp/news/2014/09/p5js]]
-[[p5.jsでProcessingのようにリッチなWeb表現を作るチュートリアル:http://liginc.co.jp/web/html-css/html/130834]]
** Processing / Processing.jsからの移行 [#p79c30ab]
-[[こーひーをぶんなぐれ！ - P5.jsの基礎:http://cad.lolipop.jp/work/class/WebBasic/3_P5/31_P5_Basic.htm]]
-[[p5.js : p5.jsを触ってみた - [séns]:http://tomoyukim.hatenablog.com/entry/2014/10/28/124222]]
-[[p5.js でドット絵を描くテスト - jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo.it/cx20/symj]]
-[[Processingとp5.js - おおまかな違い:https://gist.github.com/mactkg/633224e60cfaae8789c2]]
-[[クリエイティブコーディングを大衆化するP5.js:http://www.infoq.com/jp/news/2014/09/p5js]]
-[[メディアラボ I 2015 - 多摩美術大学 | yoppa org:http://yoppa.org/tau_media15]]
--[[第1回: クリエイティブコーディングの現状、openFrameworksのセットアップ | yoppa org:http://yoppa.org/ma2_14/5566.html]] p5.jsとprocessing.jsの簡単な比較あり。
--[[第4回: Web応用1 ? Webブラウザでプログラミング、p5.js入門 | yoppa org:http://yoppa.org/taunet14/5869.html]]
** 応用 [#f0441be2]
-[[はじめよう、p5.play.js>p5.play.js]]
-[[processingっぽくかけるp5.jsでフラクタル図形を書いてみた - 03LOG:http://03log.me/blog/2014-08-31-p5-js-fractale.html]]
-[[JavaScript - メディアアート系で重要な数式・概念 & p5.jsで遊ぶ - Qiita:http://qiita.com/hp0me/items/8f43ad146744310664ae]]
-[[Fx0 - Processing.jsを使ってみる （３） - Qiita:http://qiita.com/Souj/items/cc4037995ec77d043bed]]
-[[Processingによる心理実験プログラミング入門 - hiroyukitsuda.com:http://hiroyukitsuda.com/tutorial/processing]]
-[[mbedJS + p5.jsでWebブラウザからmbedを制御する - Imaginable Reality:http://d.hatena.ne.jp/kougaku-navi/20141102/p1]]
* テクニック [#l618a3ec]
-[[p5.jsでcanvasの位置を変える方法:http://p5aholic.hatenablog.com/entry/2015/05/16/163251]]
-[[こーひーをぶんなぐれ！ - P5.jsとJavaScriptの機能の連携とJavaScriptの関数:http://cad.lolipop.jp/work/class/WebBasic/3_P5/32_P5withJS.htm]]
-[[こーひーをぶんなぐれ！ - P5.jsの基礎:http://cad.lolipop.jp/work/class/WebBasic/3_P5/31_P5_Basic.htm]]
-[[p5.jsの練習場:http://www.catch.jp/program/p5.js/]] p5.jsをWebページに埋め込んで編集/実行できるようにした。
-- 参考1 [[Embedding-p5.js:https://github.com/processing/p5.js/wiki/Embedding-p5.js]]
-- 参考2 [[instantiation--namespace:https://github.com/processing/p5.js/wiki/p5.js-overview#instantiation--namespace]] インスタンス・モードを使うと、ローカル変数に割付できる。つまり、グローバル変数を汚染しない。
-- 参考3 [[インスタンスモードのサンプル:http://p5js.org/examples/examples/Instance_Mode_Instantiation.php]]
-[[p5.js を instance mode で使う - Qiita:http://qiita.com/turusuke/items/c92a13602523d6378cc0]]
* 実行環境 [#j3c2e45f]
-[[p5.js-widgetを試してみた | catch.jp blog:http://www.catch.jp/blog2a/2016/09/22/p5-js-widget/]]
-[[p5.js-web-editor:https://alpha.editor.p5js.org/]]
-[[p5.js-editor:https://github.com/processing/p5.js-editor]]
* そのほか [#r954256f]
-[[CBCNET ≫ HTML5でのジェネラティブ・アート［Processing、JavaScript、チュートリアル］ （『ジェネラティブ・アート』の未刊の章）:http://www.cbc-net.com/topic/2012/12/generative-art-in-html5/]]
-[[Processing.js + jQueryのいじりかた blog.ikeay.net:http://blog.ikeay.net/513]]
-[[WordPress ? p5.js Embedder ≪ WordPress Plugins:https://ja.wordpress.org/plugins/p5-embedder/]] WordPressでp5.jsを動かすプラグインらしい。
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
