最初
processing.jsをダウンロードして配置する。
Processing.js
htmlを用意
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>title</title> <script src="./processing.js"></script> </head> <body> <canvas data-processing-sources="./proc.pde"></canvas> </body> </html>
proc.pdeファイルを用意してそこにprocessingの文法で描画すればOK。例として丸を多数動かす。
int MAX = 100; Target[] targets = new Target[MAX]; // 丸クラス // 準備はここに描く void setup() { size(1000, 1000); // サイズ指定 frameRate(20); // 動きのフレームレート指定 stroke(255, 0, 0); // 塗る色指定 // 丸の生成 for (int i=0;i<MAX;i++) { targets[i] = new Target(random(0,1000),random(0,1000),random(-3.0,3.0),random(-3.0,3.0)); } } // 描画処理はここに描く。フレームレートに応じて都度呼ばれる。 void draw() { // 消す background(0); // それぞれの丸に命令して描画させる。 for (int i=0;i<MAX;i++) { Target target = (Target)targets[i]; target.move(); target.draw(); } } // 丸 class Target { float x,y; float vx,vy; int id; // 初期化 Target(float xx, float yy, float vxx, float vyy) { x = xx; y = yy; vx = vxx; vy = vyy; } // 移動 void move() { x += vx; y += vy; if (x > 1000) { vx = abs(vx) * -1 } if (x < 0) { vx = abs(vx) } if (y > 1000) { vy = abs(vy) * -1 } if (y < 0) { vy = abs(vy) } } // 描画 void draw() { ellipse(x,y,10,10); } }