お絵かきツールを作る講座
https://gyazo.com/b93591b57f5491bb126b78e6b65f863d
p5.jsでやるお絵かきツール
試作品
作成手順
まずScrapbox上で内容を書き下す
サンプルソースコードを作り込む
画像素材などを撮影
Zennに転記
執筆用ショートカット
お絵かきツールの作り方
対象読者
JavaScriptの基礎を知っている
お絵かきツールの機能
基本
線を引く
消しゴム
保存
読み込み
たいていあるもの
ズーム
レイヤ
筆圧
コピペ
カスタムペン
塗りつぶし
Level0
固定座標に線を引く
Level1
キャンバスを作る
線を引く
mouseup, mousedown
Level2
色を選ぶ
Level3
筆圧
保存
カスタムペン?
毛筆とか
テクスチャ
Level4
再設計が必要
ズーム
オフスクリーンCanvasベースにする必要あり?
あるいはCSS transformでやる方法もあり
レイヤー
消しゴム
塗りつぶし
サムネイル
パン
所感
筆圧はなしにしたほうが楽かも・・・(p5.jsの枠組みではできない)
筆圧があると簡易に作った部分のあらが目立ちやすい
mousemoveの時間方向の解像度が足りていない
これ適用したらchromeで描線が改善した
iOSにもほしすぎる