アニメーションさせて動作確認したいときに、何かないかと探していました。以下ではそのパフォーマンスも検証してくれているありがたいサイトです。
最速の描画JavaScriptライブラリは!? パフォーマンスの検証
ただ僕の場合デスクトップ上でProcessingをちょいちょい使っていたのでやっぱりこれが使いやすく今後これを使っていこうと決意しました。
トップの絵はProcessing.jsのサンプルに乗っているものをコピペして出してみたものです。
Processing.jsをWordpress上で出すにあたっていろいろはまったので、その辺を残しておきます。
Processing.jsについて
Processing.jsについては本家の以下より参照ください。最新のjsファイルもダウンロードできます。
簡単な説明をしておくと表示させる方法は２つあって、
・Processingのファイルを外部から読み込む
・直接htmlの中に書き込む
外部ファイルにしておくとあとで流用が効きそう、Wordpressで出すにはファイルをアップする必要があるのでちょっと面倒。直接書き込む方は早いし分かりやすい。個人的にはこういったプログラムは変更しやすい方がいいから多少面倒でも外部ファイル方式をお勧めします。
導入方法
導入の仕方で考えられるのは、Pluginを入れるかそれぞれのテーマのheader.phpのheadタグの中にscriptタグを書いてしまう方法。
結論から言えばPluginの方がいい。header.phpに直接書くとあとでテーマを更新したときに消されてしまうので。
それにはまったところでも書くが直接書いてもなぜか表示できなかった。
●試行１ー書いても出ない
最初直接header.phpに書いてみたんだけど出ない。四角い枠はあるのだけれど何もでない。Processing.jsの置き場所が悪かったのかもしれないが、なぜだか出ない。外部ファイル方式でも直接書き込み方式でもでなかった。この辺は謎。
●試行２ーWordpressのテーマがhtml5に対応しているかどうか
テーマがhtml5に対応していないんじゃないかとhtml5対応とうたっているテーマを選んでみたがでない。
●試行３ーPluginを入れても出ない
その名の通りの「Processing.js」というのを入れてみたけど動かない。一番有効かされているみたいだけど動かなかった。
●試行４ー他のPluginを試してみる
結論から言えばやっと動いた。「ProcessingJS for WP」というPluginで動いた。外部読み込み方式も動いたし直接書く方式も動いた。ただ直接書く場合は「pjs4wp」というタグで挟まなければならない。
そんなわけでわらないことだらけだが、とにかく動けばいいということで。
念のため一番上で出したやつのプログラムを載せておきます。
// Global variables
float radius = 50.0;
int X, Y;
int nX, nY;
int delay = 16;
// Setup the Processing Canvas
void setup(){
size( 200, 200 );
strokeWeight( 10 );
frameRate( 15 );
X = width / 2;
Y = height / 2;
nX = X;
nY = Y;
}
// Main draw loop
void draw(){
radius = radius + sin( frameCount / 4 );
// Track circle to new destination
X+=(nX-X)/delay;
Y+=(nY-Y)/delay;
// Fill canvas grey
background( 100 );
// Set fill-color to blue
fill( 0, 121, 184 );
// Set stroke-color white
stroke(255);
// Draw circle
ellipse( X, Y, radius, radius );
}
// Set circle's next destination
void mouseMoved(){
nX = mouseX;
nY = mouseY;
}
