The Art of PNG Glitch (2015)

http://ucnv.github.io/pnglitch/

by skilled • 7 years ago

267 16 7 years ago

ucnv.github.io

snickmy• 7 years ago

Love this!

dang• 7 years ago

From 2015: https://news.ycombinator.com/item?id=10222524

lstamour• 7 years ago

Anyone else find this brought back memories of browsing or downloading on dialup, just to have to hit refresh when the page loaded with these odd images? It’s funny, I never really asked myself why — instead like MP3 data corruption I chalked it up at the time as simply a “quirk” of how the internet worked for me at the time.

pjc50• 7 years ago

These days I most often see it on Freeview TV when the MPEG breaks up due to interference.

LawnboyMax• 7 years ago

Remember reading this article in 2015 and then trying to do some simple glitching using C.

Simply inserting an additional NULL for a specific RGB range will cause all channels written after it to become misaligned and will create quite an interesting output image (similar to figure B.14 in the article). I.e. an R component will be written into G's place, G will be written into B's place etc..

It goes along these lines:

    for (int i = 0; i < imgHeight; i++) {
        for (int j = 0; j < imgWidth; j++) {
            RGBTRIPLE triple;
            fread(&triple, sizeof(RGBTRIPLE), 1, inptr);
            if (triple.rgbtRed == 0xa4 && triple.rgbtGreen == 0x90 && triple.rgbtBlue < 0x77) {
                fwrite(&triple, 4, 1, outptr); // an additional NULL is written to ouput
            } else {
                fwrite(&triple, 3, 1, outptr);
            }
        }
    }

clubm8• 7 years ago

Remember reading this article in 2015 and then trying to do some simple glitching using C.

And I just realized I meant to play with it "when I got some free time"... three years ago :/

ypolito• 7 years ago

I also have the link buried under an equivalent named 'h4x0r later' folder in my bookmarks since 2015. There are so many interesting things I'll never manage to play with in my lifetime, that I apparently have "postponed".

It's great others document and share their entertaining results to lazy lads like me :)

jcims2• 7 years ago

Did a naive glitching approach in JavaScript around this same timeframe. Just loaded into a page as data element and started flipping random bits when you clicked on it. Tried it with jpg too but the results with PNG we’re way more trippy and cool.

mrspeaker• 7 years ago

I did it with a JavaScript JPG encoder - not randomly flipping output bits, but randomly flipping bits during the encoding: http://www.mrspeaker.net/dev/jpgcrunk/

(Though I kind of have a feeling I pushed my project when this article was posted originally! [Edit: ha, yep, I sure did - someone linked the original discussion below])

jcims2• 7 years ago

Interesting thing is to see how the different renderers process the glitches. Some have a much greater tenacity than others to get pixels on screen.

mzs• 7 years ago

That was fun, thanks: https://cdn.discordapp.com/attachments/518470848580157450/54...

solamentedoug• 7 years ago

Part of my job includes data recovery, and I find customers aren't usually psyched when their baby photos come out looking like this.

prophesi• 7 years ago

A friend of mine runs a glitch-art/cyberpunk/futurism newsletter, and it has a great resources page for anyone wanting to get into glitch. http://www.glitchet.com/resources

gambler• 7 years ago

After playing SOMA, I recall it every time I see moderately glitched images. Using digital "distortion" as part of the visual aesthetic was absolutely brilliant. I feel like it started a trend, although maybe multiple developers strated using the same tricks independently roughly at the same time.

Somehow these PNG glitches feel "natural", just like analog radio noise, unlike the usual artifacts of heavy JPG, MP3 or video compression. Why are some degradations much less annoying than others? When I need to upscale an low-rez image I usually blur it using anisotropic smoothing, then add random noise. It actually looks sharper than the plain Laczoz/Bicubic upscale.

Maybe we need to design new audio/video formats that degrade more "artistically" when there is data loss or insufficient bandwidth. This is less relevant now than it used to be in ~2005. Still, would be an interesting experiment. Is there an encoding that would naturally produce smoothed visuals without sufficient data?

If I have some energy tonight, I will experiment with taking an image array, "deleting" random pixels and filling them with blended neighbors.

TenaciousValor• 7 years ago

Maybe we need to design new audio/video formats that degrade more "artistically" when there is data loss or insufficient bandwidth.

If "art is in the eye of the beholder," then an artistic decomposition would provide inconsistent results across populations. It seems more important that the data decompose in a more repeatable and reliable way.

Idea: create a transmission format which creates specific artifacts only in the presence of certain types of interference or failure modes. The format would likely need to created on a situational basis. It seems likely that this has been created, but I've never heard of something like it.

Is there an encoding that would naturally produce smoothed visuals without sufficient data?

You might enjoy the results of wavelet compression [1]. An image format using wavelet compression is JPEG2000 [2].

[1] https://image.slidesharecdn.com/sjbit-ncp-2013-140401124704-... [2] https://en.wikipedia.org/wiki/Wavelet_transform#Wavelet_comp...

FraKtus• 7 years ago

I played with the idea to do that with H264 streams. This was done with FFmpeg and FFplay. The idea is that you read stream packets from the source and feed it to the decoder, so there is a clear point where you can inject glitching. Because it's difficult to unpack a stream packet, modify it and repack it, I ended hacking the decoder itself. While I had some similar results, I failed to produce something easy to use.

The Art of PNG Glitch (2015)

Related Stories