マウスや指先でもそれっぽくなめらかに手描きできるJavsScriptライブラリ「Lazy Brush」

ペイントソフトでマウスを使って絵を描いたときや、スマートフォン・タブレットに指で文字を書いたとき、直線や曲線がうまく引けずに線がガタガタしたりゆがんだりしがちです。「lazy-brush」はマウスや指による描画をなめらかにするためのJavsScriptライブラリで、その仕組みがGitHubで公開されています。

Lazy Brush - Smooth Canvas Drawing
https://lazybrush.dulnan.net/

GitHub - dulnan/lazy-brush: Smooth drawing with mouse, finger or other pointing device
https://github.com/dulnan/lazy-brush

以下は、Windowsのペイントソフトを使って文字を書いてみたところ。上はマウスで書いた文字で、マウスを動かす際の震えが文字のガタガタとして現れています。下は画面をタッチして指で書いたもので、マウスよりは線のがたつきは少ないですが、線のズレはマウスより大きく出てしまいました。

マウスや指で線を描く際の、細かいブレや震えがそのまま線に出てしまうのを防ぐためのロジックが「lazy-brush」です。以下は、lazy-brushのデモページでマウスを使って同じ文字を書いてみたところ。背景が方眼紙になっているため線を引きやすいというのもありますが、曲線はなめらかに、直線も震えによるブレが現れることなく描画することができました。

lazy-brushの特徴は、マウスポインタにそのまま線が追随するのではなく、少し遅れて線が引かれるところにあります。以下のように「LAZY RADIUS」を「60」に設定した場合、画像右側の黒い点の位置(マウスポインターの位置)から、オレンジの丸(線が引かれる位置)が、60ピクセルズレます。このこのズレがクッションになって細かい震えやブレが吸収され、キレイな線が描けるという仕組み。

「LAZY RADIUS」の数字を大きくすると、マウスや指の位置からブラシの位置までの距離が長くなります。

また、「FRICTION(摩擦)」の数値を大きくすると、マウスの動きに追随するブラシの速度がゆっくりになります。ブラシがゆっくりになればなるほど、なめらかな線を引きやすくなります。

「BRUSH RADIUS」はブラシの半径のサイズを変更できます。

もうひとつポイントとして、Lazy Brushではポインタやブラシが動いたかどうかを真偽値で返しています。そのため、単に線をキレイにするだけではなく、パフォーマンスを最適化して無駄な描画処理を減らすことができます。

Lazy BrushはJavsScriptライブラリで、リポジトリがGitHubで公開されているため、インストールして使うことができます。

GitHub - dulnan/lazy-brush: Smooth drawing with mouse, finger or other pointing device
https://github.com/dulnan/lazy-brush?tab=readme-ov-file