Canvas 2D + Vue.js で作るインタラクションコントローラー

株式会社フィードフォース（ https://www.feedforce.jp/ ）の社内勉強会で発表したものです。

補足記事は以下を御覧ください。

https://note.com/kysn/n/n5c43fdb9e030

Transcript

1. Canvas 2D + Vue.js 2020.03.06 FFTT #388 rmorioka で作る インタラクションコントローラー
2. 自己紹介 森岡瞭太 Designer @ EC Booster ネトゲにハマって引きこもり気味 趣味で HTML とか CSS とか JS とか書いてる
3. 今日する話 そもそも Canvas 2D とは Canvas 2D の基本 作ったものについて 本題
4. 今日しない話 Web GL の話 Canvas に関するライブラリーの話 今回は使ってない 数学の話 アニメーションでチラッと sine を使っている程度
5. そもそも Canvas 2D とは
6. Canvas <canvas></canvas> Canvas API や WebGL API によって描画される
7. Canvas API とWebGL API Canvas API 2D グラフィ ックスを描画する 今日扱うのはこっち WebGL API 2D も 3D もいける
8. Canvas 2D の基本
9. getContext('2d') 描画用のプロパティやメソ ッ ドを提供する プロパティ 色や線幅、フ ォン トなどのスタイル メソ ッ ド 実際に図形やテキストを描画する
10. すごくシンプルなデモ ただ緑色の矩形を描画するだけ fillStyle で塗りつぶしのスタイルを指定 fillRect(0, 0, 100, 100) で矩形を描画 引数は右上の座標 (x, y) と幅 (w) と高さ (h)
11. 時間経過に応じてアニメーションさせるデモ 緑色の矩形が左右に動く Math.sin( 経過時間 ) * 200 で y 座標を決定 requestAnimationFrame( 描画処理 ) で 描画処理を再帰呼び出し ディ スプレイのリフレッシュレートに合わせて
12. キー入力で動くデモ keydown で座標を操作 requestAnimationFrame( 描画処理 ) で 描画処理を再帰呼び出し
13. 基本はこれく らい 他にもテキス トとかパスとか画像とかを描画できる Javascript で渡せるものなんでも使える マウス入力とか音声入力なんかの各種入力 API 使ってデータの可視化したり これらの内容の組み合わせで色々作る
14. 作ったものについて
16. Prism 各正方形の RGB が変化する R と G はカーソルからの距離 B はサイン波 色は即座には変化しない カーソルに近いものから変化
17. カーソルに近いものから変化させる マウスの座標と正方形の座標を比較して 変化後の色を算出 変化後の色と現在の色の差を マウスと正方形の距離で割って今回の変化量を算出
18. 様々なパラメーターがある それぞれの色を変化させる方法 固定値、マウス座標、時間経過など 色の変化の振れ幅 色の変化が波及する速度
19. パラメーターを UI 上で操作できるようにする コードに触らずに最適な演出を探れる 元々はブルーパドルの橋本さんというエンジニアが Adobe MAX で話していたもの デザイナーが演出の調整をするために作った これ自体を見せたら面白そう & 勉強になりそう
21. どうやって作ったのか Nuxt.js 単に一番慣れてるだけで深い意味はない 今考えると素の Vue.js でも良かったかも……？ UI ライブラリ等は不使用 一度フルスクラッチすると勉強になるかなと思い
22. 主なコンポーネント Pulldown 色の変化方法の選択に使用 Slider 数値系の入力に使用 がっつりスタイル当てるので <input> は不使用
23. コントローラーの自動生成 最初は操作したい変数を増やす度に手で追加 毎回 6 箇所く らいの変更が…… Store から自動生成する形に 変更箇所が Store と Canvas だけに
24. まとめ
25. 作ってみてどうだった？ Canvas 2D 自体は割と単純 あく まで「どう描画するのか」のみなので 「何を描画するのか」のロジックが肝 ライブラリ不使用のフルスクラッチにチャレンジして かなり良い勉強になった気がする
26. おまけ
27. 今後やること1: スケッチの数を増やす ビジュアルプログラミングが楽し くなってきた 単純に作品数は増やしていきたい WebGL にも手を出す p5.js などのライブラリはガンガン使っていく 数学も勉強……する……はず
28. 今後やること2: リファクタリング 素人目にも設計がかなり怪しい とりあえず動けば良かろうでここまで作ったため 見てるだけで目眩のする mutation なんかが 単純なタッチ & フィールも詰めきれていない部分が
29. おしまい