Ionic2とp5.jsで簡単なお絵かきアプリ

# やったこと
ProcessingライクなJavascriptライブラリ[p5.js](https://p5js.org/)と、
最近2.0が正式リリースされた[Ionic](http://ionicframework.com/)を組み合わせて簡単なお絵かきアプリの作成。

[結果がこんな感じ](https://yosshitaku067.github.io/p5sample/)

# 前提
Nodejsがインストールされていること。
Ionic cliがインストールされていること。

# 手順

空のIonicアプリを作成。

```
$ ionic start p5sample blank --v2
```

[p5.js download](https://p5js.org/download/)から「p5.js complete」をダウンロード。
解凍した中身を

```
p5sample/src/assets/lib
```
以下にコピー。

```
p5sample/src/index.html
```
に

```html
<script src="./assets/lib/p5.min.js"></script>
```
を追加。

home.htmlをこんな感じに編集。
id="myCanvas"指定しているところにCanvasが挿入されます。

```html
<div class="content-area">
  <!-- ここにCanvasが展開される -->
  <div id="myCanvas" #myCanvas class="canvas-area">
  </div>

  <!-- ボタン領域 -->
  <div class="action-button-area">
    <!-- 赤色 -->
    <button ion-button icon-only clear class="color-red" (click)="onRed()">
      <ion-icon name="brush"></ion-icon>
    </button>

    <!-- 青色 -->
    <button ion-button icon-only clear class="color-blue" (click)="onBlue()">
      <ion-icon name="brush"></ion-icon>
    </button>

    <!-- 黄色 -->
    <button ion-button icon-only clear class="color-yellow" (click)="onYellow()">
      <ion-icon name="brush"></ion-icon>
    </button>

    <!-- ペンの太さ -->
    <ion-item class="stroke-width">
      <ion-range min="5" max="15" [(ngModel)]="strokeWidth">
        <ion-icon range-left small name="brush"></ion-icon>
        <ion-icon range-right name="brush"></ion-icon>
      </ion-range>
    </ion-item>
    
  </div>
</div>
```

home.scssはこんな感じに。
パーツの位置指定とペンの色を設定しています。

```scss

page-home {

    .content-area {
        overflow: hidden;
        height: 100%;
        width: 100%;
    }

    .canvas-area {
        position: relative;
        height: 90%;
    }

    .action-button-area {
        position: relative;
        height: 10%;
        background-color: #ddd;
        display: flex;
    }

    .color-red {
        color: #ff0000;
    }

    .color-blue {
        color: #0000ff;
    }

    .color-yellow {
        color: #ffff00;
    }

    .stroke-width {
        background: transparent;
    }
}


```

home.tsはこんな感じで。
p5をインスタンスモードで使用している点と、
parentでcanvasの展開位置を指定している点がみそです。

```ts
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

declare var p5: any;

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  myp5: any;
  penColor: string; // ペンの色
  strokeWidth: number;  // ペンの太さRangeパーツで値が変動する

  constructor(public navCtrl: NavController) {}

  ionViewDidEnter() {

      this.penColor = 'red';  // デフォルトは赤
      this.strokeWidth = 10;  // デフォルトの太さを10に設定

      var s = (p) => {

        // キャンバスのセットアップ
        p.setup = function(){
          var cnv = p.createCanvas(document.getElementById('myCanvas').clientWidth, document.getElementById('myCanvas').clientHeight);
          cnv.parent('myCanvas'); // id="myCanvas"と紐づけ
        };

        // タッチイベントを受けて処理が走る。
        p.touchMoved = () => {

          // ペンの太さ
          p.strokeWeight(this.strokeWidth);

          // ペンの色
          p.stroke(this.penColor);

          // なぞったエリアに線を描画
          p.line(p.mouseX, p.mouseY, p.pmouseX, p.pmouseY);
          return false;
        };
      }

      // インスタンスモード
      this.myp5 = new p5(s);
  }

  // 色を赤に
  onRed() {
    this.penColor = 'red';
  }

  // 色を青に
  onBlue() {
    this.penColor = 'blue';
  }

  // 色を黄色に
  onYellow() {
    this.penColor = 'yellow';
  }
}

```

動作確認。

```
$ ionic serve
```

[結果がこんな感じ](https://yosshitaku067.github.io/p5sample/)

日曜日のお昼の暇つぶしにはじゅうぶんでないでしょうか。

# 感想

結果が目に見えて、なおかつ操作できちゃうものを作るのは楽しいですね。