ハクソク

世界を動かす技術を、日本語で。

Lazy-brush – マウスまたは指でスムーズに描画する

283日前原文(lazybrush.dulnan.net)

概要

  • JavaScript製の描画ライブラリの特徴まとめ
  • ポインティングデバイスで滑らかな線と直線を描画
  • ブラシの追従性や遅延設定の概要
  • ブラシサイズ設定の機能説明
  • lazy-brushの挙動に関する注意点

JavaScriptライブラリによる滑らかな曲線と直線描画

  • JavaScriptライブラリ を利用し、 マウス や 指 などのポインティングデバイスで 滑らかな曲線や直線 を描画
  • ユーザーインターフェイス の直感的な操作性向上
  • お絵描きアプリ や 署名入力 用途への応用

ブラシがポインターに引き寄せられるまでの最小距離

  • 最小距離 の設定により、 ブラシ が ポインター に引き寄せられるまでの距離を調整
  • この値を大きくすると、 ブラシの追従開始位置 が遅れ、より自然な動きの表現が可能
  • 細かい筆致 や 手振れ補正 の実現

ブラシの遅延（ラグ）設定

  • ラグ値 を調整し、 ブラシ が カーソル に追従する速度を制御
  • 0 に設定すると 遅延なし、 1 に設定すると 無限の遅延 となり、ブラシが全く追従しない挙動
  • 筆圧感や追従感 のカスタマイズ

ブラシサイズの設定とlazy-brushへの影響

  • ブラシサイズ の変更で、 描画される線の太さ を調整
  • lazy-brush の機能や挙動には 影響しない ため、見た目のみの変更
  • デザインや用途 に応じた線幅設定

Hackerたちの意見

これめっちゃ満足感ある！こういう実験がオープンウェブの良さだと思うし、ほとんどのSNSがリンクを制限するのが残念なんだよね。ドラッグの動きが直感的で面白い。普通、UIでこういう抵抗感を作ると混乱しがちだけど、このコンテキストではめっちゃうまくいってる。

└

UIでこういう抵抗感を作ると混乱しがちだけど、実際には直感的なんだよね。ロープで物を引っ張る動作を模倣してるから、ほとんどの人が感覚的に理解できる。スキューモーフィズムって結構直感的だと思う。

└

これは、ほとんどのグラフィックソフトにずっと前からある機能をウェブで実装したものとしてはすごく良いね。

これはKritaのブラシスタビライザーと同じだと思う。

└

tldrawでも同じような感じかもしれないけど、あれも速度ベースだったよね。

同じ作者のdrawmoteもチェックしてみて！このライブラリが使われてるよ。 https://drawmote.app/

└

こんなにうまくいくなんて、ちょっと信じられない…すごいね。

わあ、これすごい！GitHubで7年間もこれを作り続けてるんだね。ほんとにすごい献身だよ。こんなに長くこのプロダクトを続けるモチベーションは何なの？

└

OPの代わりに言うわけじゃないけど、このライブラリはすごくクールだね。ただ、約20のコミットが2回に分けて行われたものだよ。最初のリリースは2018年で、2023年にもう少し手を加えたみたい。Zastai: どんなライブラリでもリリースするための進捗があれば、そういう感じになると思うし、何かを世に出すのはいい気分だよね。

サインにもすごくよく効く代替品はPerfect Freehand（TLDRawの作者が作ったやつ）だよ。 https://perfect-freehand-example.vercel.app/

└

誰かがデジタルで文書に署名したものを改変するのは許されるの？ これってそういうことだよね。問題にならないのかな？

└

確かに、これの方がずっと良さそう。OPのライブラリでは何も書けなかったから。

これに似たロジックが「Black and White 1」の「ジェスチャー」システムに使われたと思う。マウスの動きをガイドポイントに沿ったベクトルに分解するやつね。(https://blackandwhite.fandom.com/wiki/Gesture)

└

うわ、懐かしい！そのゲームのことすっかり忘れてた。あの時代にはかなりのものだったよね。ジェスチャーでの呪文発動システムはあまり安定してなかったけど、それでもめっちゃ楽しかったな。

これ、すごくいいね！指やマウスでのペイントだけじゃなくて！Cintiqで試してみたけど、ブラシの安定化よりもずっと良かった。ロジックはKritaみたいな感じだと思うけど、カーソルの視覚化やペイントがどこに現れるかがすごく助かる。普通のペイントソフトには、実際にストロークがどこに置かれるか、いつ動くかのインジケーターがないからね。

いいプロジェクトだね、ちょっと遊んでみて楽しかった :)

すごい！デジタルアート界では、これをスタビライザーって呼んでるんだよね。

本当にクール！Duo Lingoが裏で何を使ってるのか気になるな。最近、中国語と日本語のコースに忙しくしてるんだけど、すぐに気づいたのは、漢字やかなを練習する時に2つの「グレード」があること。最初に書き方を学ぶ時（アプリで指を使って）動きが制限されて、ガイドラインにぴったり合わせるんだ。でもその後は、制限がほとんどなくなるから、ひらがなが本当に短い線で書けるようになる。評価も結構緩いから、全体の意味が合ってれば、かなは合格するんだけど、ただの推測で書くと簡単に落ちちゃうこともあるよ。