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)
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)
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
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.
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.
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.
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.
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?
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:
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.
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.
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.
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.
78 comments
[ 0.20 ms ] story [ 198 ms ] threadIs there any place where it is possible to read more about this painting techniques for code?
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.
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.
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.
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
Any resources for learning this stroke style?
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?
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
from his tweets about it: "Low res position based dynamics thin shell + some loop subdivision"
Which doesn't help me drastically.
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.
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.
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 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.
https://en.wikipedia.org/wiki/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)
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:
Nice paint simulation. Really needs a "dry" button like Painter's had since forever.
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.
[1] https://krita.org/en/
I agree!
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.
Orange is the new black
Apple could do better
But they don't give a
[1] https://play.google.com/store/apps/details?id=com.woodenclos...
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
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.