私はStanley Lieberを殺していない：9frontで絵を描く方法
(triapul.cz)- 9frontで絵を描く全体の流れを
paint(1)を中心に整理し、入力デバイスの選択からキャンバス管理、画像操作、書き出しまでをつなげて説明 - 作業は9front内部の image(6) 形式で行い、
paint(1)で描いたあと、page(1)、crop(1)、vcrop(1)、resize(1)、rotate(1)で成果物を調整する方式 paint(1)には筆圧検知、レイヤー、切り取り/貼り付けがないため、ユーザーが紙のように作業領域と色を自分で管理する必要がある- マウス、指、ペン、外付けタブレット、drawterm/VNC入力をすべて扱うが、ペンのボタンはマウスクリックをまねるため、キーボードとマウスを近くに置く構成が実用的
- 外部共有には PNG変換 が適しており、PNGやJPGは
paint(1)、crop(1)、vcrop(1)の直接編集対象ではないため、必要なら再び9frontのimage形式に変換する必要がある
9frontで絵を描くための基本構成
- 絵を描くには「描く道具」と「描く面」が必要で、9frontでは実際のペン入力デバイスだけでなく、複数の入力方式を使える
- 9frontが動作するコンピューターなら
How to drawに沿って試すことができ、画面に直接描けるデバイスが欲しいならWacom対応の2-in-1ノートPCが適している - 実際に良好に動作したデバイス一覧は次のThinkPad系
入力デバイス別の特徴
- マウス描画は古い方法だが、マウスがあるすべてのコンピューターと互換性があるという利点がある
- 指入力では画面タッチが左マウスクリックをまねるが、ほかのクリックは代替できないため、マウスを近くに置く必要がある
- 外付けタブレットは、画面付き製品は9frontで動作しない可能性があり、画面なし製品は動作することがある
- 推奨デバイスは GAOMON S620 で、9frontではプラグアンドプレイで良好に動作する
- Wacom CTL-672は相対座標タッチパッドのように動作する
- Wacom CTL-490は動作しない
- 関連情報は [fqa] 3.2.4 - Tablet Digitizers にある
- キーボードだけでまともに描くのは難しいが、
paint(1)の作業にはキーボードが必要- 物理キーボードへのアクセスが難しいタブレットコンピューターや特殊な環境では、
bitsy/keyboardのオンスクリーンキーボードを使える - 実行例は
rio -k 'bitsy/keyboard -n'
- 物理キーボードへのアクセスが難しいタブレットコンピューターや特殊な環境では、
- drawterm/VNC を使うと、リモートまたは仮想の9frontコンピューターに接続し、より多様な入力デバイスを利用できる
- Android電話で指で描いたり、LinuxとMacOSでマウスで描いたり、Windowsで9frontが直接サポートしない入力デバイスを使ったりできる
- 関連サイトは drawterm.9front.org
image(6)形式とpaint(1)の前提
- 9frontでの描画、切り抜き、画像操作は内部の image(6) 形式ファイルで行われる
- 絵を作っている間は形式をあまり気にしなくてもよいが、外部に共有するには別の形式へ変換する必要がある
- ファイル名は
file.picのような方式を例にしているが、好きな名前を付けられる - この案内では、9frontの複数の描画プログラムのうち
paint(1)だけを扱う paint(1)は一般的なデジタル描画プログラムよりも、紙、インク、色で描く作業に近い方式として考える必要がある
paint(1)の制限と基本操作
- ペンとタブレットのボタンはマウス入力をまねるもので、この案内ではすべてマウス操作として表現する
- 画面上に浮かせている状態はマウス移動
- 表面に触れると左クリックまたは押し続け
- 理想的なペンには中クリックと右クリック用のボタンが2つある
- 右クリックだけできるボタンがある場合は、Shiftを押しながらボタンを押すことで中クリックをまねられる
paint(1)と9frontは筆圧検知をサポートしない- レイヤーと切り取り/貼り付けもなく、描いたそのままが成果物になる
- 保存と読み込みはキー入力で行う
w: ファイルを保存r: ファイルを開く、または再読み込み|: 現在のキャンバスをコマンドへパイプして変換< command: コマンド結果をpaint(1)に読み込み、現在のキャンバスを置き換える> command: 現在のキャンバスをコマンドに渡してファイルへ書き出す
- 作業例は次のとおり
| rotate -u: キャンバスを回転< crop -i -50 glenda.pic:glenda.picに50ピクセルの黒い縁を追加して開く> crop -i -50 | rotate -r 90 > modified_glenda.pic: 現在のキャンバスに縁を追加し、90度回転して保存
キャンバスはピクセルが置かれた範囲で決まる
paint(1)におけるキャンバスとは、絵を含む長方形領域のこと- 起動直後の白いウィンドウは空のファイルであり、最初のピクセルを描くか消したあとで初めてキャンバスが作られる
paint(1)は最も遠くに置かれたピクセルをキャンバスの境界とみなす- ウィンドウサイズはキャンバスサイズを決めない
- 消しゴムで消したピクセルも、ピクセルを置いたものとして扱われる
- 最初に作った
paint(1)ウィンドウサイズを作業キャンバスのように考え、隅にトリムマークを描いてから作業する方法が推奨される - 正確なサイズの絵が必要なら、別手順で固定サイズのキャンバスを作り、作業後に切り抜き計算や余白除去を行う必要がある
paint(1)の主なツール
- ツール選択は下部ツールバーを左マウスでクリックして行う
- 色
- 左クリックで色を選ぶ
- ツールバーの色を右クリックすると16進コードを入力してパレットを変更できる
paint(1)は終了後にパレットを記憶しないため、新しいウィンドウを開くたびに再度変更する必要がある- 16色より多く使うには、複数の
paint(1)ウィンドウで同じ画像ファイルを開き、wとrで同期できる
- ブラシ
0-9または左マウスでブラシサイズを選び、ドラッグして描く
- 塗りつぶし
f、c、左マウス、中マウスを使う- 同じ色でつながったピクセル領域を別の色に変える
- 背景色の変更にも使われ、背景色は消しゴムが変更する色になる
cはすべてを削除し、選択した色を背景に変えて空ファイル状態にする
- 消しゴム
0-9、中マウスを使う- 現在のブラシサイズと同じ大きさで、カーソル下を背景色に変える
- 直線と円
- 直線には定規を使う
- 円は、平たく丸い物体やトレーシングペーパーにコンパスであらかじめ描いた円をなぞる方式を使う
- 移動、拡大、取り消し
- 右マウスを押しながら動かすとパンする
-、+で拡大/縮小するが、元の拡大率より遠くへは縮小できないEscは拡大率をリセットし、キャンバスを中央に合わせるuは最後の連続線分を取り消し、長い1本の線も複数のundo段階に分かれることがある
擬似レイヤーと色ベースの除去
paint(1)にはレイヤーがないが、実際には使わない色でスケッチし、その上に線を描く方式で擬似レイヤーを作れる- 例ではHotPinkをスケッチ色として使い、完了後にその色だけを除去する
- 手作業で塗りつぶしや精密な消しゴムを使うと時間がかかるため、
picoで特定の色を背景色に置換する方法が有用 picoは次のコマンドで取得できるgit/clone https://github.com/qwx9/pico
- 関連説明は Image Manipulation on Plan 9 Using pico にある
- HotPink
#ff5fd7の10進RGB値は255, 95, 215で、pc(1)で変換する例を含む
page(1)、crop(1)、vcrop(1)、resize(1)、rotate(1)
page(1)はドキュメントビューアであり、複数の画像形式、PDF、電子書籍などを表示するために使われるpage my_picture.picで絵を見られる- 画像操作結果をファイルに書き出す前に
page(1)で確認する習慣が推奨される page(1)でもwを押して表示中の結果をファイルに保存できる
paint(1)ウィンドウより絵が大きくなった場合は、別のpage picture.fileウィンドウを作り、fit widthやfit heightでプレビューウィンドウのように使えるvcrop(1)はグラフィカルな切り抜きツール- 左マウスでパン
- 中マウスで切り抜きツールを選択
- 右マウスで保存などのオプションを表示
- 拡大できないため、ウィンドウより大きい領域を切り抜く場合や、ピクセル単位の精密な切り抜きが必要な場合には限界がある
crop(1)はピクセル行/列を削除または追加するcrop -x 50 mypic.pic > mypic_crop.pic: 左右から50ピクセル切り抜くcrop -i -10 -b 255 255 255 mypic.pic: 10ピクセルの白い縁を追加
resize(1)は絵を大きくまたは小さくする- 元の比率を維持するには
-xまたは-yのどちらか一方だけを指定する - 例:
resize -n -y 245 mypic.pic > mypic_resized.pic
- 元の比率を維持するには
rotate(1)は画像を90度単位で回転できるrotate -r 90 my.pic > rotated.my.picrotate -ul > flipped.my.pic
正確なキャンバスサイズの作成と切り抜き戦略
- 250x250のような正確なサイズが必要なら、空画像を作り、
resize(1)で望むサイズを作ってからpaint(1)で開く手順を使うw empty_canvas.picresize -n -x 250 -y 250 empty_canvas.pic > empty_canvas_250x250.piccp empty_canvas_250x250.pic mypicture.picpaint mypicture.pic
paint(1)はキャンバス境界を越えて描くことを止めず、境界を越えると絵のサイズを拡張する- 選択肢は3つ
- 境界を越えた線を気にせず、作業後に数学的に切り抜く
- 作業前に余分な均等余白を追加し、完了後に除去する
- 隅にトリムマークを描いておき、あとで切り抜く
crop -r a b c dは画像の絶対座標を使って切り抜き、dd -bs 128 -count 1で座標を確認できる- 余白方式では、たとえば250x250の白いキャンバスに25ピクセルの赤い余白を付けて作業し、終わったら
crop -i 25で除去して正確な250x250の結果を得る
トレーシングとパレット
- インターネット画像を取得して9front形式に変換したあと、
picoで明るくしてpaint(1)でなぞれる- 例:
hget http://img.triapul.cz/fahwui.jpg | jpg -c9 > to.trace.pic picoでz == 3 ? Z : (im + Z) / 2により画像を明るくする
- 例:
paint(1)でHotPinkのような特定の色で線をなぞったあと、picoでその色だけを残し、残りを白に変えられる- パレット関連資料として git.sr.ht/~amavect/makeu がある
外部への書き出しと共有
- 9frontで描いた画像は実質的にピクセルアートなので、PNG に変換することが推奨される
- PNGはJPGより常に小さく鮮明で、
paint(1)で見えていたとおりに見えると整理している - PNGやJPGのような別形式は
paint(1)、crop(1)、vcrop(1)で直接扱えないが、page(1)では表示できる - 元ファイルを失った場合は、PNGを再び9front形式に変換して編集できる
png -c9 my_picture.png > my_picture.pic
- 成果物を別のデバイスへ移す方法は、単純なものから複雑なものまでさまざま
page(1)で開いて携帯電話で画面を撮影- FAT USBドライブを接続して
/shr/sdS0M3TH1NGへコピー sshfs(4)でUnixコンピューターへ転送- Unixコンピューターからdrawtermで接続し、
/mnt/term/some/whereへコピー mothra(1)でsnacに投稿- 9frontコンピューターから自分宛てにメール送信
- 9front内の仮想マシンへ
sshfs(4)で転送 - 9frontウェブサーバーにコピーしたあと、別のデバイスでダウンロード
1件のコメント
Lobste.rs のコメント
9front の Mothra で書いた
もしかすると、自然な細かな揺らぎが Bresenham の線より見栄えを良くすることもあるかもしれない
それでもコンパスをタブレット表面に直接当てず、トレーシングペーパーの上で使ったのは幸いだ
ただし大半は意識して避ければ済む問題なので、人工的な精度よりも物理的なガイドを使うことを強く勧める
針の側をコルクのワイン栓の切れ端に刺せば、うまく動きそう :^)