This section is a bit of an intro. If you want to skip directly to where the problem is explicitly outlined, skip to the bottom of this post. Please note that I'm not hip with mathematical lingo, so the problem outline may contain terms and phrases I've coined to make sense of the problem to myself. Definitions are within this intro section, and are paired with the defined term/phrase in bold.
A while ago I discovered that you can layer a lower quality .jpeg copy of an image over itself using the difference blending mode to create 8x8 "pure jpeg tiles"(steps below for if using Photoshop):
- Save your source image as a .jpeg with a compression level that produces a visible difference in quality
- Layer this new .jpeg over your source image in difference blending mode
- Perform a
Image -> Adjustments -> Levels...to make the output more easily visible (Image -> Adjustments -> Brightness/Contrast...can achieve similar results when used on like-value subsets of the image, but does not work well when blanket applied to the entire image)
I quickly noticed that these tiles look really fun and game-like. My ultimate goal is to harness their power to generate tilesets for a videogame I'll design around them. I need your help understanding how that can be possible!
Some shared research, quoted from the top of this post:
In standard JPEG format of a image, Discrete Cosine transform is used. But instead of applying the transform on whole image, we first divide the image in 8x8 block and apply transform on each of them. Thus during quantization we remove small coefficient in higher frequency. These steps are explained in details here.
I've visited that linked wikipedia JPEG article before, and it talks about how what I need to understand works in the #Encoding subsection: Color space transformation $\to$ Downsampling $\to$ Block Splitting $\to$ Discrete Cosine Transform $\to$ etc. I'm sure to some people that may be useful, but the jargon is incredibly dense in that area and I become quickly overwhelmed and disheartened.
To avoid those negative feelings, I turned toward experimentation to try and discover how to produce engineered results. Here are some tests I ran:
- A nonexhaustive look into how the edges of two color regions produce symmetric patterns when converted to JPEG tiles; source image on the left and output on the right.
- How a fading gradient of Gaussian noise applied to a color field affects the jpeg tile output; source image not shown: JPEG version with output overlapped.
- Matrix of all possible 8x8 primary, secondary, white, and black gradient blocks with output on the right.
I've identified that JPEG tiles come in various archetypes: grayscale, red/cyan, green/magenta, blue/yellow, and hybrid. What I mean by this is that when you look at the pixels that form a 8x8 JPEG tile, there is a pattern in the relationship between them. Perhaps this can be best explained by this image:
I pulled multiple examples of certain tile archetypes out to illustrate the different color flow patterns, more technically described as the forms created by the interaction of the 2D DCT on each color channel ( $Y′C_BC_R$).
The problem:
I have no idea how to consistently produce JPEG tiles of a specific archetype, nor do I know how to consistently produce tiles with specific color flow patterns. I assume the amount of possible 8x8 JPEG tiles is finite, and if that's correct is there some sort of "JPEG master image" that I can run through the steps outlined above to produce every possible (or a comprehensive archetypal subset of) JPEG tile? Or, perhaps as more efficient means toward my goal, is there some way I can work with the two-dimensional DCT basis functions directly to manually create JPEG tiles that look the way I want them to look?
If possible, please try to put your answer into layperson's terms, or at least include an answer summary in layperson's terms. I'm an artist making these JPEG tiles in photoshop, and dense mathematical stuff gets me overwhelmed with a quickness. Any and all help is appreciated, thank you!!!
