Processing.jsの導入

 Processing.jsを利用する場合、直接埋め込む方法と外部ファイルを読み込む方法があります。
 どちらも公式->learningの項目に記載されています。
 以下に外部ファイルを読み込む手順を抜粋してみました。

head

 公式から最新のファイルをダウンロードして、任意の場所に保存しておきます。
 これを読み込むために<head>~</head>間に以下のコードを記述します。
<head>
...
<script src="js/processing-1.4.1.min.js"></script>
...
</head>

<*.html>

 今回はjsフォルダ内へ保存したので、ファイルへのパスは上記のようになっています。

外部ファイルの読み込み

 次に、外部ファイルを準備します。拡張子はpdeです。
 今回はpdeフォルダにwelcome.pdeというファイル名で用意しました。
 これを読み込むためにCanvasを配置したい位置へ以下のコードを記述します。
<body>
...
<canvas data-processing-sources="pde/welcome.pde"></canvas>
...
</body>

<*.html>

 カンバスを配置したい位置へ上記コードを挿入します。

Canvas領域の準備

 Processing.jsはJava言語で記述します。
 ページ上へCanvas領域を準備するためのコードは以下のとおりになります。
void setup(){
	size(320, 240);
}

<welcome.pde>

 これを実行すると以下のようになります。

 size命令はProcessing.jsで用意されている、Canvasの大きさを決めるための命令です。上記の場合『320px*240pxのCanvasを準備しろ』という意味になります。
 これで下準備は完了です。