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.
> 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.
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?
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.
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.
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).
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.
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.
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.
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.
>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.
// 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:
This technique was also used in mid-late non-motion-plus Wii games to smooth out the pointer movement! Early games hadan incredibly twitchy pointer because they were simply mapping the IR data 1:1 to cursor movement, whereas later ones have an invisible circle around the cursor and only move the cursor itself once the circle edges start "dragging" it.
The cursor lags behind so your finger doesn’t cover it. That helps for drawing carefully, but it means you need to use an exaggerated motion when changing direction. It’s a little unnatural at first, but might be better than alternatives with practice?
40 comments
[ 5362 ms ] story [ 221 ms ] threadThe 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.
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.
Perfect freehand is the right way to solve this.
https://drawmote.app/
And apparently without asking any permissions on the phone. What sorcery is this?
https://perfect-freehand-example.vercel.app/
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.
https://en.wikipedia.org/wiki/Hysteresis
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
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":