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

やったこと

ProcessingライクなJavascriptライブラリp5.jsと、
最近2.0が正式リリースされたIonicを組み合わせて簡単なお絵かきアプリの作成。

結果がこんな感じ

前提

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

手順

空のIonicアプリを作成。

$ ionic start p5sample blank --v2

p5.js downloadから「p5.js complete」をダウンロード。
解凍した中身を

p5sample/src/assets/lib

以下にコピー。

p5sample/src/index.html

に

<script src="./assets/lib/p5.min.js"></script>

を追加。

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

<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はこんな感じに。
パーツの位置指定とペンの色を設定しています。

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の展開位置を指定している点がみそです。

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

結果がこんな感じ

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

感想

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