Lazy-brush – smooth drawing with mouse or finger

https://lazybrush.dulnan.net

596•tvdvd•5mo ago

Comments

gdubs•5mo ago

This is so satisfying. These types of experiments are something I really love about the open-web, and part of what bums me out about how most social networks tend to throttle links.

The dragging behavior is so intuitive – it's funny because usually if you create this kind of resistance in a UI it can be confusing, but in this context it works so well.

chii•5mo ago

> this kind of resistance in a UI it can be confusing

it's actually intuitive because it mimics a real life physical dragging of an object by a rope, which most people have a feel for. Skeuomorphism can be quite intuitive imho.

justlikereddit•5mo ago

Try drawing your signature with it and see how intuitive it feels.

Bengalilol•5mo ago

Lazy radius: 9

Friction: 0.04

Brush radius: 13

-> clear

-> draw your signature

bowsamic•5mo ago

You’ve basically turned down the smoothing features

IAmBroom•5mo ago

You've basically described the post above.

danielheath•5mo ago

That'd be an amazing phishing attempt...

heeton•5mo ago

It’s not a tool for signatures. It’s also hard to sign documents with a paint roller.

But this UI is much better at, e.g. drawing a smooth, symmetrical heart symbol, with a crisp turn.

Different UI for different tasks, and it’s very cool to see something that intuitively lets you control something that is normally hidden under your finger.

DrewADesign•5mo ago

Skeuomorphs retain purely ornamental components of the thing it’s mimicking. If it was a graphic of a rope rather than a dashed line, or if it looked like the line was tied up around the thing in a bow, those would be skeuomorphic elements. But graphical interface elements always retain ‘some’ functional connection to the physical world and trigger ‘some’ abstracted existing metal model about how the world works. GUIs themselves conceptually mimic the idea of a physical space because it’s easier for people to reason about than a bunch of text. This is no more skeuomorphic than the reply button below the comment box.

ahoka•5mo ago

This a very nice web implementation of a feature that exists since probably forever in most graphics software.

rerdavies•5mo ago

I don't think I've ever seen this feature ever before (keeping in mind that the purpose of the tool is to draw smooth lines, and there would probably be another tool for drawing signatures). It's quite brilliant!

dtn•5mo ago

Lazy Nezumi has been around since 2009. Stabilisers,etc. are a lot more prominent in the digital art community.

rerdavies•5mo ago

Yes! That's it! :-)

paradox460•5mo ago

Photoshop has had it for quite a while now. It's titled brush smoothing

rerdavies•5mo ago

Does it have the leading drag handle? That's the brilliant part. My ancient copy of Photoshop has a smoothed brush; but it doesn't have the leading drag handle.

paradox460•5mo ago

Kind of. You can click a gear and set various options on it, including a "pulled string mode", which works similarly to this, where it has a "smoothing radius" that movement within will not change cursor direction, and then a "stroke catch up" mode where the stroke is at a somewhat constant speed, regardless of how you move your mouse.

The former looks like this https://i.imgur.com/TGE7N1z.png

unconed•5mo ago

I dunno why people are praising this, because it makes it impossible to do natural scribbles. It's picking the algorithm over the result.

Perfect freehand is the right way to solve this.

edflsafoiewq•5mo ago

I think this is the same as the brush stabilizer in Krita.

baxuz•5mo ago

Possibly in tldraw as well, but that one was also velocity based

RicoElectrico•5mo ago

And Affinity tools.

kilpikaarna•5mo ago

LazyMouse in Zbrush was the first one I think? But yeah, this feature is not uncommon.

There's even a program called Lazy Nezumi that adds global mouse smoothing, rulers etc. to Windows.

pstadler•5mo ago

Check out drawmote from the same author, where this library is being used.

https://drawmote.app/

kristopolous•5mo ago

this has no business working this well...quite impressive.

ndr•5mo ago

This works shockingly well.

And apparently without asking any permissions on the phone. What sorcery is this?

jama211•5mo ago

It asked me for permissions, in fact it had a pop up I had to click for it to ask for perms and then I got the system dialogue.

zastai0day•5mo ago

Wow, this is amazing! I see you've been building this on GitHub for 7 years - that's truly impressive dedication. What keeps you motivated to stick with this product for so long?

heeton•5mo ago

Not to speak for OP, and this library is very cool, but:

It’s ~20 commits done in two batches. 2018 for the initial release then some more work on it in 2023.

Zastai: you could have that kind of progress on any lib you wish to release, and it’s a nice feeling to have something out in the wild.

amenhotep•5mo ago

That's a comment by an LLM, I'm afraid :)

NikxDa•5mo ago

An alternative that works very well for signatures too is Perfect Freehand (by the guy behind TLDRaw)

https://perfect-freehand-example.vercel.app/

lionkor•5mo ago

Is it allowed to modify the signature someone puts digitally on a document? Because that's what this does. Is that not an issue?

stavros•5mo ago

That's also what a pen does, but we haven't banned pens. Don't forge signatures, it's illegal.

johnisgood•5mo ago

Stop, you are making too much sense. /s

(I honestly am baffled that things like this have to be said.)

stavros•5mo ago

Me too, but alas, they do :(

heeton•5mo ago

What makes you say the library is modifying the signature? (It’s not)

thinkingemote•5mo ago

Given it a bit of thought (as I was also puzzled), I think the comment was about the modification compared to a normal way of doing it. So if I would normally write a scribble with angular lines for a signature, and it might be consistent across different places, this brush could smooth it out and modify what it might be.

arcticbull•5mo ago

Have you met Preview's Tools > Annotate > Signature?

If you're concerned about people modifying a document after you share it out, consider using a digital signature or a hash.

fwip•5mo ago

I feel like if you're modifying the signature after they sign it and approve it - that could be a problem. As long as the modifications are applied in real-time (or with explicit user confirmation after modification), I think it is morally okay (and probably legally, but I'm not a lawyer).

You may find users who get mad if your settings are too aggressive though, and if they're unable to get a signature that they approve of.

mgaunard•5mo ago

That looks much better indeed, wasn't able to write anything with the OP's library.

cptskippy•5mo ago

The OP's library gas settings if you scroll down. I found these values work well on my phone: 20, 0.05, 5

npteljes•5mo ago

This is fantastic! Never in my life could I input my signature with a mouse, and have it come out this close to how it looks like the pen-and-paper version. Mindblowing, as it worked like so out of the box.

dwringer•5mo ago

Using a trackball I couldn't get this to work noticeably better than just plain paintbrush input in MS Paint. Conversely the one from TFA took me a little more time to get the hang of but I got a lot better control with it.

test1235•5mo ago

OT, but I love the author's retro homepage. Just seeing that made me smile this morning

keepamovin•5mo ago

This is really cool and reminded me of drawing as a kid. Thank you!

moritonal•5mo ago

I believe a logic similar to this was used to enact the "Gestures" system in Black and White 1. Breaking down the mouse-movements into vectors following a guide-point. (https://blackandwhite.fandom.com/wiki/Gesture).

batperson•5mo ago

Damn, what a flashback. I forgot about that game, it was quite something for its time. I remember the gesture spell casting system not working very consistently, but it was still a ton of fun.

rebuilder•5mo ago

This is very nice, not just for finger/mouse painting! I tried it on my Cintiq and it was actually a lot better for me than brush stabilization usually is - I think the logic is the same as seen in e.g. Krita, but the visualization of the cursor and where the paint will appear is very helpful. Usually painting software doesn't have such an indicator of where the actual stroke will be placed and when it will move.

karpour•5mo ago

Great project, I had some fun playing around :)

jeremyscanvic•5mo ago

Neat! This is known as a stabilizer in the digital art community.

davedx•5mo ago

Really cool!

I wonder what Duo Lingo are using behind the scenes. I've been busy with the Chinese and Japanese courses, and one thing I quickly noticed is how there are two different 'grades' of practising drawing hanzi/kana: when you first learn how to write it (with your finger, in the app) it constrains your movements so they perfectly follow the guidelines. But then later, it relaxes the constraints totally, or almost totally, so your hiragana can really be a shorthand squiggle. They then assess it quite liberally too, so as long as the general gist is correct, your kana will pass -- but it's also easy to fail it if you're just guessing.

marsavar•5mo ago

OP's personal website deserves its own post! https://dulnan.net/ <3

throwaway290•5mo ago

"The best FREE scripts" got me!

sophyphreak•5mo ago

This is absolutely amazing

cocodill•5mo ago

When did the internet take a wrong turn?

bix6•5mo ago

When the nerds got a bunch of money and turned into uncaring business people.

arm32•5mo ago

arthur_fist.jpg

IshKebab•5mo ago

I think it would be much better to use some kind of Kalman filtering so you don't have the huge lag. You don't need to commit to permanent output immediately so it is possible to draw with zero lag and then smooth the output afterwards.

wffurr•5mo ago

Yeah it’s a nice brush model but that is a huge gap between the input and ink.

westcoast49•5mo ago

Kalman filtering is what's used in GPS navigation apps, is it not, to smooth out imperfections in the raw GPS signal?

IshKebab•5mo ago

Yep. You can use it for estimating all sorts of things based on noisy measurements.

jflessau•5mo ago

Simple, fun, precise and works on mobile. Love it!

sdafasdfad•5mo ago

This does not work at all, half of my drawing is missing

WithinReason•5mo ago

The trick is hysteresis but in 2D:

https://en.wikipedia.org/wiki/Hysteresis

DonHopkins•5mo ago

Very nice! I love the way the leash droops from gravity when you give it some slack, to unobtrusively and intuitively show users what's really going on, how the control system actually works, so it's tangible and physical, not a mysterious unpredictable black box. True honest wysiwyg "direct manipulation", no invisible magic.

https://en.wikipedia.org/wiki/Direct_manipulation_interface

It reminds me of artist/engineer's Paul Haeberli's legendary and monumentally influential "DynaDraw" which he wrote at SGI.

DynaDraw: A Dynamic Drawing Technique (June 1989):

https://web.archive.org/web/19970605062552/http://www.sgi.co...

>Here's a really fun and useful hack.

>The program Dynadraw implements a dynamic drawing technique that applies a simple filter to mouse positions. Here the brush is modeled as a physical object with mass, velocity and friction. The mouse pulls on the brush with a synthetic rubber band. By changing the amount of friction and mass, various kinds of strokes can be made. This kind of dynamic filtering makes it easy to create smooth, consistent calligraphic strokes.

>The C source for the dynadraw demo program is available. You can save this onto your IRIS, compile it, and give it a try. If you're a Mac or PC hacker, you might be able to port this program easily to your own platform.

Source Code (for SGI GL):

https://web.archive.org/web/19970727185417/http://www.sgi.co...

Lots more great stuff from Paul Haeberli on his "Graphica Obscura" page:

https://web.archive.org/web/19970706205455/http://www.sgi.co...

https://en.wikipedia.org/wiki/Paul_Haeberli

He inspired another artist/engineer Golan Levin to write an implementation of DynaDraw with Processing and p5.js:

https://editor.p5js.org/golan/sketches/cZPRgx6q9

  // This is a rudimentary p5.js 'port' of Paul Haeberli's
  // legendary and monumentally influential program "Dynadraw",
  // which is described at: http://www.sgi.com/grafica/dyna/index.html
  // Originally created in June 1989 by Paul Haeberli (@GraficaObscura)
  // Ported to Processing January 2004 by Golan Levin (@golan)
  // Ported to p5.js September 2021 by Golan Levin.

Golan does a mind blowing amount of amazingly creative stuff:

http://www.flong.com/archive/index.html

https://en.wikipedia.org/wiki/Golan_Levin

I love his Double-Taker (Snout) (2008):

http://www.flong.com/archive/projects/snout/index.html

He explained that and more in this Ted talk "Golan Levin makes art that looks back at you":

https://www.youtube.com/watch?v=1G0MzlfMPuM

>As Joy Mountford once said, "The mouse is probably the narrowest straw you could try to suck all of human expressions through."

https://en.wikipedia.org/wiki/Joy_Mountford

I also love "Rouen Revisited" (1996)̀, a "monumental" architectural visualization that Golan Levin and another artist/engineer Paul Debevec collaborated on at Interval Research Labs, which led to Paul's later work at USC:

http://www.flong.com/archive/projects/rouen/index.html

Paul Debevec teaches and researches at USC and Eyeline Studios (powered by Netflix):

https://www.pauldebevec.com/

https://en.wikipedia.org/wiki/Paul_Debevec

Paul Debevec's "Light Stage" was featured in The Congress (2013), in the dramatically riveting and technically accurate scan scene:

https://www.youtube.com/watch?v=pPAl5GwvdY8

Start all of your commands with a comma

OpenCiv3: Open-source, cross-platform reimagining of Civilization III

The Waymo World Model

How we made geo joins 400× faster with H3 indexes

What Is Ruliology?

Unseen Footage of Atari Battlezone Arcade Cabinet Production

Show HN: Look Ma, No Linux: Shell, App Installer, Vi, Cc on ESP32-S3 / BreezyBox

Jeffrey Snover: "Welcome to the Room"

Monty: A minimal, secure Python interpreter written in Rust for use by AI

Show HN: I spent 4 years building a UI design tool with only the features I use

Sheldon Brown's Bicycle Technical Info

Hackers (1995) Animated Experience

Microsoft open-sources LiteBox, a security-focused library OS

Show HN: If you lose your memory, how to regain access to your computer?

An Update on Heroku

Vocal Guide – belt sing without killing yourself

Dark Alley Mathematics

Where did all the starships go?

PC Floppy Copy Protection: Vault Prolok

Delimited Continuations vs. Lwt for Threads

How to effectively write quality code with AI

Was Benoit Mandelbrot a hedgehog or a fox?

Introducing the Developer Knowledge API and MCP Server

I now assume that all ads on Apple news are scams

Why I Joined OpenAI

Learning from context is harder than we thought

Understanding Neural Network, Visually

I spent 5 years in DevOps – Solutions engineering gave me what I was missing

Show HN: R3forth, a ColorForth-inspired language with a tiny VM

Female Asian Elephant Calf Born at the Smithsonian National Zoo

Start all of your commands with a comma

OpenCiv3: Open-source, cross-platform reimagining of Civilization III

The Waymo World Model

How we made geo joins 400× faster with H3 indexes

What Is Ruliology?

Unseen Footage of Atari Battlezone Arcade Cabinet Production

Show HN: Look Ma, No Linux: Shell, App Installer, Vi, Cc on ESP32-S3 / BreezyBox

Jeffrey Snover: "Welcome to the Room"

Monty: A minimal, secure Python interpreter written in Rust for use by AI

Show HN: I spent 4 years building a UI design tool with only the features I use

Sheldon Brown's Bicycle Technical Info

Hackers (1995) Animated Experience

Microsoft open-sources LiteBox, a security-focused library OS

Show HN: If you lose your memory, how to regain access to your computer?

An Update on Heroku

Vocal Guide – belt sing without killing yourself

Dark Alley Mathematics

Where did all the starships go?

PC Floppy Copy Protection: Vault Prolok

Delimited Continuations vs. Lwt for Threads

How to effectively write quality code with AI

Was Benoit Mandelbrot a hedgehog or a fox?

Introducing the Developer Knowledge API and MCP Server

I now assume that all ads on Apple news are scams

Why I Joined OpenAI

Learning from context is harder than we thought

Understanding Neural Network, Visually

I spent 5 years in DevOps – Solutions engineering gave me what I was missing

Show HN: R3forth, a ColorForth-inspired language with a tiny VM

Female Asian Elephant Calf Born at the Smithsonian National Zoo

Lazy-brush – smooth drawing with mouse or finger

Comments