ブラウザ上で動かす

Processing のコードをブラウザ上で動かす方法について。

Processing の js ライブラリを使う

このサイト内では、プログラムコードの実行例を動画や画像ではなくブラウザ上で実際に動作させて表示しています。例えばこのページなど。画像や動画ではこのようなインタラクティブなサンプルは説明がしにくいので、その点でこれは非常に便利だと言えます。

Processing のコードをブラウザ上で動かすという時、実際にやっているのは、Processing オリジナルのコード(スクリプト)を Processing の JavaScript ライブラリを使ってブラウザ上で動作可能になるようにする、ということをしています。JavaScript (jsと略記される)という言語はほとんどのブラウザで標準的にサポートされており、特にプラグインなどを入れずとも動作します。そのため、現在ではほとんどの商用ウェブサイトにおいて利用されている、WEB技術における基幹的言語となっています(普段よく利用するウェブサイトでの、画面遷移やアニメーション効果などの機能は、多くの場合 js を用いて実装されています)。

Processing のコードはそのままではブラウザ上では動かすことはできないので、これを js のコードに翻訳し、js として動作させることで、ブラウザ上で動作させることができます。それをするためのライブラリとして p5.js があります。

これらのライブラリを用いてウェブ上で Processing のコードを動かせるようにするには、基本的には、ウェブ言語の知識がある程度必要になります。ここでいうウェブ言語とは、HTML/CSS や JavaScript のことです。要するに、ウェブサイトを作る時に必要になる言語／知識です。ただ、必ずしもこれらを完璧に理解していなくても、必要最低限の知識があればさほど難しくはありません。HTML をある程度わかれば、あとは p5.js のサイト内の導入に従えばできると思います。