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

by kysn

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

自己紹介森岡瞭太 Designer @ EC Booster ネトゲにハマって引きこもり気味趣味で HTML とか CSS とか JS とか書いてる

Slide 3

Slide 3 text

今日する話そもそも Canvas 2D とは Canvas 2D の基本作ったものについて本題

Slide 4

Slide 4 text

今日しない話 Web GL の話 Canvas に関するライブラリーの話今回は使ってない数学の話アニメーションでチラッと sine を使っている程度

Slide 5

Slide 5 text

そもそも Canvas 2D とは

Slide 6

Slide 6 text

Canvas Canvas API や WebGL API によって描画される

Slide 7

Slide 7 text

Canvas API とWebGL API Canvas API 2D グラフィックスを描画する今日扱うのはこっち WebGL API 2D も 3D もいける

Slide 8

Slide 8 text

Canvas 2D の基本

Slide 9

Slide 9 text

getContext('2d') 描画用のプロパティやメソッドを提供するプロパティ色や線幅、フォントなどのスタイルメソッド実際に図形やテキストを描画する

Slide 10

Slide 10 text

すごくシンプルなデモただ緑色の矩形を描画するだけ ﬁllStyle で塗りつぶしのスタイルを指定 ﬁllRect(0, 0, 100, 100) で矩形を描画引数は右上の座標 (x, y) と幅 (w) と高さ (h)

Slide 11

Slide 11 text

時間経過に応じてアニメーションさせるデモ緑色の矩形が左右に動く Math.sin( 経過時間 ) * 200 で y 座標を決定 requestAnimationFrame( 描画処理 ) で描画処理を再帰呼び出しディスプレイのリフレッシュレートに合わせて

Slide 12

Slide 12 text

キー入力で動くデモ keydown で座標を操作 requestAnimationFrame( 描画処理 ) で描画処理を再帰呼び出し

Slide 13

Slide 13 text

基本はこれくらい他にもテキストとかパスとか画像とかを描画できる Javascript で渡せるものなんでも使えるマウス入力とか音声入力なんかの各種入力 API 使ってデータの可視化したりこれらの内容の組み合わせで色々作る

Slide 14

Slide 14 text

作ったものについて

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

Prism 各正方形の RGB が変化する R と G はカーソルからの距離 B はサイン波色は即座には変化しないカーソルに近いものから変化

Slide 17

Slide 17 text

カーソルに近いものから変化させるマウスの座標と正方形の座標を比較して変化後の色を算出変化後の色と現在の色の差をマウスと正方形の距離で割って今回の変化量を算出

Slide 18

Slide 18 text

様々なパラメーターがあるそれぞれの色を変化させる方法固定値、マウス座標、時間経過など色の変化の振れ幅色の変化が波及する速度

Slide 19

Slide 19 text

パラメーターを UI 上で操作できるようにするコードに触らずに最適な演出を探れる元々はブルーパドルの橋本さんというエンジニアが Adobe MAX で話していたものデザイナーが演出の調整をするために作ったこれ自体を見せたら面白そう & 勉強になりそう

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

どうやって作ったのか Nuxt.js 単に一番慣れてるだけで深い意味はない今考えると素の Vue.js でも良かったかも……？ UI ライブラリ等は不使用一度フルスクラッチすると勉強になるかなと思い

Slide 22

Slide 22 text

主なコンポーネント Pulldown 色の変化方法の選択に使用 Slider 数値系の入力に使用がっつりスタイル当てるのでは不使用

Slide 23

Slide 23 text

コントローラーの自動生成最初は操作したい変数を増やす度に手で追加毎回 6 箇所くらいの変更が…… Store から自動生成する形に変更箇所が Store と Canvas だけに

Slide 24

Slide 24 text

まとめ

Slide 25

Slide 25 text

作ってみてどうだった？ Canvas 2D 自体は割と単純あくまで「どう描画するのか」のみなので「何を描画するのか」のロジックが肝ライブラリ不使用のフルスクラッチにチャレンジしてかなり良い勉強になった気がする

Slide 26

Slide 26 text

おまけ

Slide 27

Slide 27 text

今後やること1: スケッチの数を増やすビジュアルプログラミングが楽しくなってきた単純に作品数は増やしていきたい WebGL にも手を出す p5.js などのライブラリはガンガン使っていく数学も勉強……する……はず

Slide 28

Slide 28 text

今後やること2: リファクタリング素人目にも設計がかなり怪しいとりあえず動けば良かろうでここまで作ったため見てるだけで目眩のする mutation なんかが単純なタッチ & フィールも詰めきれていない部分が

Slide 29

Slide 29 text

おしまい