7 ms·

Show HN: Poulette – A Color Palette GUI

118 points by grgrdvrt 6y ago

grgrdvrt 6y ago
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!
- dash2 6y ago
  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 6y ago
    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 6y ago
      Nice work! Maybe start a palette on the left side with a set of prime colors like a painter would?
- iFreilicht 6y ago
  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 6y ago
    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 6y ago
      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 https://crates.io/crates/rbf-interp
      - nom 6y ago
- FractalHQ 6y ago
  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 :)
vanderZwan 6y ago
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/color.js https://github.com/grgrdvrt/poulette/blob/main/src/utils/col...
- grgrdvrt 6y ago
  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 6y ago
    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 https://www.graphics.rwth-aachen.de/media/papers/sqrt31.pdf
globular-toast 6y ago
Is it intentionally named after the French word for a young chicken?
- grgrdvrt 6y ago
  Yes, I'm terrible at picking names but this is intentional, I'm french.
  - hassancf 6y ago
    Salut ma poule! I’ll show myself out...
elhenrico 6y ago
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 6y ago
  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-interactive-parametric-color-mixer-for-artists/ https://research.adobe.com/publication/playful-palette-an-in... (the "learn more" button links to a detailed pdf with pictures of the interface)
  - disconcision 6y ago
    there's a video of playful palette here: https://www.youtube.com/watch?v=kapQfn7K0fQ https://www.youtube.com/watch?v=kapQfn7K0fQ
JeremyBanks 6y ago
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!
micouay 6y ago
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.
kaibee 6y ago
It would be nice to be able to add constraints between existing nodes.
- grgrdvrt 6y ago
  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?
tartoran 6y ago
This is very elegant and you are very creative. I also visited your website and love your interactive sketches: https://www.grgrdvrt.com/sketches/ https://www.grgrdvrt.com/sketches/
- tartoran 6y ago
  Your works are worth mentioning here on HN: https://www.grgrdvrt.com/works/ https://www.grgrdvrt.com/works/
  - grgrdvrt 6y ago
    Thank you for these heartwarming comments :)
NotAnOtter 6y ago
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

118 points by grgrdvrt 6y ago

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!

dash2 6y ago
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 6y ago
  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 6y ago
    Nice work! Maybe start a palette on the left side with a set of prime colors like a painter would?
iFreilicht 6y ago
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 6y ago
  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 6y ago
    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 https://crates.io/crates/rbf-interp
    - nom 6y ago
FractalHQ 6y ago
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 :)

vanderZwan 6y ago

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/color.js https://github.com/grgrdvrt/poulette/blob/main/src/utils/col...

grgrdvrt 6y ago
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 6y ago
  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 https://www.graphics.rwth-aachen.de/media/papers/sqrt31.pdf

globular-toast 6y ago

Is it intentionally named after the French word for a young chicken?

grgrdvrt 6y ago
Yes, I'm terrible at picking names but this is intentional, I'm french.
- hassancf 6y ago
  Salut ma poule! I’ll show myself out...

elhenrico 6y ago

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 6y ago
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-interactive-parametric-color-mixer-for-artists/ https://research.adobe.com/publication/playful-palette-an-in... (the "learn more" button links to a detailed pdf with pictures of the interface)
- disconcision 6y ago
  there's a video of playful palette here: https://www.youtube.com/watch?v=kapQfn7K0fQ https://www.youtube.com/watch?v=kapQfn7K0fQ

JeremyBanks 6y ago

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!

micouay 6y ago

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.

kaibee 6y ago

It would be nice to be able to add constraints between existing nodes.

grgrdvrt 6y ago
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?

tartoran 6y ago

This is very elegant and you are very creative. I also visited your website and love your interactive sketches: https://www.grgrdvrt.com/sketches/ https://www.grgrdvrt.com/sketches/

tartoran 6y ago
Your works are worth mentioning here on HN: https://www.grgrdvrt.com/works/ https://www.grgrdvrt.com/works/
- grgrdvrt 6y ago
  Thank you for these heartwarming comments :)

NotAnOtter 6y ago

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