JS | Processing.js_test

WordPressでProcessing.jsを動かす方法

WPサイト内でProcessing.jsを動作させるためにprocesing.js(若しくはprocesing.min.js)ファイルをFTPでサーバの任意の場所にアップロード。
※procesing.jsとprocesing.min.jsのダウンロードはこちら→http://processingjs.org/download/

現在使用してるテーマのheader.phpをEditorで開いて、headタグ内に次のように記述します。

POSTの中にprocessing本家アプリや各種エディターで作成したファイルの拡張子.pdeを.pjsに変更して任意の場所にアップロード。processing.jsで使えるリファレンスはこちら→http://processingjs.org/reference/
canvasタグを使い、以下のようにPOST内へ記入する。

以下サンプル。※http://processingjs.org/learning/より転載

test

// 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;
}