Smack My Glitch Up › AS3 BitmapData Glitch Generator Sometimes it’s good to break things… During a recent project I needed to find a way of simulating digital interference on an image / video stream. At first, it seemed the best approach might be to use the graphics API or Bitmap effects, but why imitate when you can have the real thing. The principle is incredibly simple. It is also possible to corrupt other image formats (png, gif etc) in the same way, by first passing the image ByteArray through a JPEGEncoder. I’ve implemented this technique in the Glitchmap class, which you can download and play with at the bottom of this post. The small gottcha is that it isn’t desirable to mess with the JPEG headers, so when the clean ByteArray is passed to the Glitchmap class, it will determine the length of the header by reading through the bytes until it finds the SOS (start of scan) declaration (0xFFDA). After I posted the webcam glitch images, Jon used them in his title sequences for the 48 hour film gala.
Glitch Your Images with ImageGlitcher ImageGlitcher allows you to glitch any image and save the result. Glitched images look like they are being displayed on a broken analog TV. Check it out here. This demo was built using Peter Nitsch’s BitmapData.js – a very useful JS port of ActionScript’s BitmapData class which makes it easy to manipulate canvas image data. After playing around with it for a while I got some pleasing glitched image results, so I figured it would be useful to wrap it up as a little app. Slicing the image horizontally and randomly offsetting the slicesRandomly selecting a color channel and offsetting againBrightening the imageAdding a ‘scan lines’ overlay. All the source code is viewable via ‘View Source’. One issue that came up was that the canvas tag does not allow you to getImageData() on images that are from a different web domain. If I get time there are a few features I want to add in the next version: Add ‘Instagram’ style filtersAdd more granular filter optionsUse web workers to avoid hang time