手描きフリードローイング・塗り絵　マメヌリｖ１．０

ヘッダーの【Description】でボタン・設定の説明を表示できます。

あおそらまめページ(本)を読んで、表紙、挿絵を描きたくならない？。それが作り始めです。マメ『ヌリ』の名称のとおり、塗り絵ができる描画ツールにしてみました。

ページを開けば描画できる状態になっていますので、色と線幅を変えながら何か描いてみてください。【描画Clear】で描いた線を消せます。

上のキャンバスは、♨に入ったしし爺ぃの顔と言葉にしない言葉、しししー君(もこもこすーつレッドスターver)の顔を空にしてあります。下のキャンバスは、ぶーすたーの塗り絵になっています。

マメヌリは、小さなキャンバスに簡単に手描きできるツールです。前景にPNG画像で作った線と透明背景の画像を読み込むと、キャンバスを塗り絵のように使うこともできます。前景・まん中(キャンバス)・背景・背景色のレイヤ構造になっています。生成したPNG画像を、他のレイヤに読み込むこともできます。同じ背景で前面の絵を変えることもできます。ちょっと面倒かもしれませんが、画像を保存・読み込みしながら多層を組み合わせて画像を作ることもできます。

レイヤ構造？。ガラス窓があります、窓を開けます、窓が開いてガラスが重なります、重なったガラス越しに外を眺めます。ガラスに絵を描きます、小さいポスターを貼ります。どう見えるでしょうか？。マジックのように半透明なもので描いたら？、ペンキをあつく塗ったら？。そのものではないですが、ガラスかアクリル板が重なっているようなものだと思ってください。風景＝背景ではありません、アクリル板が４枚重なっていると思ったほうが分かりやすいかもしれません。

各レイヤで出来ることは次の通りです。

・前景：画像読み込みのみ
・まん中(キャンバス)：画像読み込み、手書き描画、かんたんな編集
・背景：画像読み込みのみ
・背景色：単色(あるいは透明)でベタ塗りのみ

【描画】をオンすると、マウスをドラッグして線を描けます。【描画】をオフすると編集モードにはいります。キャンバスに描いた線、読み込んだ画像をクリック、あるいは、ドラッグでつくる矩形領域で選択できます。

複数の線や画像を選択すると、グループ化されて、ひとつのかたまりとして扱えます。選択するとガイドが表示され、上に出たガイドの□をドラッグして回転できます。周りに表示されている矩形のガイドにある□をドラッグしてＸ方向・Ｙ方向・ＸＹ方向に拡大、縮小できます。Ｘ方向・Ｙ方向は、対辺を超えるとミラー反転します。線(の透明ではない部分)や画像をドラッグすると移動できます。

ガイドは、他の線を選択すると表示が切り替わります。ガイドを消したいときは、選択中の線や、他の線がない(透明な部分の)キャンバス上をクリックしてください。

ブラシ詳細設定

右上の【巻物】を押すと詳細設定を開閉します。現時点でPencil、Circle、Spray、Patternブラシが使えます。詳細設定変更後は【SetBrush】を押してください。

BrushType

LineCap(Pen,Pattern)
LineJoin(Pen,Pattern)

density(Spray):set
140
dotWidth(Spray):set
140
dotWidthVariance(Spray):set
140
optimizeOverlapping(Spray)
randomOpacity(Spray)

【BrushType】ブラシを選択します。Circleブラシは透明色になりません。

【LineCap】ブラシの端点スタイルを選択します。マウスをクリックしてキャンバスに点をうつと違いが分かります。

【LineJoin】ブラシのコーナースタイルを選択します。手描きの線ですので、コーナーにスタイルが効かないこともあります。参考設定です。

【density】Sprayのドット(■)数を設定します。

【dotWidth】Sprayのドットサイズを設定します。

【dotWidthVariance】Sprayのドットのばらつきを設定します。

【optimizeOverlapping】Sprayのドット重なりを削除します。(効果？)

【randomOpacity】Sprayのドットの透明度をランダムに設定します。(効果？)

PatternSrc(Pattern)

【PatternSrc】Patternブラシのパターンを選択します。現時点でPolkadot(水玉)のみです。

280×280 キャンバス

Alpha:set
01
Brush width:set
140
(Pen)
SetBrush

２面のキャンパスに共通の設定です。

【色】クリックするとカラーパレットから色を選べます。

【16進数3桁or6桁カラー】色を16進数(テキスト)で入力することもできます。

色の設定は、一方の入力を他方へ表示します。他のwebページなどの色見本から色を選んで使いたい場合や、他のツールを使って画面からカラーピックする場合などは、16進数の入力に色データを貼りつけて使えます。

【Alpha】色の透明度を指定します。0を設定すると透明色になります。

【Brush width】ブラシの幅を指定します。

【SetBrush】ブラシ詳細設定値を設定し、選択しているブラシとブラシのカーソルを表示します。詳細設定は、このボタンを押した時点から有効です。

色、透明度、ブラシの幅は、設定値を変更した時点から有効になります。同じブラシ設定であれば、色、透明度、ブラシの幅を変更した後にブラシ詳細設定値のボタンを押す必要はありません。

???
STOP ???

現状の???は、上のキャンバス(No.5)に描いた絵を選択してボタンを押すと別キャンバスに表示して動きます。付録の機能です。動きに合わせた絵を描いてみるのも面白いかもしれません。

【???】???を始めます。

【STOP ???】???を終了します。ボタンを押した後、絵が端まで移動した後に終了します。

前景
まん中
背景
画像ファイルを選択してください
前背画像
Clear
前透
背透
描画
背景塗り
描画Clear
選択Clear
toPNG
Fit280

上のキャンバス(No.5)用のボタンです。

【前景】前景を選択します。

【まん中】まん中(キャンバス)を選択します。

【背景】背景を選択します。

【画像ファイルを選択してください】前景・まん中・背景の選択面に画像を読み込みます。

【前背画像Clear】前景・背景の選択面の画像をクリアします。

【前透】前景を透明にします。

【背透】背景を透明にします。

【描画】描画をオン・オフします。

【背景塗り】選択している色で背景色をベタ塗りします。

【描画Clear】まん中(キャンバス)に描いた線、読み込んだ画像を全てクリアします。

【選択Clear】選択している線や画像をクリアします。

【toPNG】４つのレイヤを統合して、画面に表示されている280×280のPNG画像を生成し別ウインドウに開きます。その画像を右クリックして画像を保存できます。保存方法は、使っているブラウザの使い方を確認してください。

まん中(キャンバス)の線、画像が選択されている状態でガイドが表示されていても生成するPNG画像にガイドは表示されません。

【Fit280】選択した線、画像を280×280に拡大縮小してフィットさせます。

前景
まん中
背景
画像ファイルを選択してください
前背画像
Clear
前透
背透
描画
背景塗り
描画Clear
選択Clear
toPNG

Fit280
Fit280
aspect
threshold:set
0255
distance:set
0255
ReWhite

下のキャンバス(No.55)用のボタンです。上のキャンバスと同じものは説明を省略します。

【Fit280 aspect】選択した線、画像を280×280に拡大縮小してフィットさせます。縦横の比率を維持して、長手を280に合わせます。

【threshold】白を透明にする設定です。スレッシュホールド(閾値)を指定します。

【distance】白を透明にする設定です。ディスタンス(色差)を指定します。

【ReWhite】選択した画像の白を透明にします。

前景・背景画像サンプルにグラディエーションのパターンを置いてあります。まん中(キャンバス)に読み込んで試したほうが分かりやすいかもしれません。スレッシュホールドを大きくすると暗い白を置き換えの対象にします。ディスタンスを大きくすると他の色も置き換えの対象になります。
jpg画像や手書きの写真を読み込んで白い部分を透明に置き換えるための簡易機能です。他の画像処理ツールを使えば、より精度をあげた白抜きができると思います。

白を透明にした画像は、【toPNG】でPNG画像にできます。PNG画像を前景に読み込めば、透明部分を塗る、塗り絵用の画像に使えます。