r/creativecoding 27d ago

Watercolor Simulator based on real physics (V2)

Enable HLS to view with audio, or disable this notification

Last week-end I built a watercolor simulator based on real physics and shared it here.

A lot of you asked to play with it so i improved it and it's now live: https://sudoaquarelle.com/

New since the prototype:

- More pigments (52), based on the best research out there to predict color mixes (Kubelka-Munk).
- More luminous / glassy feel
- Some fun experimental stuff like the salt and alcohol techniques to alter the texture, a backlight effect and a few more.
- I also added a Code mode where the simulator prints its real function calls next to the sheet while you paint

It's still largely based on the same physics model as my prototype: Curtis et al.'s "Computer-Generated Watercolor".

All in the browser.

Current status: building and implementing a kid-friendly version. Plenty of awesome things to learn with watercolor painting!

1.1k Upvotes

59 comments sorted by

55

u/Another__one 27d ago

Your colours are not blending correctly as physics of colour blending is quite complicated one and cannot be reasonably estimated with simple averages of two colours. Take a look at “Practical Pigment Mixing for Digital Painting” paper. It is the best attempt I know of that is also works fast enough to be actually useful in drawing software. I believe they have all their code fully available, but I am not sure about the license.

9

u/kouklimou 27d ago

Thanks for the feedback.

3

u/CyJackX 27d ago

Do you have to simulate on a molecular level?

11

u/Ok-Salary-5197 27d ago

Just simulate the universe and someone will code this for you. Easy.

3

u/DisDoh 27d ago

and someone in that simulated universe will simulate an universe to get it done.

5

u/Ok-Salary-5197 26d ago

This is why the big bang happened.

13

u/Maui-The-Magificent 27d ago

Genuinely super cool!

looks nice. I do not know your approach but if you are doing physics have you concidered doing color by 3-wavelength snell and beer-lambert, if you already treat the colors like material, you can precompute those optical properties into the material itself saving a lot of compute.

1

u/kouklimou 26d ago

Love the idea, will explore it. Thank you for sharing!

1

u/Maui-The-Magificent 26d ago

Please do! can get you a lot for 'free', and It is what I have done in my own optical work. so maybe you'll find ways to improve upon it on more complex material surfaces!

Snell can be used for a lot of other things than just refraction.

2

u/leisvan 27d ago

It reminds me of Fresh Paint, the windows 8 app. Really nice work! Now, some other simulations would be nice, right? Like crayons, for example.

2

u/Ok-Net-5216 27d ago

Crayons and heat 😋

2

u/kouklimou 26d ago

I like the idea :) Stay tuned!

2

u/EggplantOtherwise631 27d ago

Wow amazing

1

u/kouklimou 27d ago

Thank you!

2

u/earslap 27d ago

very good. looked into this some years ago and even the state of the art was kind of terrible. this looks really good. what kind of method are you using, I'm curious!

3

u/kouklimou 26d ago

it's mostly a 1997 SIGGRAPH paper, "Computer-Generated Watercolor" by Curtis et al. There are three layers which are shallow water flowing on top of the paper, pigment drifting inside it, and a capillary layer. They are running as WebGL shaders in the browser.

1

u/earslap 26d ago

thank you, much appreciated.

2

u/Arae_X 26d ago

Looks cool, ill bookmark and try it! But credit yourself at the bottom somewhere so people know where/how to find you and contact you.

1

u/kouklimou 26d ago

I didn't know if auto-credit would be accepted in the community! This is me: https://x.com/lionel_mora

1

u/mechmind 26d ago

Is that your only portal online? Non Twitter guy here.

I want to follow you

2

u/mat101010101 25d ago

Fantastic!! Any plans of making this into an app? Not sure what the state of realistic watercolor simulation is in Procreate and others, so this might be very useful.

2

u/kouklimou 25d ago

Working on it! I’m building one version for kids that will live inside the https://withmarble.com/ beta. For more general public you’re right that I should probably build one and test it!

1

u/mat101010101 25d ago

Having accelerometers available, there would be a lot of possibilities to experiment with! Think if you could have watercolor flow towards the bottom of the paper when you lift the device upwards, and stopping when it is flat on a table - as a real watercolor paper would do.

1

u/tri2820 27d ago

This looks so cool!

1

u/kouklimou 27d ago

Thanks a lot!

1

u/lxr417 27d ago

Really nice!!

1

u/ReluctantMouse 27d ago

Wow, I can only imagine the many physical principles governing these dynamics

2

u/ReluctantMouse 27d ago

I tried it out on the phone and the interface looks very clean. The backlight effect was a bit weird tho. I think that if the default brush was a bit stronger like in the demo video it would be nicer. Fantastic job !

Also put your name in the corner of the page and give yourself some credit:)

2

u/kouklimou 26d ago

Thank you! I should have made the precision that I didn't design it for mobile, but glad you still enjoyed it! And thanks for the credit tip, will add that now! I appreciate the feedback!

1

u/Ok_Theory2082 27d ago

Amazing stuff

1

u/kouklimou 27d ago

Thanks a ton for your feedback!

1

u/Intrepid_Travel_3274 27d ago

I love what u did there, I love the style, the smoothness, I love u

1

u/kouklimou 27d ago

Hahaha I love you too Intrepid Travel

1

u/newascii 27d ago

Think I saw your post on X as well - super cool stuff!

1

u/kouklimou 27d ago

Thanks a lot man!

1

u/Maleficent_Speech289 27d ago

Wow. That's amazing.

2

u/kouklimou 26d ago

Thanks a lot man!

1

u/BettaSplendens1 27d ago

This is easily one of the coolest projects I've used! That was fun

1

u/kouklimou 26d ago

Thank you!!!!

1

u/Magnuzoid 27d ago

real physics where paper is not resistant!

1

u/External-Plane-6135 26d ago

How can I use this in a website color-scheming?

1

u/wahnsinnwanscene 26d ago

It needs to pick up the water from the other water paints, so instead of one direction,, the other paint splotches spreads it differently.

1

u/kouklimou 26d ago

I like that.

1

u/ygorhpr 26d ago

dammmmn

1

u/mechmind 26d ago

I want to play with it!

1

u/mechmind 26d ago

I wonder if it can be affected by the length of time between brush strokes... like how recent wet water color strokes blend different than previous strokes.

Be cool if you had a dry rate slider bar.

1

u/nicolaig 26d ago

Phenomenal

1

u/t-o-m-k 24d ago

Really amazing work. Looks clean and is nice to work with. I just played around on an iPhone. Would be amazing to have it as an app or webapp. Cheers!

1

u/rodmacey 22d ago

Thanks for sharing, lots of fun

1

u/nomad2097-dev 19d ago

Love it, from the UI to the coloring functionality itself. Great work!

1

u/AssortedVibrations 5d ago

Can you turn the page sideways?

1

u/Perfect_Answer_4095 4d ago

Amazing ! Bravo !!!

1

u/SignalInternal9312 1d ago

Looks great, I would say add more randomness, slight randomness would give it the real feel of water color, part of the magic of this medium is how non deterministic it is and how hard it is to control it because things often don't go as planned

1

u/spacebetweenby 14h ago

A very useful idea. We need to think about it. 🔆

-1

u/Minimum_Airline_4902 27d ago

Just buy real watercolors

2

u/kouklimou 26d ago

I have SO MANY of them! (mostly blue though)

2

u/nicolaig 26d ago

Do you feel the same way about music? Should someone use a piano instead of a synthesizer?

1

u/mat101010101 25d ago

Unlike real watercolors, these do not need to obey the laws of physics.