Visualize four common ways of calculating brightness. As you move the slider on the left down, the pixels highlighted in red are those that are "brighter" than the current threshold on the slider, according to each respective method of calculating brightness.
Average Brightness simply averages the RGB values. Perceived Brightness
(Luminance) uses the formula 0.2126 * R + 0.7152 * G + 0.0722 * B. Lightness uses the formula 0.5×max(R,G,B)+0.5×min(R,G,B). Desaturation is the average of Luminance and Lightness.
This visualization creates a random walk pattern where each pixel's color is determined by averaging its already-calculated neighbors and adding a random delta. Use the delta input to control the maximum random variation (1-255).
This section converts arbitrary text into numbers and those numbers into a series of colored pixels in a grid. It uses UTF-8 encoding, so emojis are supported (and render interesting colors). Note that beside each large (zoomed-in) canvas is a smaller canvas showing the same pixels at actual size.
The Sorted by Hue & Brightness reorders the colors to create a more visually appealing pattern. Grayer colors are sorted to the bottom. The Enhanced Saturation version increases the color saturation for a more vibrant appearance in a reversible way. The Factor input controls how much the saturation is increased.
The original idea here was to make a machine-readable pattern that was easy on the eyes. I ran into difficulty finding a way to return the sorted pixels back to their original order without significantly degrading the visual appeal of the pattern.
This visualization encodes text into an image using a reversible algorithm. Text is converted to UTF-8, then encoded in base-(2×delta). Each base digit becomes an offset applied to pixel colors using neighbor averaging. The pattern fills using the snake row-by-row method. The image can be decoded back to the original text if you know the delta value.
This section verifies that Random Walk and Reversible Text Encoding use the same underlying algorithm. Click "Run Comparison" to capture the Random Walk's random values and feed them to Text Encoding. If both algorithms are identical, the images should match pixel-for-pixel.
This section compares the digit distributions between Random Walk and Text Encoding. Random Walk generates uniform random digits, while Text Encoding converts text characters to digits (biased by character frequency). This distribution difference explains why they look visually different despite using identical algorithms.
What does it look like when the color channels increase at different rates across a gradient? What if when one of the channels loops around? This tool explores those questions by allowing you to create custom gradients with wrap-around detection. You can add additional cards with the green plus button at the bottom.