Pixel Visualizer

3D HSB Data Visualization Tool
⭠ Go Back
Pixel Visualizer
Play Video

Pixel Visualizer is a tool that breaks down and organizes an image's pixels based on their hue, saturation, and brightness (HSB). The program uses 3D for its data visualization: Hue is from left to right (x-axis); saturation is from far to near (z-axis); and brightness is from top to bottom (y-axis). This provides an inspiring look into all the colors within a digital image; it's useful for artists looking for colors. The program can also display different visualizations, such as pushing pixels based on their brightness value. Users can load any image from their own computer to visualize.


Deconstructing a digital image, pixel by pixel



I was inspired by Exo: A Visualization of Kepler’s Exoplanet Candidates, by Jer Thorp, to create a data visualization using 3D space. As a photographer, I thought about how pixels could be interpreted through HSB (hue, saturation, and brightness). Since HSB has three values and 3D has three dimensions, I believed they could work together. I imagined a digital image floating in 3D space, and with a push of a button the image's pixels would organize themselves based on their HSB value.



The project was programed in Java and uses the Processing IDE to aid the visual output. Every pixel of an image (after it's resized) is converted into an instance of a new pixel class, which determines the pixel's hue, saturation, and brightness value, as well as keeps track of its position within the image. These pixel instances are stored within an array and manipulated via functions depending on the visualization desired. For instance, when organizing pixels by HSB, each pixel instance will translate to a new x,y,z position based on its HSB values. The position it moves to is determined by a math function of an HSB value over its potential range.



While the original idea only extended to organizing pixels based on HSB, the project expanded to improve upon that idea and add extra features to become a useful tool. implementing a file upload feature was a must to make this a tool that could be used by others. Pixels were represented by cubes rather than squares to improve their visibility in 3D space. A movable camera was added to allow viewing the visualization from any angle. More data visualizations were added to increase the tool's versatility, including visualizing a single value like hue. The programming was also saved in iterations utilizing version control, so older versions of the project could be referenced in case of a troublesome bug or misunderstood code. Screenshots showing many iterations are in a gallery lower on this page


Viewer Responses

"Really Nice... I like the cubes a lot. And the organization is really interesting."

"This is a really great tool for painting. It helps me find new colors to paint with."

Design Iterations