M5Stack：「くっ！ガッツが足りない！」…でも何とかなるツール

に が投稿

CGのデータなのですが、テストで使ってたナウシカデータの配布はできませんので、皆さんにも「ガッツでC.G.!」などの書籍を何とか入手してもらって、打ち込んでもらう必要があります…。

…というのはあまりにも厳しいと思いますので、自分でデータを作成できるツールを作成しました。JavaScriptでブラウザ上で動作します。640×480ピクセルで作成して、M5Stackでの表示時には1/2に縮小されて描画されます。

ガッツでC.G.！サポートツール
https://shikarunochi.github.io/gutsdecg/

上記URLを開くと、描画枠が表示されますので、見本となる画像を読み込みます。半透明で表示されます。

[LINE]モードで、黒色で線を引きます。[COLOR]モードだと、書き初めの位置の見本画像の色で線が引かれます。

[PAINT]モードで、塗るところを点で指定します。その位置の見本画像の色でペイント指定がされます。

[タイムスタンプ]を押すと、データのその位置にコメントでタイムスタンプが入ります。あとでデータの手動修正したい時などの目安にどうぞ。

[クリップボードへコピー]で、データをクリップボードにコピーします。そのままテキストファイルに張り付ければ、CGデータのできあがり！やった！

M5StackのSDカードにコピー。ファイル名はmain.pyに書いたやつに合わせてください。

あれれ、線が閉じていないところがあった…。
完成するまでは、ブラウザはそのままの状態にしておいて、実機実行時に線の囲みもれや、塗り漏れを発見したら、都度データ追加＆再度出力していくといいと思います。
ちなみに、UNDOはありません！修正が必要なら、出力されたデータを編集するのです。

再チャレンジ！

バッチリ！

動作はこんな感じです！

ツールはいろんなところのソースを参考にさせていただきました。ありがとうございます。JavaScript の canvasを初めて使いました。

座標取得して絵を描く基本的な流れは、こちらほぼそのまま。

JavaScript でマウス座標を取得し、Canvas上に線を描画
https://gist.github.com/Cartman0/436459b9b85cfdd1ca9c

ローカルファイルの読み込み

Tips Note by TAM：
File APIとCanvasでローカルの画像をアップロード→加工→ダウンロードする
https://www.tam-tam.co.jp/tipsnote/javascript/post13538.html 

アスペクト比保持読み込み

Qiita：【問題】アスペクト比を維持して画像を表示【JavaScript,Canvas】
https://qiita.com/PG0721/items/599ba2921b8339700fe3 

クリップボードへコピー

Qiita：JavaScriptでクリップボードに文字をコピーする(ブラウザ)
https://qiita.com/simiraaaa/items/2e7478d72f365aa48356

画像から色を取得

プチモンテ：画像の指定位置の色(RGBA)を取得する
https://www.petitmonte.com/javascript/get_image_color.html

描画データを作るためにとりあえずとして作ってみたツールなので、機能足りないところいろいろあると思います。好きな色でぬれないとか、Undoできないとか。
どうせ描画データぜんぶ保持してるんだから、ストロークごとにデータ保存すれば、Undoや、1ストロークの描線消去も、わりかし簡単に実装できそうな気がしてきたぞ…。