Introduction
This shader is demonstrating what it would look like to remove a portion of the color wheel. The inspiration? I just don’t like the color green (🤮) and wanted to get rid of it… however, this gave me the inspiration to see what it would look like if I could optionally remove any color by removing a sector from the color wheel. So now, with this shader, we can see what that would look like when looking directly at a color wheel.
Now, there is not a clear solution on what we can do to “get rid” of a color while still maintaining “something” there to fill its spot. It’s not like we can create a new color, and if we were to choose a gradient from another part of the color wheel, what would make sense? Instead, we will use dithering - a technique that uses patterns of available colors to create the illusion of unavailable colors. In particular, we will add a time component $t$, and for any given color $c$ let $c_l$ and $c_r$ be the nearest color in the color wheel to its left and right. Let $\hat{c}$ be the color displayed and $d$ be a distance metric. Then, we have
$$P(\hat{c} = c_l|t) = \frac{d(c, c_l)}{d(c_l, c_r)}$$
In other words, an annihilated color will be displayed as one of the two nearest acceptable colors at random, but it will be more likely to display the closer of the two acceptable colors (proportional to how close they are!). Let’s see how this looks:
Shader
If viewing on mobile, make sure to enable WebGL 2.0.
▶️
Controls
- ▶️/⏸ Button: Controls time, causes noisiness to evolve over time and smoothens dither
- Slider: Controls the annihilated hue. Runs counterclockwise starting from the rightmost point of the color wheel (red/hot pink)
- Slider: Controls with width of the sector being annihilated, where the percentage corresponding to the percentage of the color wheel within that sector, centered around the annihilated hue as defined by the above slider
- Slider: Displays the color wheel at difference luminances
- Slider: Changes the size of the resolution of the dithered annihilated colors
Discussion
I invite the reader in particular to try pressing ▶️, setting the slider to around 25%, and seeing what effect changing the slider has on the color wheel. While the changes are obvious and noticeable, I believe it is quite impressive how little of a difference there is. Remember, when the slider is at 25%, that means a whole quarter of the color wheel is missing! Yet, it doesn’t feel like quite that much is gone. Thank dithering!
Note: This color wheel is a special one, and represents slices from a color space called Okhsl. The benefit of this space is in its perceptual uniformity, further investigated here.
Now that we’ve created this, what does it look like in practice with an actual image? See here.