[HN Gopher] Fluid Paint
___________________________________________________________________
Fluid Paint
Author : pjerem
Score : 493 points
Date : 2021-06-21 08:59 UTC (14 hours ago)
(HTM) web link (david.li)
(TXT) w3m dump (david.li)
| nielsbot wrote:
| 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.
| FractalHQ wrote:
| 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!
| sebringj wrote:
| the paint realism is amazingly realistic and fantastic...it
| really blends together with texture, love this, favorite of all
| time for browser.
| ginsmar wrote:
| Nice!!
| cakirh wrote:
| 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.
| mdre wrote:
| Those who have Wacom tablets or Apple pencils, does it react to
| pressure sensitivity?
| throwawaynifoqw wrote:
| 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.
| Anunayj wrote:
| 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.
| HugoDaniel wrote:
| This is great!
|
| Is there any place where it is possible to read more about this
| painting techniques for code?
| onion2k wrote:
| 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.
| bryanrasmussen wrote:
| 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)
| fsloth wrote:
| "Real-time Rendering" by Akenine-Tomas Moller 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/RayTracingInOne
| Weekend.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.
| SonOfLilit wrote:
| 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)
| SonOfLilit wrote:
| 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)
| hutzlibu wrote:
| "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.
| aspaviento wrote:
| 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.
| egypturnash wrote:
| 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.
| numlock86 wrote:
| To me it feels like it's dry after ever stroke. Paint with
| yellow on red (fluidity maxed) shouldn't result in yellow.
| egypturnash wrote:
| I just figure it's really thick virtual oil/gouache/whatever
| paint.
| aearm wrote:
| Nice
| mikewarot wrote:
| 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.
| steerablesafe wrote:
| 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.
| real-dino wrote:
| 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.
| steerablesafe wrote:
| If you use a large brush with "low" quality then you have
| larger half-transparent areas at the beginning and end of
| each stroke.
| SamBam wrote:
| 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.
| andersonfreitas wrote:
| 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.
| aaronetz wrote:
| 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...
| gennarro wrote:
| No supported on mobile Safari. Too bad! Will try it later.
| p0nce wrote:
| Neither on Safari desktop.
| coldcode wrote:
| Me either, save seems not to work on Chrome for me either.
| artur_makly wrote:
| same.
| [deleted]
| pupdogg wrote:
| 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!!!
| onlywicked wrote:
| Amazing. It was really satisfying to see the strokes.
|
| Any resources for learning this stroke style?
| tomxor wrote:
| 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: document.body.innerHTML='<canvas id=c>';
| x=c.getContext('2d');c.width=1920;c.height=1080;C=S=t=0;setInterv
| al('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)
| GolDDranks wrote:
| 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.
| elwell wrote:
| > the best laptop ever made
|
| I agree!
| andyjohnson0 wrote:
| 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/
| dharma1 wrote:
| Would love to see this in ProCreate or another native iPad app
| hobofan wrote:
| 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.
| mark-r wrote:
| Paint Shop Pro had a natural brush mode even before Corel
| bought them. I wonder if it's still there?
| L0g4n wrote:
| Seems to be not supported on iOS. Really, not surprising
| considering all the Safari quirks.
| kgeist wrote:
| It doesn't run on my Chrome for Android either
| handrous wrote:
| 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.
| Pulcinella wrote:
| 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.
| [deleted]
| savanpatel wrote:
| This is not working on Safari browser.
| ascorbic wrote:
| This is great. I made something with similar bristles, but
| without the fluidity, alongside soem other brushes.
| https://react-artboard.netlify.app/
| soheil wrote:
| I feel guilty that I just wasted a bunch of paint drawing stupid
| lines.
| mark-r wrote:
| Yes, those electrons are gone forever now.
| sgt wrote:
| Cursor moves around but doesn't seem to paint. Using Safari.
| choicenotchance wrote:
| Not saving
| afkqs wrote:
| 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?
| krylon wrote:
| Thank you for that link, this is so much fun! I feel like a
| ten-year old playing with this.
| cabernal wrote:
| 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
| jonplackett wrote:
| 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.
| Jasper_ wrote:
| 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.
| pram wrote:
| Flame Painter does this kind of 'particle' brush thing, if anyone
| is looking for a more comprehensive version. It's a very neat
| effect!
| mattfrommars wrote:
| How does one build anything like this if all they know is
| enterprise CRUD application and web API work?
| roberttod wrote:
| 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
| make3 wrote:
| 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.
| jansan wrote:
| 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?
| empiricus wrote:
| Very nice color wheel, I was able to quickly choose and use
| some very beautiful colors.
| jansan wrote:
| Answering my own question: This seems to use the RYB color
| model:
|
| https://en.wikipedia.org/wiki/RYB_color_model
| mark-r wrote:
| 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.
___________________________________________________________________
(page generated 2021-06-21 23:00 UTC)