Glitchmap - AS3 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. 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.

Posted on 03 Feb 2010
78 Comments
19 Trackbacks

Meta

Smack My Glitch Up was posted on February 3rd 2010 in the category Lab / Actionscript 3.0, Design, Flash, Generative, Open Source, Transmissions and tagged; , , , , , , .

You can Leave a comment.


Warning: file_get_contents(http://search.twitter.com/search.atom?q=from:soulwire&rpp=1) [function.file-get-contents]: failed to open stream: HTTP request failed! HTTP/1.0 401 Authorization Required in /home/soulwire/webapps/soulwire_blog/wp-content/themes/soulwire/functions.php on line 203

Discussion

65 Responses to Smack My Glitch Up

Leave a Reply

Pingbacks / Trackbacks

  1. 4 years ago AS3 Glitch Generator by the impressive Justin Windle. — Some Random Dude

    [...] AS3 Glitch Generator by the impressive Justin Windle. [...]

  2. 4 years ago Assemblism » Archive » Glitchity Glitch: AS3 JPEG distortion

    [...] through flash programming!  I was mucking around with just the random squares, and happened upon Soulwire’s GlitchMap class, which takes JPEG images and then mucks around with the data (it appears you too could do [...]

  3. 3 years ago onebyoneblog » Glitchy Video

    [...] other day my wife stumbled across this excellent Soulwire post on making glitches in image files and asked if I could do the same thing with video. Without [...]

  4. 3 years ago The Influence of Memory: Feign | Uncommon Assembly

    [...] The texture over the game itself is a result of running a single image through a glitch generator (AS3 BitmapData) several times and then collaging the resultant images into a one [...]

  5. 3 years ago My GPCv4 game: Wot I Think | HelixFox | Games by Kyle Rodgers

    [...] effect I added into the game was to use this glitching effect from Soulwire. When you die, the game renders the current screen to JPEG data then runs it through the glitching [...]

  6. 3 years ago Smack My Glitch Up – Justin Windle « Bite This

    [...] Smack My Glitch Up Justin Windle [...]

  7. 3 years ago Soulwire Glitch Generator | Halo Gravity

    [...] http://blog.soulwire.co.uk/laboratory/flash/as3-bitmapdata-glitch-generator Categories: ActionScript, Generative Art – Tags: AS3, Codeart, Generative Art, Glitch, Soulwire [...]

  1. NoNaMe 3 years ago

    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);

    Reply to this comment

    1. Soulwire 3 years ago

      Ahh, yes you’re right – the dangers of FDT and duplicate line command! I’ll amend this before I push to GitHub. Cheers.

  2. Hugo 3 years ago

    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)

    Reply to this comment

  3. Atanas Djibirov 3 years ago

    Awesome! i wish there was one for video!!!!

    Reply to this comment

  4. Henrik 3 years ago

    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

    Reply to this comment

    1. Soulwire 3 years ago

      That’s brilliant! Good work and I’m heading over to have a look at the code now :)

  5. Rick 3 years ago

    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.

    Reply to this comment

    1. Aescripts+Aeplugins 3 years ago

      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

  6. Adam 3 years ago

    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.

    Reply to this comment

    1. Aescripts+Aeplugins 3 years ago

      Please see the comment above. The AE plugin of this effect already exists.

  7. Soulwire 3 years ago

    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/

    Reply to this comment

    1. Adam 3 years ago

      @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!

  8. Chris Koelsch 3 years ago

    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

    Reply to this comment

    1. Soulwire 3 years ago

      That’s brilliant! Very atmospheric. Who’s Naissance though?

    2. Chris Koelsch 3 years ago

      Sorry, I got mixed up with the credits. It was passed along to Motionographer by someone from the company Naissance. I will fix this.

    3. Soulwire 3 years ago

      Cheers Chris. And now I’ve checked out Naissance I realise I know their work – they’re awesome! :)

  9. Sk 3 years ago

    Is it possible to save the glitched picture with the same size than the original file? that would really make my day.
    Thanks

    Reply to this comment