はてなハイクお絵かき機能の3種類のペンの違い

ブラウザから気軽にお絵かきができる、はてなハイクですが、そのお絵かき機能には3種類のペンが用意されています。これについて半径ワンクリック圏内で、違いがよく分からない、という呟きを2.3件見かけたのと、先日から試験的にですがはてなダイアリーでも利用できるようになった

d2.hatena.ne.jp のその場編集モードでお絵描き機能や動画が挿入できる機能の実験を行っています - はてなダイアリー日記

のでちょっと解説エントリーを書いてみました。

はじめに、と結論

まず始めに3種類のペンというのは何か？という点から。
はてなハイクにはキーボードショートカットを入力することで、いくつかの機能を利用することができます。Ctrl + Z で一つ元に戻す（アンドゥ）、0 / 1 / 2 / 3 でペンの太さを変更、Bで塗り潰し（バケツ）など。

参考：はてなハイクのお絵かきキーボードショートカット一覧 - はてなハイク日記

という機能のほか、同じく C / V / N でそれぞれペンの種類も変えることができます。

で、結論から言えばこういう違いになります。

（それぞれのモードで四角を書いた場合の違いを図にしてみた。 ... cモ... - はてなハイク・お絵かきモードのTips - I000i000I - はてなハイクより、とても簡潔でかつ分かりやすいので引用させていただきました）
この図を見ただけで、あぁなるほどーそういうことかぁ、と理解できる方は、以下の説明は蛇足なので読み飛ばして構いません。

また実際どんな書き味か？というのは、はてなユーザー以外でもこちらから試すことができます。

http://h.hatena.ne.jp/js/SimpleOekaki.swf?canvasWidth=600&canvasHeight=400

※ただしここで描いたものは保存ができません（ログイン時も）のでご注意を。しかし、Firefox で利用した場合、キーボードショートカットの O で、新しいウィンドウにPNG形式で出力ができるので、試しに書いてみてはいかがでしょうか。

以下蛇足ながら3種類のペンそれぞれの解説

手ぶれ補正

何も設定しない最初の状態のペン……キーボードショートカットで C のペン……には手ぶれ補正がかかっていますが、こちらについてはてなハイクリリース直後の id:secondlifeさんはこう語っています。
はてなハイクお絵描き機能の話 - 2nd life

その短い時間の中でもちょっとこだわってみたのが、マウスでの書き心地です。はてなハイクのお絵描き機能ではじっくりタブレットを使って描いて貰うというよりは、いろんな人に気軽に数十秒で書いて欲しい、そんな思いがありました。
はてなハイクお絵描き機能の話 - 2nd life

しかしながら、通常のマウスの軌跡をそのままレンダリングしてしまうと、線ががたがたになってしまう、という問題があります。そこでマウスの軌跡をスタックに貯めて、なんとなくなめらかになるように補正するようにしたところ、マウスでも結構心地よく描けるように！。
はてなハイクお絵描き機能の話 - 2nd life

とのこと。
つまりどういうことか？というと、試しに手ぶれ補正のかかっていない、V のペンで円を描いてみます。
ちなみにマウスを使って描いてます。

こんな風になりました。よく観ると、キレイな曲線ではなくちょっとガタついていますね。私はマウスを使うときには、アームレストに手をつけて動かすのでどうしても、描線が悪くなってしまいます。

で、今度は同じようにマウスで描くのですが、手ぶれ補正の効いている C で描いてみたもの

これだとサラッとした曲線になります。拡大して比較してみたところ*1

手ぶれ補正はこのように、手の細かいぶれを補正しなめらかな曲線に仕上げています。
なので、補正の効いてる C のペンはマウスであっても、曲線が手軽に引けるため、気持ちよく描けるわけですね。

しかし、手ぶれ補正があることのデメリットもあります。

デメリット

今度は四角を描いてみました。まずは手ぶれ補正のない V のペンから。

まぁ普通に四角です。

次は手ぶれ補正のある C のペン。

こちらは、角が丸まってしまっています。
ここでは線を滑らかにする補正が効き過ぎるために、角が丸まってしまい目的の図が一発で描けなかったりします*2。

特にマウスではなく、ペンタブレットを利用している場合、補正がなくても自由にキレイな曲線を描けますし、また細かい部分では却って補正が煩わしいこともあります。

……というわけで

マウスで気軽に描ける手ぶれ補正は便利
しかし、慣れてきたり、ペンタブレットを利用していると、不必要になるので補正を切る方がいいかも

というところでしょうか。
私自身は、ペンタブレットを使っているので、イラストを描く場合は手ぶれ補正のない V のペンを主に利用しています。しかし、イラスト部分ではない、文字を書く場合は補正がある方が楽に書けるのでむしろ補正を入れる、などの使い分けをしています。

C と V のペンの違いはこれくらいで。

アンチエイリアス

V と N はどちらも、手ぶれ補正なしは同じですが、N のペンにはアンチエイリアスがかかっていません。
アンチエイリアスとはなにか？……というと説明が長くなってしまうので、詳しくは参考リンクを。

具体的に、V と N を比較するとこんな感じです。

ここでのアンチエイリアスは大雑把な解釈として、中間色を使って線を滑らかに表現する、というくらいでいいかなと。
特徴としてはアンチエイリアスのかかっている V のペンでは、滑らかな線になりますが、N のペンではくっきりはっきりしているものの、ギザギザとした印象も受けます。

ならば滑らかな線を描ける V のペンでいいじゃないか？ということも言えるのですが、そちらにはデメリットもあります。

デメリット

上でもちょっと紹介したのですが、キーボードショートカットの B で塗りつぶし機能があります。それで、内側に塗りつぶしをした場合

N のペンはキレイに塗りつぶされていますが、アンチエイリアスのかかっている V のペンは塗り残しがありますね。これは、アンチエイリアスのため中間色ができているので、別の色と認識されそこが塗れないということになってしまうからです。この場合、再度またペンで隙間を塗るという作業が必要になりますから、二度手間になります。
というわけで、ケースバイケースということで。

ちなみに、アンチエイリアスのかかってない N の線で描いたもの、はこんな感じになります

一方こちらは V のペンで描いたもの。

N のペンの方は、線がくっきりするものの、ざらついた感じになってますね。状況としては着ぐるみなので起毛した風合いになるかな、と使ってみたのですが。まぁ、この辺りは好みの問題になるかなぁ。

あとこっちは

ヒビの表現に N のペンの 0 の太さのペンを使いました。ここではもっとも細い1ピクセルの線としての活用。
それを利用してはてなハイクでドット絵を描くこともできます。

というわけで、3種類のペンの違いをまとめてみました。再度整理すると