[HN Gopher] Show HN: Poulette - A Color Palette GUI
___________________________________________________________________
Show HN: Poulette - A Color Palette GUI
Author : grgrdvrt
Score : 104 points
Date : 2021-03-30 09:33 UTC (13 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| micouay wrote:
| one of the most innovative and beautiful things I've seen in a
| while. my only complaint are the lines between the points already
| mentioned by others. I don't know much about color though so I
| can't help you here. otherwise, great job.
| tartoran wrote:
| This is very elegant and you are very creative. I also visited
| your website and love your interactive sketches:
| https://www.grgrdvrt.com/sketches/
| tartoran wrote:
| Your works are worth mentioning here on HN:
|
| https://www.grgrdvrt.com/works/
| grgrdvrt wrote:
| Thank you for these heartwarming comments :)
| kaibee wrote:
| It would be nice to be able to add constraints between existing
| nodes.
| grgrdvrt wrote:
| I don't know how that would translate in term of interactions
| but the idea is interesting.
|
| Are you thinking about constraints for the positions or for the
| colors?
| vanderZwan wrote:
| Really cool!
|
| So it looks like you're first applying Delauny triangulation to
| the color points, and then apply linear interpolation along the
| created triangles using Barycentric coordinates? Did I get that
| right? Pretty elegant solution (not to mention all the other
| little details that went into designing the interface).
|
| edit: wait, if I'm placing a outside the existing shape it's
| projected to the closest line and linearly interpolates on it?
| Nice, this is really thought through!
|
| The colors still looks a bit strange along the triangle edges
| sometimes, and glancing at the source code it seems like you're
| mixing in linear RGB[0] so it's not that. I guess that just means
| that I'm looking at a saddle point in the color space?
|
| (this made me wonder how smoothing functions would work for
| triangle meshes (that aren't secretly quads split into two
| triangles), and a quick search suggests that could be quite a
| deep rabbit hole to fall into)
|
| [0]
| https://github.com/grgrdvrt/poulette/blob/main/src/utils/col...
| grgrdvrt wrote:
| Thank you!
|
| This is indeed Delaunay triangulation, barycentric coordinates,
| linear RGB and projections on the edges for the points outside
| of the mesh. You got everything right!
|
| Having a nice blending along the edges doesn't seem
| straightforward. I have a few options in mind but nothing
| obviously right (working with a voronoi diagram instead of a
| delaunay one, bezier interpolation)
| vanderZwan wrote:
| Maybe a single pass of root-of-3 subdivision would already
| help? It would insert another "control point" at the middle
| of the existing triangles. Then you could linearly
| interpolate along the new refined triangles. That wouldn't
| really remove the saddle points (if my intuition is correct
| it would just divide them into smaller ones along the new
| triangles), but maybe they'll end up more smoothed out and
| therefore less jarring.
|
| [0] https://www.graphics.rwth-
| aachen.de/media/papers/sqrt31.pdf
| globular-toast wrote:
| Is it intentionally named after the French word for a young
| chicken?
| grgrdvrt wrote:
| Yes, I'm terrible at picking names but this is intentional, I'm
| french.
| hassancf wrote:
| Salut ma poule!
|
| I'll show myself out...
| grgrdvrt wrote:
| I wanted to create an elegant and unusual color selector
| interface that was still easy to learn and fun to use.
|
| A feature I like is that every color you create is kept on the
| palette so you can build new colors upon previous ones. It's also
| kind of a natural way to create a history of the colors you used.
| Colors that are removed from the palette are kept on the side so
| you can temporarily reduce the complexity of the palette.
|
| For the technical side, it is made with regular js/html/css and
| webgl, no framework is required. It is supposed to work on touch
| devices as well as desktop computers.
|
| This is still a bit experimental so I'd be very happy to have
| some feedback. Thank you!
| FractalHQ wrote:
| You mentioned not wanting to package it for frameworks, and
| mentioned Svelte. I just want to point out that Svelte has
| native support for vanilla JavaScript and html, so this will
| work out of the box like any other JS library. Just want to let
| you know since your README suggests otherwise!
|
| Anyways, awesome work :)
| dash2 wrote:
| It was beautiful!
|
| I think it needs some work to make it "learnable". It wasn't
| obvious to me whether the colours on the side were the final
| palette, or the "trash can".
|
| It might be nice to have a way to see multiple colours together
| in a "demo". At the moment you just see one colour as the
| background.
|
| Lastly I'm not sure that dragging to the side is very intuitive
| as a way of removing the colour. It mixes two things up -
| moving the colour to adjust the palette, and getting rid of it.
| Maybe the user could double-click instead.
|
| All that said, I thought this was great and really fun and
| intuitive.
| grgrdvrt wrote:
| Thank you for this constructive feedback!
|
| I'll add the double-click for the deletion, you are not the
| first person to suggest it.
|
| I have to admit the colors on the side are a bit of an
| afterthought. You need some diversity to be able to create
| the colors you want. If you can't retrieve the deleted colors
| you can be stuck. I agree its role is not obvious. I don't
| know how to fix that but I'll keep the issue in mind.
|
| I'm not sure what you mean about the "multiple colours in a
| demo". I think the demo is missing some kind of "real world
| usage" aspect. At the same time I tried to keep it focused on
| the component itself. Maybe I'll add an example to the readme
| tomake things clearer
| tomger wrote:
| Nice work! Maybe start a palette on the left side with a
| set of prime colors like a painter would?
| iFreilicht wrote:
| I really like this idea! It's quite fun to play around with,
| but it feels like there's not a lot of deliberate choice I can
| make. It also just works really well and is super smooth. One
| thing that could be improved about rendering are the edges of
| the polygon. They look very washed out, even on my 14" UHD
| display. A little bit like a very low-quality AA was used.
|
| What's a little annoying is that colours jump around when I
| move anchors closer or farther away from each other, but I
| guess there's no good solution for that.
|
| Also, it would be nice if the connections between the anchors
| were less obvious. Right now, they're very clearly visible
| straight lines. Not sure how that could be solved, though,
| either.
|
| What colour space are you using for all the transitions?
|
| That sounded quite negative, but I really like what you've done
| here, it's a very creative approach to an otherwise technical
| topic.
| grgrdvrt wrote:
| Thank you, it doesn't sound negative at all, in fact you
| raise interesting points!
|
| the "obviousness" of the connections is tricky. The blending
| is in the linear RGB space. I initially tried sRGB but it was
| terrible. I'm not sure how to improve it. At the moment the
| interpolation is done through the varyings between the vertex
| and fragment shader. This is quite limiting.
|
| About the lack of deliberate choice, in theory you can reach
| any rgb color. In practice this is limited by the initial
| colors I chose (they are smoother than pure RGB-CMY). I'm not
| sure how much of the RGB space I'm missing.
|
| For the antialiasing issue I'll look into it. I'm not sure I
| correctly set the AA in webgl. Could also be due to some
| issue with the size of the canvas
|
| Thank you again!
| raphlinus wrote:
| Interpolate in a perceptual space such as Oklab?
|
| Possibly use a radial basis function for interpolation
| rather than triangles? I don't have JavaScript code handy
| but rbf-interp[1] is Rust code that could either be adapted
| or called from wasm.
|
| [1]: https://crates.io/crates/rbf-interp
| grgrdvrt wrote:
| The triangles-based interpolation is indeed problematic.
| It has the advantage to be fast and super easy to
| implement in webgl with an arbitrary number of points. I
| don't understand everything yet about the rbf
| interpolation but it looks very interesting, I'll look
| into it.
|
| A better color space can also help with some issues (in
| the demo the darker colors are harder to reach when
| blending with the black point than lighter colors are
| when the white point is involved) but how I understand it
| the colors in a triangle are influenced by the colors and
| shapes of the surrounding triangles, whatever the color
| space.
|
| I must say that I'm very happy to have had your input on
| this. I'm a big fan of your work and your blog is a real
| treasure!
|
| Thank you!
| nom wrote:
| This! Interpolating in linear RGB space is the biggest
| issue, I'm sure it will improve a lot simply by using a
| more suitable colorspace. Triangles might not be
| noticable at all then, except in extreme cases (which are
| undesirable anyways).
| grgrdvrt wrote:
| I'll try a different color space, for sure, but I think
| the interpolation method is the real culprit. I have the
| feeling that in a configuration like this:
| A-B |/| C-D
|
| the position of D could have an impact on how ABC is
| rendered.
|
| But I'll try another color space first, it should be
| easier to implement.
| NotAnOtter wrote:
| Not all that useful but definitely cool. Would help if the the
| selected color code was printed at the bottom with a 'copy to
| clipboard' button
| JeremyBanks wrote:
| This is one of my favourite things I've seen here in a long time.
| This is a very creative approach to a UI component that hasn't
| changed much in decades. I love it!
| elhenrico wrote:
| It would be great if you could implement subtractive colors (like
| real pigment mixing > yellow + blue = green). Digital "pigment"
| mixing is very rare to find on the web.
| grgrdvrt wrote:
| In fact I did a bit of research after I started working on this
| and it turns out Adobe did exactly what you're describing:
| https://research.adobe.com/publication/playful-palette-an-in...
| (the "learn more" button links to a detailed pdf with pictures
| of the interface)
| disconcision wrote:
| there's a video of playful palette here:
| https://www.youtube.com/watch?v=kapQfn7K0fQ
___________________________________________________________________
(page generated 2021-03-30 23:02 UTC)