- 追加された行はこの色です。
- 削除された行はこの色です。
[[Programing]] > p5.js
クリエイティブなグラフィックワークに利用されているビジュアルプログラミング言語Processing。それをJavascriptベースに移植したのがp5.js。
** P5.jsとProcessing.jsの違い [#de63f174]
Processingを元にした、Javascriptベースのビジュアルプログラミング言語に、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に近い。
** 公式 [#r562ee67]
-[[p5.js:http://p5js.org/]]
-[[p5.js-editor:https://github.com/processing/p5.js-editor]]
** 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 でドット絵を描くテスト - jsdo.it - Share JavaScript, HTML5 and CSS:http://jsdo.it/cx20/symj]]
-[[Processingとp5.js - おおまかな違い:https://gist.github.com/mactkg/633224e60cfaae8789c2]]
-[[メディアラボ 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]
-[[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]]
** そのほか [#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]")
