p5.js
ChromebookでProcessingを使いたい場合、Linuxを使えるようにしてProcessingをインストールする方法もあるようだがちょっと面倒。そこでWebブラウザでProcessingのようなプログラムを書けるp5.jsを紹介する。
p5.jsとは
Webブラウザ上で実行できるProcessingライクなJavaScriptライブラリ。サイトはこちらp5js.org
トップページの「Start creating with the p5 Editor!」をクリックするとプログラムの編集・実行ページに移動する。
根本的な違いについて
ProcessingはJavaベースのプログラミング言語（というか内部的にはJava）であるのに対し、p5.jsは名前のとおりJavaScriptライブラリとして作られている。JavaとJavaScriptは名前は似ているが全くの別物で、例えるとインドとインドネシア、オーストリアとオーストラリアくらい違う。とりあえずp5.jsを使う上で知っておくべき違いとしては、次の2点。
Javaは静的型付け、JavaScriptは動的型付け
Javaで使う変数や関数はプログラムを書く時点で値の型を決めておく必要があり、後から変更できない（静的型付け）。JavaScriptでは保持する値に応じて型を変更することができる（動的型付け）。このため、変数の宣言や関数の宣言の書き方が異なっている（JavaScriptでは型を書かない）。
| 変数宣言 | 関数宣言 | |
| Processing | int value; | void myFunction(int i, float j) |
| p5.js | var value; または let value; ※ | function myFunction(i, j) |
Javaはコンパイル型言語、JavaScriptはインタープリター型言語
プログラムを実行する際に、コンパイル型言語はまずプログラム全体をコンピュータが理解できる形式に翻訳するのに対し、インタープリター型言語は実行する処理ごとに翻訳していく。コンパイル型言語は全文翻訳、インタープリター型言語は同時通訳という感じ。Javaはコンパイル型言語（ただしバイトコードと呼ばれる中間言語に翻訳する）であり、実行する前に分かっている不具合をチェックしようとしてくれる。JavaScriptはインタープリター型言語なので、実行してみるまで間違いに気付かないことが多い。
とは言え、Processingはコンパイルの過程はほぼ気にせず実行ボタンを押せばプログラムを実行してくれるようなお手軽環境なので、この違いは普通は気にしなくてもよいかも。
その他細々とした違い（随時気付いたら書き足していきます）
定数宣言
p5.jsでは固定値に名前を付けるためにconstキーワードを使うことができる（JavaScriptの文法どおり）。Processingではfinalキーワードを使って値の変更を不許可とすることができる。
| 定数宣言の例 | |
| Processing | final int WIDTH = 400; |
| p5.js | const WIDTH = 400; |
関数名の違い
p5.jsでは本家Processingと関数名（および機能）が異なっているものが幾つかある。
| Processing | p5.js | 補足 | |
| ウィンドウサイズの指定 | size() | createCanvas() | createCanvasはP5.Rendererオブジェクトを返す |
| 座標変換行列の退避 | pushMatrix() | push() | p5.jsのpushは座標変換行列以外にも描画属性全般を対象としている |
| 座標変換行列の復元 | popMatrix() | pop() | （同上） |
マウス関係の変数
p5.jsではウィンドウ座標でのマウスカーソル位置を保持する変数やマウスカーソルの移動量を保持する変数が追加されている。