最初 - Rodhos Soft

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

ちなみにchromeからだとfile:を参照できなかったのでsafariで実行は確認した。