自動勉強会 vol.1 ペイントツール作製技術 後半
from ペイントツール作製技術全般
作ったものアピールコーナー（希望者）
前回からのアップデート: えんぴつチャットの多人数アンドゥ(詳細は0回の)
描画領域が重ならない限り多人数でもアンドゥができる
重なると先に書いた人はアンドゥできなくなるが、あとから書いた人がアンドゥするとブロックが解除される
自由課題の回答例（問題あり）
水平塗りつぶし
floodFillRecursive 領域検出が隣接ピクセルへ単純に再帰で調べるので広すぎるとスタックオーバーフローする
塗れる領域がマスクだけされて、塗るのは自分やる(=手動)←面白い
塗れるマスクの算出が普通の塗りつぶしのコードと等価
あえて塗り残しを表現したいときに有効な技
画材をつくっているようなものなのでいろんな表現があると楽しい by 
誰かアンチエイリアスかかってる線に対する塗りつぶし時のフリンジを解決してほしい
収縮と膨張、オープニングとクロージング
前回の線が開いてる領域への塗りつぶしでも出ててきたやつですね
筆圧の表現
これ分かりやすい
Some CSS がなんなのか
メタボール的なので滑らかにしてる？？
ああ、CSSでメタボールするテクニックありましたね
それくらいしかCSSで滑らかにするものない
手書きの知見に溢れるツイートが多いアカウント
パラメータ
速度
8bitペイントではブラシスクリプトという機能を使って自分で実装することができる
luaでかける←まじかよ
ブラウザで動かすようにしてるライブラリ何です？
C (WASM)
wasm の中なら安全 
figmaはJSでプラグインかける。JSを安全に実行できる方法があるのではないか。気になる。
iframeの中で実行した結果だけ返してもらうとかはありそう
figmaはなんかjs sandboxつかってるらしい
なるほど
筆圧
この↓の筆圧の調整の曲線、キャリブレーションの意味合いもあったりするんだろうか？
Apple Pencil のストロークはじめ10ms程度がかなり強めにぶれる→デベロッパー側が捨ててやる必要がある
他のデバイスではそういうことはない。描きごこちを最大化するために仕方がないのかもしれない
生のデータ、ろくなことなさそう
変化の曲線
既存のアプリでいじれるものも多い
クリップスタジオの例:
ガンマカーブ(ディスプレイ調整とかに使われてる奴)を使ってます(8bitpaint)
0-1に正規化した筆圧値を2乗したり1/2乗したりしていい感じの曲線
硬さ→大きいとグラフは下に膨らみ目、筆圧が小さいうちはより細めに、強くするといきなり太く
1つの指標でシンプルに表現できるようにした。クリスタなどはスプライン(?)で細かく設定できる
カーブというインターフェイスいいですよね…… X to Y の写像を人間に分かりやすく示してくれる
主要ツール
図形ツール
パスファインダ（イラレみたいな）を簡単に行えるライブラリはありませんか…？
安定のpaper.js？
ただ、ポリゴンしか対応していないですが・・・
あと邪道だと思いますが、ラスタライズしてからboolとって、そこからトレースしてベクターに戻すというのを見たことあります
Canvasのブレンドモード（↓の消しゴムの話）使えばベクターに変換する必要ないのでは？
globalCompositeOperation
8bitpaintの図形ツール
直線ツール動かしてる最中のプレビューあるのいいですね
これ描画はどうやってやってます？
Canvasで普通に描いてます
やっぱりこれはjs側です？（前回、描画のコアライブラリはwasmだという話だったので） → はい
バケツ (flood fill)
8bitpaint 高解像度の2値が正義です！アンチエイリアスは敵だ！
ひょええ
いい話だ！
そういえば、サブピクセル独特のにじみが苦手。
-webkit-font-smoothing: subpixel-antialiased と関係ある…?
Macのフォントアンチエイリアスの調整に使いがち
これでサブピクセルを切るとシュッとするのでよくやります
消しゴム
canvasのブレンドモード
便利な機能がありそう。（未経験）
destination-out使いがちです
ベジェの切断
再帰的にbezierを分割してやる?
ベジェの外形を削る
消しゴム ≒ 白のペン で考えてます。
ベクターデータ量が増える問題
レイヤーを考えると、下のレイヤーを塗りつぶしてしまう。
さくっとCanvasでマスクして転送しましたね
Blenderのグリースペンシルで消しゴムみたいな機能があった気がしますが、あれどうなってんだろ
選択範囲
選択ペン（選択領域のブラシでの描画）
選択範囲にアルファあるってことですか？ → です。選択範囲のふちをぼかすコマンドとかありますね
2値ならともかくぼかしてあるまま広げるの面倒そう
なげなわ
変形
回転・リサイズ
繰り返し実行しても劣化させない工夫はあるか
自由変形
そもそもどういうアルゴリズムがあるの？
手前味噌&今読むと読みづらいところもありますが
射影変換、要するに４点を一つ次元の高い空間でいい感じに線形変換して元の次元に落としたもの
と思ってるけど正しいんだっけ
paintvecにちょっと実装しました
1点→1点: 平行移動, 2点: Translate, Rotate, Scale, 3点: アフィン変換, 4点→射影変換
cv2.findHomographyが便利でした
パース変形
メッシュ変形
ワープ変形
Procreateのが使いやすい https://rakutenoyaji.com/?p=4940
8bit paintの変形
CSS Transform 3D...!
なるほどー
描画中のプレビューはCSSに頼って労力減らしていくのよい
めっちゃいい
Cyriak, AC部がよく使ってますよね...
使えるソフト
AfterEffects, Photoshopの「パペットワープツール」
picmo
補間アルゴリズム (nearest neighbor, biliear, bicubic...)
canvasはbilinearのみ…?
imageSmoothQuality の low, medium, high は何に相当するのでしょうか...?
仕様が強制してないということが分かった
実装依存ですねー……
UI周り
パレット
デフォルトの色選びをどうしたか（例えば30色ぐらいデフォルトパレットを選ぶときに使いやすい色を選びたい）
デジタル８色使ってますが、中間色を表現しにくい。
Google 描画キャンパスのパレットは、自然な色で良さそうです。
@simonwep/pickr はカスタマイズ楽で助かりました
macaronのカラーピッカーのデモ
画像背景の設定もできる←めちゃ便利そう
figmaはすぐにこれをパクれ
VSCode プラグイン...!
Custom Editor API しんどい
WebViewを別のコンテキストで色々
Electronとかと同じ感じですかねー？ ElectronとかWebWorkerとか、そっち側に知見があるんじゃないかなあ
undo管理とエディタ自体を別processで管理しないといけないのがつらい
同じファイルに複数のwebviewが作られる可能性もあるのが大変 (offにはできる)
アンドゥ
これを同時編集対応しようとすると結構エキサイティングになる 
Figmaのこの記事がわかりやすかったです
実装したよ！(えんぴつチャット)
レイヤ
合成モード
https://www.w3.org/TR/compositing-1/ CSS/SVGのブレンドモードの仕様がわかりやすかった
合成モードの式の一覧が載っててありがたい
あれキャッシュしてるんですかねえ
パレット使って避けた（256 png 8ビットあるから色が塗られているかのフラグを8色分持てる）
あまり書かれてないレイヤーのメモリを節約する方法 (タイリングとか?)
UIデザイン
カーソルの見た目
UIが参考になるペイントツール
SAI
Procreate
参考というべきかわかりませんが, base16でUIのスキンを変更出来る仕様にしてます..
いいですね!
保存
8bitpaint の「PSDで保存」、気になります...
そのまんまの機能ですよ
JSでどうエンコードするのかという話でした🙏
c(wasm)で独自実装です
↑!!!!
まじかー
バージョン3くらいの古い仕様書を読んで自分で実装した（Windowsのツールとして）
動画はローカルで作ってる
mp4-encoder.jsだったか
動画はjsのライブラリにCanvasを渡してる
ffmpeg wasm
? [hashrock.icon]→ 違った MediaRecorder API ってどうなんだろう…?
https://github.com/spite/ccapture.js/ この辺で使われてましたAPI単体だけどWebMしか出せなかったはず？
コンテナはWebMだけど中身はmp4とかでよく使われるやつ入れることができる？