Bret Victor wrote an amazing essay on interaction design in 2011 [1].
After reading it, I thought "we should doodlify the web a lot more." A keyboard and mouse, while useful, are restricting in odd ways. Bret Victor explains in his essay how this is restricting, and what the way forward could be.
My contribution to it is simple and humble and definitely just a small step compared to Bret Victor his vision. I present Doodledocs: collaborative drawing, cross-device, stylus pressure-sensitive first, mouse + keyboard a distant second.
Doesn't this exist? Well, I've seen collaborative drawing that did not have web annotation or pressure sensitivity (e.g. Google Jamboard). And in the best cases where I did see most of these things (e.g. Inko [4, video]), they were native apps which locks you into an ecosystem. I want things to be open and free. And I want pressure sensitivity, collaborative drawing and web annotation into one place as the web could then feel like paper that we can draw on, together.
You don't have to. But you can! :-D
So, in my opinion, something such as Doodledocs doesn't exist.
Here is a video of me using it on an iPad [2]. I also tested it on a Wacom connected to a laptop. It's a bit buggy still (cross-browser compatibility/cross-device issues, I'm testing as much as I can nowadays). So I hope seeing me how I use it will show you how to deal with the slightly buggy situations :)
Oh, and it's all pure frontend <3 (with some P2P magic which is still only frontend :D). Who needs a backend anyways? ;-)
After reading it, I thought "we should doodlify the web a lot more." A keyboard and mouse, while useful, are restricting in odd ways. Bret Victor explains in his essay how this is restricting, and what the way forward could be.
My contribution to it is simple and humble and definitely just a small step compared to Bret Victor his vision. I present Doodledocs: collaborative drawing, cross-device, stylus pressure-sensitive first, mouse + keyboard a distant second.
Doesn't this exist? Well, I've seen collaborative drawing that did not have web annotation or pressure sensitivity (e.g. Google Jamboard). And in the best cases where I did see most of these things (e.g. Inko [4, video]), they were native apps which locks you into an ecosystem. I want things to be open and free. And I want pressure sensitivity, collaborative drawing and web annotation into one place as the web could then feel like paper that we can draw on, together.
You don't have to. But you can! :-D
So, in my opinion, something such as Doodledocs doesn't exist.
Here is a video of me using it on an iPad [2]. I also tested it on a Wacom connected to a laptop. It's a bit buggy still (cross-browser compatibility/cross-device issues, I'm testing as much as I can nowadays). So I hope seeing me how I use it will show you how to deal with the slightly buggy situations :)
Oh, and it's all pure frontend <3 (with some P2P magic which is still only frontend :D). Who needs a backend anyways? ;-)
The code is on Github [3].
And it's free.
[1] https://news.ycombinator.com/item?id=21116948
[2] https://www.youtube.com/watch?v=QhrNl-fRrC8
Summary of features + timestamps:
00:31 - pencil usage
00:40 - eraser usage
01:00 - color
01:30 - opacity (this allows you to get a more pencil-like or pen-like feel)
02:20 - Zooming in (menu zooming with you is an iPad feature only)
02:40 - Download your doodle
03:15 - Upload your doodle (and continue from where you left off)
04:00 - Share your doodle (i.e. collaborate together by sending the link to someone else)
05:00 - Scroll vs. draw mode (if you're in draw mode you can't scroll with your pencil but you can scrub with your fingers)
05:50 - Image annotation example (an image from Unsplash by Andreea Popa -- https://unsplash.com/@elfcodobelf)
07:00 - Skip this part (here I am done with the website annotation example and fumbling around)
07:50 - Make website or image transparent (handy for tracing drawings, websites or pictures) -- also an example of me having fun with the app
11:00 - Website annotation example (using unsplash.com)
12:45 - Hacker News annotation example (same thing as 11:00, I'm a fan of this site :) )
13:00 - Going back to a blank canvas (leave the URL bar empty)
[3] https://github.com/melvinroest/doodledocs
[4] https://www.youtube.com/watch?v=QdjPVYxUhJw