Finding Pixel Flow levels with a 768-bit RGB pHash visual search

I’m a big fan of the game Pixel Flow, but I often find myself getting completely stuck on specific levels. Because it is a purely visual grid game, you cannot simply search for a solution using text. To solve this, I built a reverse image search engine specifically designed to find level solutions based on a screenshot.

The challenge was figuring out how to do image matching quickly, accurately, and without heavy infrastructure. Here is how I approached the technical side:

1. Multi-Channel pHash (Per-Channel RGB)
   Most perceptual hashing (pHash) implementations convert an image to grayscale before processing. However, in a game like Pixel Flow, color is the primary piece of information. Discarding color would mean losing the ability to distinguish between levels with similar layouts but different color palettes.
   To fix this, I split the image into its Red, Green, and Blue channels and computed a 256-bit pHash for each channel independently.

2. Combining into a 768-Bit Fingerprint
   After generating a 256-bit hash for all 3 channels, I concatenated them. This creates a combined fingerprint of 768 bits (256 * 3). This captures both the structural layout and the color distribution of the game level perfectly.

3. Hexadecimal Compression
   Storing and querying a raw 768-bit binary string isn't the most efficient approach for database queries. To reduce the data footprint, I convert the binary string into a hexadecimal string. This brings the size down to just 192 characters while retaining all the precision.

4. Fast Hamming Distance Matching
   When a user uploads a screenshot, the system generates its 768-bit hash on the fly. It then compares this hash against the saved database of known level hashes. By calculating the Hamming distance (the number of positions at which the corresponding bits are different), it can rapidly find the closest match.

5. Displaying the Top 6 Matches
   Finally, the system pulls the 6 records with the smallest Hamming distance and displays them to the user. Showing a small cluster of top matches instead of just one gives the user fallback options in case there are minor discrepancies due to image cropping, phone UI overlays, or screen dimming.

I'd love to hear your feedback on this! Are there more efficient ways to handle color-sensitive image hashing for grid-based games?

Link to the site: https://pixelflowonline.net/