ProcessingのプログラムをWebページで実行してみる

Web開発/デザインProcessing

どうも、ごぶさたです。
最近、研究としての自然言語処理的な作業に飽きてきまして、ビジュアルプログラミングに手を出しています(たかが知れていますが…)。で、手を出したのが、Processingという言語です。詳しくはWikipediaとかを見てほしいのですが、要はグラフィックに強いプログラミング言語という感じです。
作品を公開するには、プログラムを公開するか、画像として公開するか、Webページに埋め込むなどの手段があります。今回は、Webページに埋め込む方針で行こうと思います。
なお、今回はProcessingのインストールは省略します。…インストーラがあるので簡単だと思いますので…。


今回Webページに公開する方法はいくつかあるみたいですが、今回はProcessing.jsというjavascriptのライブラリを使います。

1.Processing.jsの入手
では、さっそく手に入れてきましょう。入手先はこちらのサイトから。ダウンロードしたら、普通のjavascriptと同じようにディレクトリに配置してください。

2.コードを書いてみる
次にコードを書いていきましょう。必要なのは、先ほどダウンロードしたjsファイルの呼び出しと、実際の実行コードです。今回は、めんどくさかったので、HTMLに直書きして以下のようになりました。

このコードにより、ブラウザのウィンドウ全体で実行することができます。

3.動作確認
では、最後にブラウザで先ほどのHTMLファイルを平出動作を確認してみてください。なんかマウスポインタにちらちらしたのがついて来れば成功です。
ダメだった方は、jsファイルの配置とパスがあっているかを確認してください。
以上です。お疲れさまでした。


Processing.js」(公式サイト)
Processing.js基礎最速入門

2016-08-11Web開発/デザインProcessing