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. Corrupt / alter a byte (or several bytes) in the ByteArray of a JPEG and then load this back into a DisplayObject using Loader.loadBytes(). Because of the way in which JPEGs work, the image will still display but the corrupt bytes will mangle the output to varying degrees, depending on how many bytes have been corrupted. The result is an interesting glitch pattern, a bit like those which were accidentally created when my webcam drivers lost the plot.
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. I hope that it will provide a few moments of fun, if not a practical use (I’m thinking image gallery transitions or music visualisations).
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). The next two bytes represent the length of the SOS, so it skips forward by this amount – the resulting position in the ByteArray should be the end of the header, and so between this point and the EOI (end of image) the data corruption takes place. I’m not sure whether this is the best way of determining the JPEG header size; perhaps any CS graduates / students out there can help me out?
After I posted the webcam glitch images, Jon used them in his title sequences for the 48 hour film gala. If you find a similar creative use for this script or the glitch generator then please let us all know.
I think the next step is to experiment with merging the bytes of multiple glitched images in order to create transition effects. I may also build an AIR app and see what the best way of outputting video might be (using NativeProcess for screen capture perhaps?).
Download: AS3 BitmapData Glitch Generator (Glitchmap)You can also download the Glitchmap Class and the Glitch Generator source code from the soulwire code repository.
I’ve just been having a play with this, but I wanted to use images generated from within Flash, so I used as3corelib’s JPEG encoder and then fed the results into the Glitchmap. I’m not sure, but I imagine if I can do this, then you could also use it to glitch other stuff in Flash > papervision output/textures, or game stuff (like dessgeega’s REDDER where it starts to “glitch” as the game progresses). What clever hacking!
Actually, scratch that…. it’s a bit heavy for doing rapid stuff with… sorry!
Hey Nicholas.
Yes, encoding a JPEG every frame will be pretty slow. I’m using JPEGAsyncVectorEncoder in the demo instead of the corelib encoder, which makes it faster, but still not ideal for real time glitching.
When I used this in the project I mentioned, I simply set up the ASYNEncoder to encode as soon as the last encode was finished. Setting the encoder step size low means that few resources are devoted to encoding, but of course you only get a JPEG every few seconds. I found this to be fine though, if you overlay the JPEG and randomly set it to visible every now and then, glitching it at the same time. Even though the glitched image isn’t exactly of the current frame, it kind of adds to the effect as it jumps frames as it glitches. Might be worth trying :)
Finally found the time to play around with your Glitchmap Class. Check it out. Thanks again for sharing this great script!
I won’t be using this, but it’s pretty f-ing cool, man! Nice work … again.
I’m totally new to this, so once I’ve downloaded the Glitchmap generator, what are the next steps to running it on jpegs? I changed the ‘limit’ parameters in the demo.as to 3000 for doing large images, but I’m just not familiar enough with flash to know how to implement this AS code with the swf file. Please help if you get a chance, sorry for noobing.
Hi Jim. What IDE are you using to compile? Flash, Flash Builder / Flex Builder, FDT, Flashdevelop? Setting up projects to compile is a slightly different process for each of these editors, but essentially you want to set Demo.as as the document class and ensure that the src and src_lib folders are your main classpaths. Let me know your setup and I can describe how to get it working for you.
Thanks for the help, I wish I was better with flash, but I use Dreamweaver a bit, so I’m not totally stupid with web design. I will be using Flash CS3. My goal is set this up on my end so that I can use your glitch generator to my jpegs to produce hi-res versions, just like the glitch generator you have online. Once I can get it set up, I can play around with the demo.as to try to get different results. Thanks.
After looking over all of this, is their any way you could send me the actual flash file? I want to work backwards from that to edit it myself. The download folder is just the actions scripts and a final .swf file, I just don’t know how code the scripts into flash yet. So, if you can send me that file, I can figure out how I need to edit the size restrictions. Thanks for the help, sorry for being a bother.
Hi, What if I need to use this code for a commercial product? I can’t find any terms of use here either in the code.
Hi there. You can use it in commercial projects. Its released under the MIT license if you want to read more.
This is actually a bit brilliant…cheers.