p5.js/processing.jsでプログラミングを始めるために必要なもの
p5.jsとprocessing.jsをつかったプログラミングに興味を持たれた方のために、p5/processingの始め方を紹介します。つまずいてしまうことが多いところなので、分からなかったら質問してください。
最も簡単な方法
OpenProcessingに直書き
OpenProcessingとはprocessingで書かれたプログラムを共有するWebサービスのことです。この方法だと何も用意する必要はないので、一番手っ取り早い方法です。スマホやタブレットからでも可能です。
最初にOpenProcessingにアカウントを作成(Join)し、コードを書く際には「+Create a sketch」を押すことで新しいプログラムを作ることができます。p5.jsとprocessing.jsの切り替えはSettings > Modeで行うことができます（下の画像を参照）。作った後で作品（スケッチ）を公開するのもコピペでできるので楽です。
利点：アカウント作成後すぐに始められる。欠点：ブラウザが落ちたら保存していないコードが消える。
私はブラウザが固まって動かなくなった場合のことを考えて、コードを記述するのはエディタを使った方がいいと思います。だって一生懸命かいたコードが消えた時のショックを考えたらね....
PC版：基本の始め方（実行はオフラインでも可能）
OPだけでするのも悪くはありませんが、PCでp5/processingを始める標準的なやり方を紹介します。
必要なものは以下
- エディタ
- ライブラリ
- ブラウザとデベロッパーツール
1. エディタ
好きなものを使っていただいて構いません。最悪テキストでも。私はAtomにp5.js用の補助ツールを入れて書きやすくしています。ここは本筋ではないので次に行きます。
2. ライブラリをダウンロード
p5.jsを実行するのに必要なライブラリをダウンロードします。p5.js completeを選べば間違いないです。その中で重要なのは次の３つのファイルです。
- p5.js
- p5.dom.js
- p5.sound.js
minとついているものがあれば、それは空白や改行を消して圧縮してあるものです。普通に使うのであれば上記の3つを使えばよいとおもいます。
この3つのファイルは「libraries」というフォルダに入れておきます。
「index.html」「自分が作った.jsファイル」「libraries」はこのように配置します。
「index.html」はheadタグの中にlibrariesにある3つのファイルを参照するように記述してあります。もちろん自分が書いた〇〇.jsも参照するのを忘れずに。
processing.jsの場合
今までの話はp5.jsを使うときのやり方の事でした。processing.jsを使う場合、私はライブラリはダウンロードせずに、書いたコードはOP上で実行しています。というのもprocessing.jsの場合、HTMLファイルの方に
<canvas data-processing-sources="processing.pde"></canvas>
というめんどくさいことを書かないといけないからです。説明を省略するため、ライブラリをつかった実行の仕方はQiitaを参考にしてください。processing.jsのライブラリはコチラからダウンロードできます。
3. Chromeブラウザのデベロッパーツール
index.htmlを右クリックすると、プログラムから開く>Google Chrome、という風に開くブラウザが選択できます。
Chromeで「ctrl + shift + i」を押すとデベロッパーツールが出てきます。console.log()で様々なことが観察できるのでぜひ使ってみてください。
ライブラリをダウンロードする手間を省く（CDN）
CDN（コンテンツデリバリーネットワーク）という仕組みを使うことで、ライブラリをダウンロードする手間を省くことができます。具体的にはhtmlファイルのscriptタグを以下のように書き換えることで実現できます。
srcの部分が「https://~」という風に書き変わっています。自分の用意したlibrariesフォルダを参照するのではなく、どこかのサーバーにおいてあるp5のファイルを用いる方法です。
スマホ・タブレットで始めるには
私は普段PCで作業していますが、アプリ版でも幾つかよいのがあったので紹介していおきます。
iOS(iphoneやiPad・iPod touch)の場合
p5.js用の開発アプリ...p5* (提供者：Shinya Fujino氏)
processing.js用の開発アプリ...Processing iCompiler for iOS (提供者：Frogg GmbH氏)
Androidの場合
p5.js用の開発アプリ...残念ながら見つからず
processing.js用の開発アプリ...APDE-Android Processing IDE- (提供者 CalsignLabs社)
関連記事
