環境設定

p5.js

p5.jsはJavascript版Processingだ。PDCAを回しやすそうだったのでp5.jsを使う。
http://p5js.org/

dat.gui

Googla Data Artsチーム作成のdat.guiを使って、パラメータをGUIから変更できるようにする。PDCAの回す速度などが簡単に変えられ、結果を見ることができる。
http://workshop.chromeexperiments.com/examples/gui/#1--Basic-Usage
dat.gui.min.js

p5.jsの使い方

基本的な使い方はチュートリアルを見よう
http://p5js.org/tutorials/

instance Mode

p5.jsは簡単に書けて使いやすいが、変数がグローバルに宣言されたおり、複雑なことをしようとするとPDCAをうまく回すことが面倒になるそこでInstance Modeを使い、スコープを狭める。

基本の雛形は以下のようになる。

sketch.js

var sketch = function($p) {

  $p.setup = function() {
  };

  $p.draw = function() {
  };
};

var myp5 = new p5(sketch);

関数が呼ばれる順番

Processingおよびp5jsではまず、setupが呼ばれ、drawが繰り返し実行される。

setup()

sketch.js

// はじめに呼ばれるsetup関数
$p.setup = function() {
    // Canvasを作成
    $p.createCanvas(window.innerWidth, window.innerHeight);
    // テキストサイズを定義
    $p.textSize(variables.tSize);

    corner = $p.createVector(variables.direction, variables.direction);
};

draw()

sketch.js

// 繰り返し呼ばれるdraw関数
$p.draw = function() {
    // 背景を塗りつぶす
    $p.background(0);

    // 塗りつぶしの色を定義
    $p.fill(255);

    // 回転角度を増やす
    angle += variables.rotateSpeed;

    // Canvas中心から文字をずらすベクトル
    corner = $p.createVector(variables.direction, variables.direction);
    // テキストサイズを定義
    $p.textSize(variables.tSize);

    // Canvasの中心に移動
    $p.translate($p.width / 2, $p.height / 2);

    // Canvasを回転
    $p.rotate(angle);

    // 文字の大きさを考慮して位置を決めて、テキストを描画
    $p.text("P", -corner.x - variables.tSize / 2, -corner.y + variables.tSize / 2);
    $p.text("D", corner.x - variables.tSize / 2, -corner.y + variables.tSize / 2);
    $p.text("C", corner.x - variables.tSize / 2, corner.y + variables.tSize / 2);
    $p.text("A", -corner.x - variables.tSize / 2, corner.y + variables.tSize / 2);
};

コード

index.html

<html>
<head>
<style>
* {
    margin: 0;
    padding: 0;
}
</style>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.22/p5.js"></script>
    <script src="dat.gui.min.js"></script>
    <script src="sketch.js"></script>
</head>
<body>
</body>
</html>

sketch.js

var sketch = function($p) {

    var corner;
    var angle = 0;

    var variables = {
        rotateSpeed: 0.01,
        direction: 30,
        tSize: 32
    }

    // パラメータをセット
    $p.setVariables = function(_v) {
        variables = _v;
    }

    // はじめに呼ばれるsetup関数
    $p.setup = function() {
        // Canvasを作成
        $p.createCanvas(window.innerWidth, window.innerHeight);
        // テキストサイズを定義
        $p.textSize(variables.tSize);

        corner = $p.createVector(variables.direction, variables.direction);
    };

    // 繰り返し呼ばれるdraw関数
    $p.draw = function() {
        // 背景を塗りつぶす
        $p.background(0);

        // 塗りつぶしの色を定義
        $p.fill(255);

        // 回転角度を増やす
        angle += variables.rotateSpeed;

        // Canvas中心から文字をずらすベクトル
        corner = $p.createVector(variables.direction, variables.direction);
        // テキストサイズを定義
        $p.textSize(variables.tSize);

        // Canvasの中心に移動
        $p.translate($p.width / 2, $p.height / 2);

        // Canvasを回転
        $p.rotate(angle);

        // 文字の大きさを考慮して位置を決めて、テキストを描画
        $p.text("P", -corner.x - variables.tSize / 2, -corner.y + variables.tSize / 2);
        $p.text("D", corner.x - variables.tSize / 2, -corner.y + variables.tSize / 2);
        $p.text("C", corner.x - variables.tSize / 2, corner.y + variables.tSize / 2);
        $p.text("A", -corner.x - variables.tSize / 2, corner.y + variables.tSize / 2);
    };
};

var Variables = function() {
    this.rotateSpeed = 0.01;
    this.direction = 100;
    this.tSize = 200;
};

window.onload = function() {
    var myp5 = new p5(sketch);
    var variables = new Variables();

    myp5.setVariables(variables);

    // dat GUIの設定
    var gui = new dat.GUI();

    gui.add(variables, 'rotateSpeed', 0, 0.2);
    gui.add(variables, 'direction', 1, 300);
    gui.add(variables, 'tSize', 1, 300);
};