Canvas 1 – Original Image

Image drawn at a downscaled resolution if very large.

Canvas 2 – DCT & Post-Processing

Includes DCT, Quantization, Bit Depth Reduction, optional Sobel filter, 3D rotation, horizontal squeeze, and X translation.

Per block: 2D DCT, keep first N coefficients in zig-zag order, JPEG-like quantization, then 2D IDCT. Optional grayscale, bit-depth reduction (1–8 bits/channel), Sobel filter (X/Y magnitude control), 3D rotation around X/Y, horizontal squeeze anchored at left or right, X-axis translation, and download of the processed canvas.

Canvas 3 – Sobel Filter

Shows Sobel edges (or grayscale if Sobel is off). Driven by the Sobel sliders above and unaffected by 3D rotation / squeeze / translation.

DCT 8×8 Block Quantization Playground (3D + Squeeze + Bits + Translate + Sobel + DC)

Upload an image, tweak DCT coefficients & quantization, optionally apply a Sobel filter, view in B/W, rotate the processed pixels in 3D, apply horizontal squeeze, quantize bit depth, translate in X, resize the output canvas display, download the processed image, and now export/import DC values with a DC-only canvas.

Image:

Coefficients per 8×8 block 0 = none, 64 = all

Keeping 64 / 64 coefficients (100%)

Quantization strength 1 = off, higher = more loss

Quantization strength: 1 (no extra quantization)

Colour bit depth per channel 1–8 bits

Bits: 8 (256 levels)

Show Canvas 2 in black & white

Apply Sobel Filter (Edges)

Sobel X Magnitude (Vertical Edges)

X Magnitude: 1.00×

Sobel Y Magnitude (Horizontal Edges)

Y Magnitude: 1.00×

3D Rotation & Translation

Rotate around X axis (tilt)

X rotation: 0°

Rotate around Y axis (yaw)

Y rotation: 0°

Squeeze factor (horizontal) 1.0 = none

Squeeze: 1.00× from left

Anchor left Anchor right

Translate in X (pixels)

Translate X: 0 px

Output canvas size (display)

Output width: 100%

Canvas 4 – DC-only Image (per 8×8 block)

Each 8×8 block is filled with its DC (average colour). You can download a DC data file (including a DC-only PNG) and later upload it to reconstruct this canvas.

Upload DC JSON:

Canvas 5 – Sobel on DC Image

DC values (one per 8×8 block) are resized to the size of Canvas 3, then Sobel is applied using the same X/Y magnitudes.

Canvas 6 – N/A

N/A