Processingとp5.js入門(他の言語をやったことある人向け)02

#p5.jsとは
Web上でProcesssingが使えるjavascriptライブラリ(みたいなもの)
とりあえずProcessingで作ったものを公開したいのに、公開できない人の救世主です。

#PythonとFlask
ではpythonのFlaskでサーバサイドは記述します。
Flaskはpython用に提供されているweb用のマイクロフレームワークです。とにかく導入コストが低いです。
dj〇ngoと比べて本当に導入が楽です。本当に楽です。
(資料が古かったりでめんどくさい部分もありますが)

#サンプルコード
早速どこかから~~パクってきた~~参考にしたコードをもとに作ります。
入門なので難しいことはまったくふれません(私自身が初心者なので)

動いている様子は前の記事と同じ感じです。

##Pythonのコード
```python:app.py
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)
@app.route('/')
def index():
    return render_template('index.html')

if __name__ == '__main__':
    app.run()

```

(よく考えたらこの実装だとpython使う必要なくねえか…。)

##htmlのコード
```html:layout.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>p5.js</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.js"></script> <!--ここを適時修正してください。落としてくるなり、ネットワークで使うなり-->
    <script src="/static/js/kurukuru.js"></script>
    <style type="text/css">
      * {margin: 0;}
      * {padding: 0;}
    </style>
  </head>
  <body>
    {% block content %}{% endblock %}
    <script src="/static/js/jquery.min.js"></script>
    <script src="/static/js/bootstrap.min.js"></script>
  </body>
</html>

```

```html:index.html
{% extends "layout.html" %}
{% block content %}
  <!-- Form
  ================================================== -->
<div class="form">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12">
        <p>
          <div id="p5Canvas">
            <p></p>
          </div>
        </p>
      </div>
    </div>
  </div>
</div>
{% endblock %}
```

##javascriptのファイル
```js:kurukuru.js
const N = 20;

let p_x = [];
let p_y = [];
let p_pX = [];
let p_pY = [];

let p_distances = [];
let p_gap_theata = [];

let p_colors = [];

let p_frameCount;

function setup(){
  let canvas = createCanvas(windowWidth, windowHeight);
  canvas.parent("p5Canvas");
  background(255);

  colorMode(HSB, 255, 100, 100);

  p_frameCount = 0;
  noStroke();

  for(var i = 0; i < N; i++){
    p_x.push(30);
    p_pX.push(30);
    p_y.push(30);
    p_pY.push(30);
    p_distances.push(random(15, 150));
    p_gap_theata.push(random(-PI, PI));

    p_colors.push(color(random(255), 100, 100));
  }
}
function draw(){
  colorMode(RGB, 255);
  background(255);
  colorMode(HSB, 255, 100, 100);
  for(var i = 0; i < N; i++){
    fill(p_colors[i]);
    let theata = radians(p_frameCount*5.0) + p_gap_theata[i];
    let dist =p_distances[i] + 90.0*noise(theata/1.0, p_frameCount/100.0)
    p_x[i] = (mouseX + dist*cos(theata) + p_pX[i])/2.0;
    p_y[i] = (mouseY + dist*sin(theata) + p_pY[i])/2.0;
    ellipse(p_x[i], p_y[i], 20, 20);
    p_pX[i] = p_x[i];
    p_pY[i] = p_y[i];
  }
  p_frameCount++;
}

function windowResized(){
  resizeCanvas(windowWidth, windowHeight);
}


```

##参考

前のProcessingのコードをjavascriptに落とし込んでいます。グローバル変数になりうるものは`p_`としています
感じ方次第ですが、javascriptとProcessingに慣れ親しんでいると、すんなり入れる感じだと思います。

```
let canvas = createCanvas(windowWidth, windowHeight);
canvas.parent("p5Canvas");
```

ここがキモだと思います。Processing.jsのころは画面いっぱいに出すのが、もう少し大変だった気がしますが、p5.jsはスムーズです。
また表示するcanvasのidを指定できます。これを指定しないでcanvasが存在すると普通にそれに紐づけられます。
[参考URL](http://p5aholic.hatenablog.com/entry/2015/05/16/163251)

ただし画面の大きさを変えたときに、最初の大きさのまま表示領域が変わらないので

```
function windowResized(){
  resizeCanvas(windowWidth, windowHeight);
}
```

これを追加します。
[参考URL](http://gildasp.fr/exp/P5js-fullscreen/)

`mouseX`や`elipse`、`colorMode`も使えます。
いいですね。

**他のjsライブラリから来た人は、慣れないと思いますがdraw内で画面を初期化( `bacground` )しないと前の描画が残ります。**

あと描画を初期化したいけど、canvasの裏の描画を残しておきたい場合には`background`を工夫すればどうにかなります。
4つ変数をいれる場合には

```
background(r, g, b, α)
```

のはずなので、αの値によって前の描画の残し具合を変化できるはずです。(試したコードを紛失した)

#結論
<h2>楽しい</h2>

#おまけ
p5.jsの前にはProcessing.jsというものがありました。
Processing.jsではProcessingのコードをそのまま流用できます。

誰も得しないと思いますが残しておきます。

```html:index.html
<!DOCTYPE html>
    <head>
       <script src="processing.js"></script>
       <script>
         window.onload = function(){
           var canvas = document.getElementsByTagName('canvas')[0];
           var codeElm = document.getElementById('processing-code');
           var code = codeElm.textContent || codeElm.innerText;

           new Processing(canvas, code);
         };
       </script>
       <script id="processing-code" type="application/processing">
         void setup() {
           size(innerWidth, innerHeight);
           frameRate(20);
         }
         void draw() {
           size(innerWidth, innerHeight);
           background(0, 0);
           ellipse(width/2, height/2, mouseX, mouseY);
         }
       </script>
    </head>
    <body bgcolor="ffccff">
    	<div id="wrapper">
    		<canvas id = "main"></canvas>
    	</div>
    </body>
</html>
```

```css:main.css
body{
	margin: 0px;
	padding: 0px;
	position: relative;
}

body #wrapper{
	width: 100%;
	height: 100%;
	position: fixed;
}
```

```resize.js
$(function(){
	sizing();
	$(window).resize(function(){
		sizing();
	});
});

function sizing(){
	$("#main").attr({height:$("wrapper").height()});
	$("#main").attr({height:$("wrapper").width()});
}
```

最後のjsファイルで最大化処理を行っています。