Processing.jsは非常に便利…だけど気分屋さん
先日、「轍」という画像を使った作品(というほどのものでもないですが…)を公開しましたが、あれはProcessingの機能のひとつである、JavaScriptモードを利用して作成されています。
ここでモードを変更することができますね。
その後、
ここを押せばhtml,js,pde等のファイルを勝手に生成してくれるのでそれを任意の場所にアップロードするだけです。
さてこのJavaScriptモード。非常に便利ではあるのですが、Javaモードでは動いたのに、JavaScriptモードでは動かない！なんで！なんてことが往々にしてあります。
今回は僕が直面した、JavaモードとJavaScriptモードでの互換性のトラブルとその解決方法を書いておきたいと思います。
(この記事は2015年1月2日現在です。バージョンは、2.2.1です。新情報や、もっと効率よい解決法があったら情報提供をお願いします！)
①size()は数字で指定する！
よくやってしまいがちなのが、setup()内で指定するウィンドウサイズをこのように指定してしまうことです。
[java]
PImage img;
void setup(){
img = loadImage("リンク先指定.jpg");
size(img.width,img.height);
}
[/java]
このように、イメージの横幅、縦幅にWindowSizeを合わせる、という指定をしてしまいがちです。しかし、これはJavaScriptモードだと動きません。
[java]
PImage img;
void setup(){
img = loadImage("リンク先指定.jpg");
size(500,500);
}
[/java]
のように、数字でしっかりと指定してあげましょう。
②画像はウェブにアップロードしてみる
さきほど、画像読み込みの話が出ましたが、loadImage()のリンク先を相対パス、絶対パスで指定しても動きません。どこかのサーバーのにアップロードし、そのURLを記述してあげることで解決することがあります！試してみてください。
③変数の名前を見なおしてみる
それでも動かない場合は、変数の名前を変更してみることで動くようになるかもしれません。
今回の場合、「int size;」という変数を宣言してしまったがために、JavaScriptモードでは動作しなくなってしまっていました。憶測ですが、size()とブッキングしてしまっていたのかな？
試しに「int sizeImg;」などと名前を変更してみたところ、正常に動作しました。ややこしい名前の変数を宣言するのはやめましょう！
以上、3つの注意点でした。とても便利ではありますが、jsに変えることで予想外のことが多々発生するので困りますね。
今後もこのような気付きがあったら随時更新していきます。