ドラッグで画像に竹を追加できるやつ作った！

何を作ったか

画像^[1]に

竹を追加できます。

ドラッグして追加できるので大きさは自由です。

URLはこちらです。
repositoryはこちらです。

なぜ作ったか

画像処理100本ノックをPythonで完了し、目次を眺めるとそこにはJavaScriptの文字が。素のJavaScriptで何か画像処理をしたいと思い立ち、はや30秒。矩形の描画なら簡単だろうと考えました。鬼滅の刃の禰豆子の竹を思い出し、実装に至ります。
完全に自己満足です。
トリミングやアフィン変換で回転や拡大縮小など、いろいろ対応しようかと悩みましたが、まずは一度完成させることが大事だなと思いCanvasでちゃっちゃと作りました。
画像処理と言うより、Canvas処理といったほうが正しいです。

得られたこと

画像処理をするならMATLABやPythonを使ったほうが画像の読み込みや画素の指定など、いろんなことが楽。言語やライブラリの選択は大事。
GitHub Pages面白い。

僕のアイコンでも試してみました。

脚注

1. Christine SponchiaによるPixabayからの画像