Processing的なことをjavascriptで書く時はp5.jsでやればよさげ.

タンブラーで眺めてたら幾何学模様のgifアニメーションが目について自分でも作りたいと昨日思ったので学習し始めます．
https://www.tumblr.com/search/processing

p5.jsについて

• レファレンス読みにくい https://p5js.org/reference/
• CDNからのリンク. https://cdnjs.com/libraries/p5.js

パーティクルとかをクラスで書きたい

でベースになるの書いたのでjsdo.itに上げたのがこちら.
http://jsdo.it/moc0311/WNYK

function setup() {
    createCanvas(250, 250); //キャンバスサイズ
    frameRate(1); //フレームレート
}

function draw() {
    background(204); //背景を灰色に設定
    for (var i = 0; i < 10; i++) {
        var p = new Dot();
        p.display();
    }
}

var Dot = function() {
    this.x1 = random(0, width);
    this.y1 = random(0, height);
};

//白い点(2pixel)で描画.
Dot.prototype.display = function() {
    stroke(255);
    ellipse(this.x1, this.y1, 2, 2);
};

//ログ
Dot.prototype.log = function() {
    stroke(0);
    text("x1:" + this.x1, 5, 15);
    text("y1:" + this.y1, 5, 30);
};

参考URL

MDN-オブジェクト指向 JavaScript 入門
https://developer.mozilla.org/ja/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript
Google流 JavaScript におけるクラス定義の実現方法
http://www.yunabe.jp/docs/javascript_class_in_google.html

Atomで書く時便利なパケ

• p5xjs-autocomplete
  https://atom.io/packages/p5xjs-autocomplete
  p5.js用入力補完パッケージ.

• atom-html-preview
  https://atom.io/packages/atom-html-preview
  HTMLプレビュー.