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.
Hello.
You have bug on Glitchmap class (uk.co.soulwire.display.Glitchmap).
On line 117-118 you add to two events listeners:
addEventListener(IOErrorEvent.IO_ERROR, onBytesLoadError);
addEventListener(Event.COMPLETE, onBytesLoaded);
But on line 144-145 you remove:
removeEventListener(IOErrorEvent.IO_ERROR, onBytesLoadError);
removeEventListener(IOErrorEvent.IO_ERROR, onBytesLoadError);
I think it should be:
removeEventListener(IOErrorEvent.IO_ERROR, onBytesLoadError);
removeEventListener(Event.COMPLETE, onBytesLoaded);
Ahh, yes you’re right – the dangers of FDT and duplicate line command! I’ll amend this before I push to GitHub. Cheers.
Hey,
I’ve been looking at your AS, namely the GlitchMap.as file, as I’m trying to replicate this using Javascript. I have had some alright results but they’re very variable, sometimes (most times) just being a mostly black screen with a few grey squares towards the ‘end’ of the image (or slight discolourations on the black). I was wondering if you had a similar problem, and what you did to fix it?
I tried to write the code as close to yours as possible, but my familiarity with AS is limited. I suppose my questions are as follows:
_bytesGlitch.writeBytes(_bytesSource, 0, _bytesSource.bytesAvailable);
var length : int = _bytesGlitch.length – _headerSize – 2;
These two lines, I interpreted from reading your blog post as well as the code that, the bytesGlitch is basically a dupe of the image data (as a byte array), and that the headerSize is where the SOS ends.
Also, I was unclear whether you are glitching from inside the encoder, or simply getting the image and corrupting it after (using the other encoder for speed only)
Awesome! i wish there was one for video!!!!
There is! http://aeplugins.com/data-glitch
Hi,
great Idea! Stumbled upon this on motionographer yesterday. I have to admit I just couldn’t resist rebuilding this with canvas and js as well. It is not as fancy and polished as yours, especially the animations are lacking.
http://mutaphysis.de/glitch.html
Code can be found here
https://github.com/mutaphysis/smackmyglitchupjs
That’s brilliant! Good work and I’m heading over to have a look at the code now :)
I work in motion graphics and I think this would be a brilliant After Effects plugin. I don’t know if anyone has approached you yet about it but this type of stuff is used in movie trailers all the time but it has to be faked. This seems like something people would pay a good amount for – a sweet glitch distortion plugin based on actual, unique JPG code, that could be animated and controlled!?
This is probably a lot of work but I had some ideas for extra features:
- if you could control the text that gets flashed around – maybe a text field that words could be pasted into? Size randomization?
- the ability to set arbitrary color ranges that get cycled through
- definitely need to be able to output different video frame sizes for high-def and standard-def broadcast – maybe print settings too.
- What about the ability to animate the amount of code glitching onto a chosen picture?
I would shell out at least $20 for this AE plugin. I’m thinking, depending on features, this could go between $20 and $30 per user.
Hope this helps. I really want this plugin and I think a lot of other motionographers would too.
The After Effects plugin for this effect already exists! It is called Data Glitch and it is available on Aeplugins: http://aeplugins.com/data-glitch
Hello, is anyone out there good at converting AS3 to an After Effects expression or possibly a PixelBlender plugin? The languages are very similar from what I understand, but I don’t have the proficiency to make it happen. @Soulwire, I saw you posted the video that had it used in the background, and I see how you could just generate a single frame, but it would excellent to have control from within After Effects as well as the ability to animate.
Please see the comment above. The AE plugin of this effect already exists.
Hey After Effects users! Would have loved to try porting this to AE, but there’s already a solution out there: http://aescripts.com/data-glitch/
@Aescripts+Aeplugins, Data Glitch is out there, but it’s also $50 (single user) or $250 (site license), which is kind of steep for a one-trick-pony. What I think is beautiful about what @Soulwire did is he took a very simple script, with a very simple interface and released it open source. I don’t know about everyone else, but I wouldn’t use Data Glitch enough to make that kind of investment into it. But I would use it enough to pay something like $15-$20 for it, like @Rick said.
Thanks, appreciate the quick feedback!
Hey, I recently made a short video using this generator. Check it out here: http://vimeo.com/21762809.
Enjoy,
Chris Koelsch
http://tandtfy.blogspot.com/
http://vimeo.com/thisnthat
That’s brilliant! Very atmospheric. Who’s Naissance though?
Sorry, I got mixed up with the credits. It was passed along to Motionographer by someone from the company Naissance. I will fix this.
Cheers Chris. And now I’ve checked out Naissance I realise I know their work – they’re awesome! :)
Is it possible to save the glitched picture with the same size than the original file? that would really make my day.
Thanks