
Show HN: Doodledocs – draw on a blank canvas or annotate websites together - melvinroest
https://doodledocs.com/
======
melvinroest
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? ;-)

The code is on Github [3].

And it's free.

[1]
[https://news.ycombinator.com/item?id=21116948](https://news.ycombinator.com/item?id=21116948)

[2] [https://www.youtube.com/watch?v=QhrNl-
fRrC8](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](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](https://github.com/melvinroest/doodledocs)

[4]
[https://www.youtube.com/watch?v=QdjPVYxUhJw](https://www.youtube.com/watch?v=QdjPVYxUhJw)

