Wednesday, 8 February 2012

JPEG Glitch Generators

Found this AS3 BitmapData Glitch Generator. Reading the code to find out how it works. Here is some of the output from this:

Picture 4

Picture 5 Picture 7 Picture 6 Picture 10 Picture 9 Picture 8

The opensource example from soulwire works by altering a few bytes in the ByteArray of a JPEG file, which is loaded back into a DisplayObject using Loader.loadBytes(). You will notice that the corruption starts slightly further down - because the code is trying to avoid the important JPEG headers. It is able to do the same for PNG and GIFs by first converting them to JPEGs then doing the same (PNG and GIF are not saved in the same way and only JPEG's format is suitable for this method of corruption - although I wonder how else we could corrupt PNG or GIF?)

A JPEG image consists of segments and markers. Some of them are important and specify important things like the width, height, subsampling, and quantisation tables. These parts are not to be edited because because this needs to be more or less intact for the JPG to still sorta display, and the part that is altered is the portion from SOS (start of scan) and EOI (End of Image). - See more on JPEG syntax and structure)


The same can be done with any text editor. Here is an example using a random cat picture.

Picture 12

All those characters are storing the information for this picture:


I opened up a duplicate of this JPEG file and pasted in the above paragraph on JPEGs into one of the lines.

Picture 14

This is the effect on the JPEG image:



No comments:

Post a Comment