※「catch.jp-wiki」から移動したページです。

クリエイティブなグラフィックワークに利用されているビジュアルプログラミング言語ProcessinをJavascriptをベースに移植したのがp5.js。

公式

• p5.js
• ライブラリ
• p5.jsの技術概要

P5.jsとProcessing.jsの違い

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ライブラリと共存しやすい。

作ってみた

• p5.jsの練習場

  • グローバルモード
  • インスタンスモード
  • Github

• p5.jsによるタートルグラフィックス

参考リンク

p5.js 入門

• p5.js 入門(公式のGet startedを意訳しながらやってみた) - 君たちは永遠にそいつらより若い

• クリエイティブコーディングを大衆化するP5.js

• p5.jsでProcessingのようにリッチなWeb表現を作るチュートリアル

Processing / Processing.jsからの移行

• こーひーをぶんなぐれ！ - P5.jsの基礎
• p5.js : p5.jsを触ってみた - [séns]

• p5.js でドット絵を描くテスト - jsdo.it - Share JavaScript, HTML5 and CSS

• Processingとp5.js - おおまかな違い

• クリエイティブコーディングを大衆化するP5.js
• メディアラボ I 2015 - 多摩美術大学 | yoppa org
  • 第1回: クリエイティブコーディングの現状、openFrameworksのセットアップ | yoppa org p5.jsとprocessing.jsの簡単な比較あり。
  • 第4回: Web応用1 ? Webブラウザでプログラミング、p5.js入門 | yoppa org

応用

• はじめよう、p5.play.js

• processingっぽくかけるp5.jsでフラクタル図形を書いてみた - 03LOG

• JavaScript - メディアアート系で重要な数式・概念 & p5.jsで遊ぶ - Qiita

• Fx0 - Processing.jsを使ってみる （３） - Qiita

• Processingによる心理実験プログラミング入門 - hiroyukitsuda.com

• mbedJS + p5.jsでWebブラウザからmbedを制御する - Imaginable Reality

テクニック

• p5.jsでcanvasの位置を変える方法
• こーひーをぶんなぐれ！ - P5.jsとJavaScriptの機能の連携とJavaScriptの関数

• こーひーをぶんなぐれ！ - P5.jsの基礎

• p5.jsの練習場 p5.jsをWebページに埋め込んで編集/実行できるようにした。

  • 参考1 Embedding-p5.js
  • 参考2 instantiation--namespace インスタンス・モードを使うと、ローカル変数に割付できる。つまり、グローバル変数を汚染しない。
  • 参考3 インスタンスモードのサンプル

• p5.js を instance mode で使う - Qiita

実行環境

• p5.js-web-editor
• p5.js-editor

そのほか

• CBCNET ≫ HTML5でのジェネラティブ・アート［Processing、JavaScript、チュートリアル］ （『ジェネラティブ・アート』の未刊の章）

• Processing.js + jQueryのいじりかた blog.ikeay.net

• WordPress ? p5.js Embedder ≪ WordPress Plugins WordPressでp5.jsを動かすプラグインらしい。