Show HN: Inkwash, a watercolor sketching app and explanation (opens in new tab)

(johnowhitaker.github.io)

250 pointsYenrabbit14d ago29 comments

I've made a drawing app based on my physical sketching practice, using fluid sim and some shader tricks to mimic watercolor-style ink washes. Best used on iPad or with a drawing tablet. The linked article shows how the core engine works, with plenty of little interactive demos. It was fun to make, sharing in hopes others find it fun too :)

Show HN: Inkwash, a watercolor sketching app and explanation

(johnowhitaker.github.io)

250 pointsYenrabbit14d ago29 comments

29 comments

28 comments · 18 top-level

BugsJustFindMe10d ago· 4 in thread

The examples display a degree of vorticity that I have never seen in real life watercoloring. They look great superficially, but they look super weird at reasonable inspection. Water on paper does not flow nearly so freely.

YenrabbitOP15h ago

There's a 'flow' slider I turn way down when actually painting with it, but I leave it high by default because that's the most "cool" feeling setting for a first interaction :)

lemming10d ago

I agree, some of the examples look very nice, but some have small-scale vortices that really don't look realistic.

That said though, lovely site and project!

NoMoreNicksLeft10d ago

I'm not sure "realistic" is important here. It's just art, and watercolors aren't known for being hyper-photographic to begin with. Instead, this enables... while it shows some ability to imitate digitally what watercolors can do on paper, it also shows that it can do things that physical media can't do at all. It's quite brilliant, and I wish it was in Gimp or even Inkscape. Can these images be stored as a sort of "vector"? To be able to go back in and dial down the vortices that you don't like (or to dial them even higher)? To design the water flow underneath as a field of sorts. Would be sort of awesome.

1 more reply

customguy9d ago

Could one fix the paper on the bottom of in a container with just enough water in it to get a similar effect?

vunderba14d ago· 3 in thread

Nice visualizations - have you tried Rebelle? They have an online version that lets you play with the watercolor/brushes of the painting software so you can see the colors drying on the canvas.

https://www.escapemotions.com/experiments/rebelle/index.php

cam_l10d ago

I never got into rebelle, though this demo is pretty cool.

I used to use expressii, and always thought it was one of the most under rated painting apps. Has a very natural feel to it.

https://www.expresii.com/

vunderba10d ago

That's super neat looking - I really like the demonstrations of Chinese calligraphy with the brushes as well.

YenrabbitOP13d ago

Oooh yeah I forgot how incredible that was! They really put care into how the pigments mix and move. I used to love watching timelapses of people doing art in rebelle.

ameon13d ago· 1 in thread

looks beautiful! i wanted to bookmark it because sometimes i need to explain some geometry to my son, and i have to download some sketching app each time, but with this I could just open and paint. There's one problem however. When on mobile, the page does not hid the control panel (mode, ink, etc) and it takes a large portion of the screen.

YenrabbitOP13d ago

Ah yeah that's not ideal, fixed. I like the menu sticking around on iPad, but it now gets out of the way on smaller phone screens. Thanks for the reminder, I'd been meaning to do this! (Also, tldraw.com is fantastic for quick+easy diagrams and works great on mobile if you want a better whiteboard that isn't so art-focused :) )

maarudth14d ago· 1 in thread

i like it a lot. looks beautiful

YenrabbitOP14d ago

Thanks :)

voidmain000110d ago· 1 in thread

Why is just having the web page loaded in a browser's (Firefox) tab ramping up the iGPU on my computer to 75%? The GPU load is consistently 75% whether I'm drawing or just have an untouched web page.

MS Edge has the same behavior with GPU loading regardless of drawing or not, but the GPU is at 50%.

bschwindHN10d ago

Did you read the article? Each demo canvas is interactive and running multiple shaders per frame. They could probably reduce power consumption by having a play button on each demo canvas, or pausing the simulation after a sufficient amount of time has passed and things have stabilized, but yeah. The reason your GPU is being used is because it's being used.

armcat10d ago

As an amateur watercolour artist (shameless plug: https://www.instagram.com/p/DBlKG5cMPxa) I have to say the feeling your made with this wash is gorgeous. Back in the analogue world - paper grain and type/brand has a lot to do with it. Watercolour is really about unpredictability - it's about taking advantage of this unpredictability in terms of how the water travels down the grain and the impact that it makes, combined with light/shadow and "confidence" the artist brings with the brush. So of course it's never going to be truly transferrable digitally, but I still love the work you put into this.

insane_dreamer10d ago

Beautiful! Love the fluidity. Great for calligraphy.

> While I've tidied up a bit, the rest of this article contains plenty of AI-witten prose.

This is the right approach. I have no problem with someone using AI to draft a presentation (especially a technical one like this) -- just say it upfront and then people have no reason to get upset.

calebm10d ago

Great example of a Single File Web App (https://gods.art/articles/single_file_web_apps.html). I'm trying to get a wikipedia page up for this concept (https://en.wikipedia.org/wiki/Draft:Single_File_Web_Apps).

levi84071412d ago

The interactive explanation is the best part — being able to scrub the sim while reading the writeup made it actually click.

esychology10d ago

This is awesome! The strength of the flow/advection is a bit too high imo. Maybe increase some viscosity parameter?

pinstripes10d ago

I like that adding pen strokes to a watery section continues to blend in. Ima copy you now and become a cool art person

otterfactory10d ago

This is really charming. The interactive demos make the technical explanation much more approachable. One feature that might be fun is replay/exporting the stroke process, since the wash spreading is part of what makes it satisfying to watch.

ahmd-sh10d ago

This is so satisfying! I love how the blending looks and fluidly works.

I've always admired watercolor animations (especially the ones in the video game Gris) and wanted to bring that to the web, but didn't know how.

arbourtrary10d ago

Very cool app and very well explained throughout! I enjoyed peeking under the hood and learning those details like sampling a lower res flow field. Thank you for creating and sharing this

sigman10d ago

amazing idea and writeup! The only missing piece is to make it PWA (make it open as 'normal' app, especially on a tablet pc) it takes just adding icons, manifest, service worker - https://gist.github.com/sigman78/f1d8ceaf645b4dd773ff7bcaf64...

jbrecht10d ago

this is really gorgeous. I build ed tech apps for kids, which often includes whiteboard. I am always in search of inspiration to make it more tactile and less MS Paint, love this!

the-mitr10d ago

It is very fun and aesthetically pleasing also, great job.

pentacrypt10d ago

Very impressive work, thanks for sharing!

j / k navigate · click thread line to collapse

29 comments

28 comments · 18 top-level

BugsJustFindMe10d ago· 4 in thread

YenrabbitOP15h ago

There's a 'flow' slider I turn way down when actually painting with it, but I leave it high by default because that's the most "cool" feeling setting for a first interaction :)

lemming10d ago

I agree, some of the examples look very nice, but some have small-scale vortices that really don't look realistic.

That said though, lovely site and project!

NoMoreNicksLeft10d ago

1 more reply

customguy9d ago

Could one fix the paper on the bottom of in a container with just enough water in it to get a similar effect?

vunderba14d ago· 3 in thread

Nice visualizations - have you tried Rebelle? They have an online version that lets you play with the watercolor/brushes of the painting software so you can see the colors drying on the canvas.

https://www.escapemotions.com/experiments/rebelle/index.php

cam_l10d ago

I never got into rebelle, though this demo is pretty cool.

I used to use expressii, and always thought it was one of the most under rated painting apps. Has a very natural feel to it.

https://www.expresii.com/

vunderba10d ago

That's super neat looking - I really like the demonstrations of Chinese calligraphy with the brushes as well.

YenrabbitOP13d ago

Oooh yeah I forgot how incredible that was! They really put care into how the pigments mix and move. I used to love watching timelapses of people doing art in rebelle.

ameon13d ago· 1 in thread

YenrabbitOP13d ago

maarudth14d ago· 1 in thread

i like it a lot. looks beautiful

YenrabbitOP14d ago

Thanks :)

voidmain000110d ago· 1 in thread

Why is just having the web page loaded in a browser's (Firefox) tab ramping up the iGPU on my computer to 75%? The GPU load is consistently 75% whether I'm drawing or just have an untouched web page.

MS Edge has the same behavior with GPU loading regardless of drawing or not, but the GPU is at 50%.

bschwindHN10d ago

armcat10d ago

insane_dreamer10d ago

Beautiful! Love the fluidity. Great for calligraphy.

> While I've tidied up a bit, the rest of this article contains plenty of AI-witten prose.

This is the right approach. I have no problem with someone using AI to draft a presentation (especially a technical one like this) -- just say it upfront and then people have no reason to get upset.

calebm10d ago

levi84071412d ago

The interactive explanation is the best part — being able to scrub the sim while reading the writeup made it actually click.

esychology10d ago

This is awesome! The strength of the flow/advection is a bit too high imo. Maybe increase some viscosity parameter?

pinstripes10d ago

I like that adding pen strokes to a watery section continues to blend in. Ima copy you now and become a cool art person

otterfactory10d ago

ahmd-sh10d ago

This is so satisfying! I love how the blending looks and fluidly works.

I've always admired watercolor animations (especially the ones in the video game Gris) and wanted to bring that to the web, but didn't know how.

arbourtrary10d ago

Very cool app and very well explained throughout! I enjoyed peeking under the hood and learning those details like sampling a lower res flow field. Thank you for creating and sharing this

sigman10d ago

jbrecht10d ago

this is really gorgeous. I build ed tech apps for kids, which often includes whiteboard. I am always in search of inspiration to make it more tactile and less MS Paint, love this!

the-mitr10d ago

It is very fun and aesthetically pleasing also, great job.

pentacrypt10d ago

Very impressive work, thanks for sharing!

j / k navigate · click thread line to collapse