p5.js の试礁 - catch.jp-wiki

[[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&#233;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を瓢かすプラグインらしい。

タイムスタンプを恃构しない