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:
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.
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 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.
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.
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.
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.
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.
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
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)
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.
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)
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.
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)
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.
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.
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?
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.
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.
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.
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.
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: