About

Glitch art exploits data corruption to produce visual artifacts. A standard PNG stores pixel data as rows of R, G, B, A byte quadruplets. This tool reads that buffer, then applies deterministic mutations: horizontal row displacement by Δx pixels, independent channel offsets (R shifted separately from G and B), rectangular block relocation, and raw byte corruption. Each effect uses a seeded pseudo-random number generator (Mulberry32), so identical seed values reproduce identical output. All processing happens in your browser via the Canvas API. No image data leaves your device.

Naive databending on compressed PNG streams risks producing unreadable files. This tool operates on the decoded pixel buffer, guaranteeing a valid output image every time. The tradeoff: you cannot replicate the accidental artifacts of hex-editing a raw file. For most creative workflows, controlled parametric glitching produces more usable results than blind corruption. Note: very large images (above 4096×4096) are downscaled to prevent memory issues.

Formulas

The core row-shift operation displaces each pixel row by a random offset. For row y, the new pixel at column x is sampled from:

x′ = (x + Δx) mod W

where W is image width and Δx is drawn from a uniform distribution [−Δx_max, Δx_max] only when rand() < intensity.

Channel separation reconstructs each output pixel from three different source locations:

R_out(x, y) = R_src(x + R_x, y + R_y)
G_out(x, y) = G_src(x, y)
B_out(x, y) = B_src(x + B_x, y + B_y)

The green channel remains anchored. Out-of-bounds reads wrap via modulo.

The seeded PRNG uses Mulberry32:

t = (s + 0x6D2B79F5)
t = imul(t ⊕ (t >>> 15), t | 1)
t = t ⊕ (t + imul(t ⊕ (t >>> 7), t | 61))
return ((t ⊕ (t >>> 14)) >>> 0) ÷ 2³²

where s is the seed value. This guarantees identical output for the same seed and parameters.

Byte corruption selects random indices i in the pixel buffer and replaces the value with rand() × 255, skipping every 4th byte (alpha channel) to preserve opacity.

Reference Data

Effect	Parameter	Range	Description
Row Shift	intensity	0 - 100%	Probability that any given row is horizontally displaced
Row Shift	Δx_max	0 - 200px	Maximum horizontal displacement magnitude
Channel Offset	R_x, R_y	−50 - 50px	Red channel X/Y offset from original position
Channel Offset	B_x, B_y	−50 - 50px	Blue channel X/Y offset from original position
Block Corruption	n_blocks	0 - 50	Number of rectangular regions randomly relocated
Block Corruption	size_max	10 - 300px	Maximum width/height of each displaced block
Scanlines	gap	0 - 20px	Vertical spacing between scanline bars (0 = off)
Scanlines	α_line	0 - 1.0	Opacity of each scanline overlay
Byte Corruption	p_corrupt	0 - 5%	Probability a pixel byte is randomly mutated
Color Quantize	bits	1 - 8	Bit depth per channel in affected stripes
Seed	s	0 - 999999	PRNG seed for reproducible results
Preset: Subtle	-	-	Low intensity, minimal channel offset, no corruption
Preset: VHS	-	-	Moderate row shift, scanlines enabled, slight color bleed
Preset: Databend	-	-	Heavy byte corruption, block displacement, quantization
Preset: Cyberpunk	-	-	Strong channel separation (R/B), scanlines, high contrast blocks
Preset: Corrupted	-	-	Maximum corruption, large block count, aggressive quantization
Preset: Vaporwave	-	-	Moderate shifts, heavy channel offset, wide scanline gap

Frequently Asked Questions

The tool uses Mulberry32, a deterministic pseudo-random number generator. Given the same seed value and identical parameter settings, the sequence of random numbers is always the same. This means every row shift magnitude, block position, and corruption target is reproduced exactly. Change any parameter and the sequence maps differently to the image, producing a new result.

No. Unlike raw hex-editing of a compressed PNG file (which can break the DEFLATE stream and make the file unreadable), this tool operates on the decoded pixel buffer after the browser has fully parsed the image. The output is always re-encoded as a valid PNG via the Canvas API's toBlob method. You cannot produce a file that fails to open.

Each pixel's red, green, and blue values are read from different spatial coordinates. The red channel might be sampled from 15 pixels to the left, while blue is sampled from 10 pixels to the right. Where all three channels aligned in the original, they now disagree, creating colored fringes at high-contrast edges. The green channel is kept at its original position as the perceptual anchor because human vision is most sensitive to green.

Images are capped at 4096 × 4096 pixels. Larger images are proportionally downscaled before processing. This limit exists because Canvas getImageData allocates 4 bytes per pixel (RGBA). A 4096 × 4096 image uses 64 MB of RAM for the pixel buffer alone. Channel separation requires a second copy, doubling that to 128 MB. Most browsers allocate 256-512 MB to a single tab, so exceeding 4096 × 4096 risks out-of-memory errors.

You can upload PNG, JPEG, or WebP. The browser decodes any supported format into an identical RGBA pixel buffer via the Canvas API. All processing happens on that buffer. The output is always exported as PNG (lossless) regardless of input format. If you need a JPEG output, convert the downloaded PNG afterward.

Every Nth row of pixels (where N equals the gap parameter) has its RGB values multiplied by (1 − alpha), darkening those rows. On a real CRT, the electron beam illuminates phosphor lines with dark gaps between them. The effect is most convincing with a gap of 2-4 pixels and alpha of 0.3-0.5. Higher alpha values produce a more aggressive retro look.