PDCAをしっかりと回す

![pdca.gif](https://qiita-image-store.s3.amazonaws.com/0/26043/b7dd7841-8b46-49b7-c810-550fe322b26c.gif)
http://naoyashiga.github.io/p5.js-playground/sketches/neta/pdca/

社会人になるとPDCAをしっかりと回すことが求められる :smoking: :trollface: 

# 環境設定
## p5.js 
![スクリーンショット 2016-03-19 13.28.36.png](https://qiita-image-store.s3.amazonaws.com/0/26043/9f28db2f-7a77-3d33-83bd-4ae1ab95602c.png)

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

## dat.gui
![スクリーンショット 2016-03-19 13.27.48.png](https://qiita-image-store.s3.amazonaws.com/0/26043/b39f8572-968f-887f-6867-fc86d3826550.png)

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

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

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

http://p5js.org/examples/examples/Instance_Mode_Instantiation.php

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

```js:sketch.js
var sketch = function($p) {

  $p.setup = function() {
  };

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

var myp5 = new p5(sketch);
```

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

## setup()
```js: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() :art: 
```js: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);
};
```

# コード
```html: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>
```

```js: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);
};
```

https://github.com/naoyashiga/p5.js-playground/pull/2