Fluid Paint(david.li)
david.li
Fluid Paint
https://david.li/paint/
78 comments
It's all done with shaders. A good starting point is https://thebookofshaders.com/. You can learn a lot from people's examples on https://www.shadertoy.com/. Another amazing resource is iq's website at https://iquilezles.org/.
Something to note - it's all math. Changing other people's code and implementing things other people have devised is quite straightforward, but making new styles requires a good understanding of some relatively complex math topics. I'm not saying that to put anyone off - the opposite in fact. If your math isn't great or you're a bit scared of it then learning shader coding is a brilliant way to improve.
Something to note - it's all math. Changing other people's code and implementing things other people have devised is quite straightforward, but making new styles requires a good understanding of some relatively complex math topics. I'm not saying that to put anyone off - the opposite in fact. If your math isn't great or you're a bit scared of it then learning shader coding is a brilliant way to improve.
so the above links are good for learning about shaders, are there any resources that are good for the math involved (as in better than the shader links above)
I recommend starting with the shader stuff, and when you really feel the need picking up a linear algebra textbook, preferably one that has "linear transformations" earlier in the ToC than "matrix multiplication" (or 3Blue1Brown's videos come very recommended by some)
"Real-time Rendering" by Akenine-Tomas Möller et all is one of the standard references here.
https://www.amazon.com/Real-Time-Rendering-Fourth-Tomas-Aken...
Peter Shirley's free Ray Tracing series is incredibly good as well: https://raytracing.github.io/books/RayTracingInOneWeekend.ht...
And the outstanding piece in rendering is the Physically Based Rendering book by Pharr et all (which won an Oscar): https://www.pbrt.org/
None of those are math references as such, but the thing is with graphics it's not based on first principles (well, ray tracing is kinda getting there but still has lots of artistic stuff rather than science stuff), but rather on a bag of tricks. And the math without the "bag of tricks" context may not be that clear.
https://www.amazon.com/Real-Time-Rendering-Fourth-Tomas-Aken...
Peter Shirley's free Ray Tracing series is incredibly good as well: https://raytracing.github.io/books/RayTracingInOneWeekend.ht...
And the outstanding piece in rendering is the Physically Based Rendering book by Pharr et all (which won an Oscar): https://www.pbrt.org/
None of those are math references as such, but the thing is with graphics it's not based on first principles (well, ray tracing is kinda getting there but still has lots of artistic stuff rather than science stuff), but rather on a bag of tricks. And the math without the "bag of tricks" context may not be that clear.
It's all math, but it's pretty easy math and it's a great way to learn it. (Just building on what you said and encouraging people not to be scared and to dip their toes in)
"It's all math, but it's pretty easy math "
My experience is, that all math is easy - if you understand it.
But most have big gaps in their basic math knowledge (like me) - and then "pretty easy math" is suddenly very hard, as you stumble every second step, over a concept you never really understood back in class and what you learned you have mostly forgotten - so you have to relearn this. And then that. And then the other thing. And suddenly "easy math" is hard work.
So ... telling people, it is just "easy math" - can make people feel very stupid for not getting it and totally put them off. And I know that I am not stupid - I simply lack knowledge in the area. But for other people with lower self esteem, it can have the opposite effect of encouraging.
My experience is, that all math is easy - if you understand it.
But most have big gaps in their basic math knowledge (like me) - and then "pretty easy math" is suddenly very hard, as you stumble every second step, over a concept you never really understood back in class and what you learned you have mostly forgotten - so you have to relearn this. And then that. And then the other thing. And suddenly "easy math" is hard work.
So ... telling people, it is just "easy math" - can make people feel very stupid for not getting it and totally put them off. And I know that I am not stupid - I simply lack knowledge in the area. But for other people with lower self esteem, it can have the opposite effect of encouraging.
Alternatively, you can add mentally "for the author" to "easy math" and you won't need to feel stupid or go through the enormous effort of trying to convince everybody to change the way they express themselves.
Ugh! Those sites will do absolutely nothing to teach you how to make something like this. Thebookofshaders and shadertoy are about solving a puzzle "given only a single function who's input is the position of the pixel being draw, draw a pretty picture with math". That is not remotely related to the techniques used to make something like this paint program.
I don't have a suggestion for the paint program in particular. There are a few S.O. answers that cover painting linked here
https://webglfundamentals.org/webgl/lessons/webgl-qna.html
I don't have a suggestion for the paint program in particular. There are a few S.O. answers that cover painting linked here
https://webglfundamentals.org/webgl/lessons/webgl-qna.html
Amazing.
It was really satisfying to see the strokes.
Any resources for learning this stroke style?
Any resources for learning this stroke style?
Seems to be not supported on iOS. Really, not surprising considering all the Safari quirks.
[deleted]
Not on desktop Safari, either. Can see and move the brush but can't actually paint. I assume it's something with the drawing process itself, as I can't imagine someone managed to write a click handler that's not cross-browser, so surely that's firing correctly.
I know Apple’s support of various WebGL features has generally lagged behind Chrome. Though even when there is feature parity shaders seem to run slower in Safari than in Chrome (e.g. a shadertoy shader that north works in Safari and chrome will run at half the speed or less of the chrome one). It makes me think that Apple is doing some GPU throttling for web use cases, maybe for battery or fan speed/heat reasons.
It doesn't run on my Chrome for Android either
David Li also made that one that I find pretty cool.
https://www.adultswim.com/etcetera/elastic-man/
I'm rather new to shaders, would anyone know how to recreate something like this? Any useful tutorials around?
https://www.adultswim.com/etcetera/elastic-man/
I'm rather new to shaders, would anyone know how to recreate something like this? Any useful tutorials around?
I'm a fan of David Li's work[0]. Most recently he created the Blob Opera[1] which builds up of a lot of his previous experiments
As for recreating some of this work, you could probably start by looking at his github repos[2].
[0] http://david.li/
[1] https://artsandculture.google.com/experiment/blob-opera/AAHW...
[2] https://github.com/dli
As for recreating some of this work, you could probably start by looking at his github repos[2].
[0] http://david.li/
[1] https://artsandculture.google.com/experiment/blob-opera/AAHW...
[2] https://github.com/dli
I wondered this too! It can't just be shaders to do the elasticity though right?
from his tweets about it: "Low res position based dynamics thin shell + some loop subdivision"
Which doesn't help me drastically.
from his tweets about it: "Low res position based dynamics thin shell + some loop subdivision"
Which doesn't help me drastically.
Let's break it down:
Low res thin shell means that this is a model without many vertices. The "position based dynamics" is a more modern term for what was sometimes called "verlet integration", using the positions to compute immediately velocity relative to the ideal undeformed cage. So this is our simulation model. This is still how cloth sim is done today in games.
To compute the final render, Loop subdivision is used to turn the "thin shell" into a tighter model. You can Google for it, it's a way of subdividing triangles.
Low res thin shell means that this is a model without many vertices. The "position based dynamics" is a more modern term for what was sometimes called "verlet integration", using the positions to compute immediately velocity relative to the ideal undeformed cage. So this is our simulation model. This is still how cloth sim is done today in games.
To compute the final render, Loop subdivision is used to turn the "thin shell" into a tighter model. You can Google for it, it's a way of subdividing triangles.
Position based dynamics is far more than just Verlet integration though. The meat of the algorithm has to do with dealing with various constraints (which is done by sequentially projecting positions related to each constraint while adhering to both the constraint and Newton’s laws (momentum conservation). PBD’s main strength is that it can incorporate various types of constraints at once with relatively simple code and good performance.
Thank you for that link, this is so much fun! I feel like a ten-year old playing with this.
Those who have Wacom tablets or Apple pencils, does it react to pressure sensitivity?
I'm using a Wacom cth-470. The pen works on chrome but not on Firefox. Unfortunately there's no pressure sensitivity as far as I can tell.
there is a Open issue from 2017 about pressure sensitivity [1] but seems like the author does not plan to actively maintain the project.
Honestly I'll play around a little to see if can quickly add that functionality.
[1] https://github.com/dli/paint/issues/9
EDIT: Just made a quick and dirty pull request, a live version here: https://brushpaint.pages.dev/ Now If someone puts more time into this they could: Add support for tilted pens (Change bristle direction based on tilt, my pen doesn't support tilt.) Also the scaling is linear, which is probably not perfect.
Honestly I'll play around a little to see if can quickly add that functionality.
[1] https://github.com/dli/paint/issues/9
EDIT: Just made a quick and dirty pull request, a live version here: https://brushpaint.pages.dev/ Now If someone puts more time into this they could: Add support for tilted pens (Change bristle direction based on tilt, my pen doesn't support tilt.) Also the scaling is linear, which is probably not perfect.
Pretty cool! It looks like in "digital" color mode blending is done in sRGB colorspace (at least judging from the artifacts I see from blending saturated colors), while "natural" indeed looks a lot more natural.
It would help "digital" mode if colors were blended in linear space. GIMP relatively recently changed the default mode and it makes quite a difference.
It would help "digital" mode if colors were blended in linear space. GIMP relatively recently changed the default mode and it makes quite a difference.
I dunno, I found it really hard to mix colours, as everything overpowered the bottom layer. Mixing ultramarine and burnt sienna, did not get me black. Just ultramarine alongside burnt sienna.
If you use a large brush with "low" quality then you have larger half-transparent areas at the beginning and end of each stroke.
I mean, that's about what you'd expect, smearing oil paints on top of each other. They won't blend unless you actually blend them.
Is there any implementation out there that attempts to model the mixture of different color pigments?
It would be cool if we could select a color like "cadmium red" and mix it "titanium white" to mimic a real painting and its interactions, instead of simply select colors in a sRGB space.
It would be cool if we could select a color like "cadmium red" and mix it "titanium white" to mimic a real painting and its interactions, instead of simply select colors in a sRGB space.
No supported on mobile Safari. Too bad! Will try it later.
[deleted]
Neither on Safari desktop.
Aside from the obviously gorgeous app, the colorpicker is quite interesting. This is not our standard HSV color picker. Can you tell what color model it is based on?
Answering my own question: This seems to use the RYB color model:
https://en.wikipedia.org/wiki/RYB_color_model
https://en.wikipedia.org/wiki/RYB_color_model
That's probably a good start, but there's more to it than that. The hue ring doesn't appear to have a fully saturated blue.
Just for future reference, this seems to be the best source of information on the RYB color model:
http://vis.computer.org/vis2004/DVD/infovis/papers/gossett.p...
They use fully saturated red and yellow, but blue is rgb(42,95,153)
http://vis.computer.org/vis2004/DVD/infovis/papers/gossett.p...
They use fully saturated red and yellow, but blue is rgb(42,95,153)
Thanks for the link, that was fascinating.
Very nice color wheel, I was able to quickly choose and use some very beautiful colors.
Nice! I like how you can see the brush state before planting it on the page.
Shameless plug: I made a similar but far more rudimentary particle based calligraphic brush in 140 chars of javascript: https://www.dwitter.net/d/17780 Or, drop this in an empty browser console:
Shameless plug: I made a similar but far more rudimentary particle based calligraphic brush in 140 chars of javascript: https://www.dwitter.net/d/17780 Or, drop this in an empty browser console:
document.body.innerHTML='<canvas id=c>';x=c.getContext('2d');c.width=1920;c.height=1080;C=S=t=0;setInterval('n=t++?n.map(([X,Y,A,B])=>(x.beginPath(x.moveTo(X,Y),x.lineTo(X+=A,Y+=B),x.lineWidth=(A*B)**.5,x.stroke()),[X,Y,A*.7+(C-X)/9,B*.7+(S-Y)/9])):[];onmousemove=({x,y})=>n[t&63]=[C=x,S=y,0,0]',16)Cursor moves around but doesn't seem to paint. Using Safari.
I feel guilty that I just wasted a bunch of paint drawing stupid lines.
Yes, those electrons are gone forever now.
I clicked the SAVE -button but seems it only opened
a new blank tab on Chrome
Flame Painter does this kind of 'particle' brush thing, if anyone is looking for a more comprehensive version. It's a very neat effect!
I got problems with "SAVE" its opening "about:blank" <Microsoft Edge Version 91.0.864.54 (Official build) (64-bit> by the way I like it.
Damn. "Drag edge of canvas to resize" really does not blend well with "trying to paint near the edges of the canvas".
Nice paint simulation. Really needs a "dry" button like Painter's had since forever.
Nice paint simulation. Really needs a "dry" button like Painter's had since forever.
To me it feels like it's dry after ever stroke. Paint with yellow on red (fluidity maxed) shouldn't result in yellow.
I just figure it's really thick virtual oil/gouache/whatever paint.
This is not working on Safari browser.
This is awesome, but my immediate reaction is: it would be better without the browser.
On my MacBook Pro (Retina 15 inch 2015, "the best laptop ever made"), it's just laggy enough to be a bit irritating. A native app would be wonderful.
Edit: Just to be sure, I use Firefox, but it doesn't seem to be a Firefox only -effect, as it's similarly laggy on Chrome too.
On my MacBook Pro (Retina 15 inch 2015, "the best laptop ever made"), it's just laggy enough to be a bit irritating. A native app would be wonderful.
Edit: Just to be sure, I use Firefox, but it doesn't seem to be a Firefox only -effect, as it's similarly laggy on Chrome too.
If you want that as a native app, Corel Painter has that feature of simulating paint bristles and real brushes and their color mixing, and wouldn't be surprised if GIMP and Photoshop also support that by now.
Paint Shop Pro had a natural brush mode even before Corel bought them. I wonder if it's still there?
Krita [1] might be what you're looking for. Lots of fun with a graphics tablet but perfectly usable with a mouse. Free and supports Win/Linux/Mac.
[1] https://krita.org/en/
[1] https://krita.org/en/
Would love to see this in ProCreate or another native iPad app
> the best laptop ever made
I agree!
I agree!
It's beautiful. I never realized how individual bristles work together to make a brush stroke. It is fascinating to play with, thanks so much.
FWIW, I don't see any paint with my browser: Safari 14.1 (Release 116, WebKit 16611.1.5.3) The rest of the UI seems to work.
By design. Apple can’t let Safari function properly as a modern browser, otherwise PWAs would be able to compete with their App Store money printer on iOS!
I'll assume you're being hyperbolical. By all measurements the latest Safari, whether on the desktop or mobile device, is as "modern" a browser as any of the others.
I frequently build PWAs, and see no more friction building a PWA using Safari on iOS/iPadOS than I do for Chrome on Android.
That said, the reason the OP's site doesn't work in Safari has nothing to do with whether or not Apple supports PWAs or not.
I frequently build PWAs, and see no more friction building a PWA using Safari on iOS/iPadOS than I do for Chrome on Android.
That said, the reason the OP's site doesn't work in Safari has nothing to do with whether or not Apple supports PWAs or not.
I wish I could say the same. Even getting a complex SVG to render correctly can be a pain, and WEBGL / WebP support is non existent. It’s been awhile though, perhaps I should take another look at the updates they’ve made since.
Safari is the new IE
Orange is the new black
Apple could do better
But they don't give a
Orange is the new black
Apple could do better
But they don't give a
This is awesome, and I'm a bit surprised at the lack of more "dynamic" painting software in general (i.e where the paint keeps changing over time, affected by gravity, etc). I've made my own attempt at this[1] although my actual simulation code is quite primitive.
[1] https://play.google.com/store/apps/details?id=com.woodenclos...
[1] https://play.google.com/store/apps/details?id=com.woodenclos...
How does one build anything like this if all they know is enterprise CRUD application and web API work?
Like learning guitar - the trick is motivating yourself and making small investments by figuring out how to enjoy tiny projects that slowly get you to this level of skill/knowledge.
This example uses HTML Canvas, so you could look up some tutorials and start there. At first, programming visually when you've only done API stuff is a whole new world, but it makes a lot of sense with some practice.
I found a tutorial which is probably along the lines you'd want to go down, see https://www.youtube.com/watch?v=gm1QtePAYTM
This example uses HTML Canvas, so you could look up some tutorials and start there. At first, programming visually when you've only done API stuff is a whole new world, but it makes a lot of sense with some practice.
I found a tutorial which is probably along the lines you'd want to go down, see https://www.youtube.com/watch?v=gm1QtePAYTM
Take a graphics class online. The great thing is that learning this has a very fast reward loop. With every small thing you learn, you can try it and it looks great right away.
So:
Probably take a graphics class, with an intro to shaders and the different lightning methods.
Then lookup some cosmetic liquid simulation algorithms by graphics people.
Then learn how to do shaders with canvas and javascript.
So:
Probably take a graphics class, with an intro to shaders and the different lightning methods.
Then lookup some cosmetic liquid simulation algorithms by graphics people.
Then learn how to do shaders with canvas and javascript.
Nice!!
This is great. I made something with similar bristles, but without the fluidity, alongside soem other brushes. https://react-artboard.netlify.app/
the paint realism is amazingly realistic and fantastic...it really blends together with texture, love this, favorite of all time for browser.
This has to be the most NEXT-LEVEL web based painting tool I've ever seen or used...super cool and kudos to the creator!!!
First I was like "what's the big deal" and then I realised this thing runs in the browser.
Very nice!
This is awesome.
Looks a lot like the algorithm in https://ieeexplore.ieee.org/abstract/document/6314479, modified to be more oil-paint-y.
And now couple it with a e-brush input device :)
Canvas rotation would also be nice. And a regulator for gravity.
Is there any place where it is possible to read more about this painting techniques for code?