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
98 Comments
22 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 410 Gone 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. 7 years ago AS3 Glitch Generator by the impressive Justin Windle. — Some Random Dude

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

  2. 6 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. 6 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. 6 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. 6 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. 5 years ago Smack My Glitch Up – Justin Windle « Bite This

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

  7. 5 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. Nicholas Bieber 6 years ago

    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!

    Reply to this comment

  2. Nicholas Bieber 6 years ago

    Actually, scratch that…. it’s a bit heavy for doing rapid stuff with… sorry!

    Reply to this comment

    1. Soulwire 6 years ago

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

  3. Dear Computer, 6 years ago

    Finally found the time to play around with your Glitchmap Class. Check it out. Thanks again for sharing this great script!

    Reply to this comment

  4. hyponiq 6 years ago

    I won’t be using this, but it’s pretty f-ing cool, man! Nice work … again.

    Reply to this comment

  5. Jim 6 years ago

    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.

    Reply to this comment

    1. Soulwire 6 years ago

      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.

    2. Jim 6 years ago

      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.

    3. Jim 6 years ago

      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.

  6. Clouds 6 years ago

    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.

    Reply to this comment

    1. Soulwire 6 years ago

      Hi there. You can use it in commercial projects. Its released under the MIT license if you want to read more.

  7. Andy 6 years ago

    This is actually a bit brilliant…cheers.

    Reply to this comment

  8. Jorge 6 years ago

    I’d love to do some high res images….Is there a step by step process on how to change the parameters to allow high res images to be processed

    Reply to this comment

  9. Sebastian Soriat 6 years ago

    Hi there, i love your work !
    And would enjoy playing with it but i have a issue i can t seem to handle, it is about the JPEGAsyncVectorEncoder i get 45 error messages from it !!
    I just implemented the class as it is setting on an empty stage de demo as main class and adding src and src_lib as class paths.
    I m on flash cs3 and it is really just the JPEGAsyncVectorEncoder that throws errors and most are related to vectors.
    Any idea about what could go wrong ?
    Thancks anyway.

    Reply to this comment

    1. Soulwire 6 years ago

      It may be because you don’t have the Vector class. This was provided in an update to the Flash Player in version 10, you’ll need to update CS3. This might help: http://www.youtube.com/watch?v=bgTAaqDS6vQ

    2. Sebastian Soriat 6 years ago

      Okay, that s it, great, i m having fun with it rigth now !
      Waou that s a nice work around for cs3, you posted.. .
      And what a nice piece of code to play with !!
      Thancks a lot for sharing and helping out, keep up the good work.

  10. Gerard Garcia 6 years ago

    Don’t laugh. I need help me get glitchmap setup.

    I downloaded the Glitchmap.zip file and extracted the files. The extracted files include the following four file folders: (1) .settings, (2) bin, (3) src, and (4) src_lib.

    I opened a new Flash FLA file using Flash CS5 and AS3 and saved it in the src file folder. The src file folder contains the “GlitchmapDemo.as” file.

    In my Flash FLA file I made “GlitchmapDemo” the document class. I attempted to publish my Flash FLA file I got the following two compiler errors:

    Error Number 1

    LOCATION: ..\Glitchmap\src\GlitchmapDemo.as, Line 408
    DESCRIPTION: 1046: Type was not found or was not a compile-time constant: JPEGAsyncCompleteEvent.

    Error Number 2

    LOCATION: ..\Glitchmap\src\GlitchmapDemo.as, Line 432
    DESCRIPTION: 1046: Type was not found or was not a compile-time constant: JPEGAsyncCompleteEvent.

    Okay, I realize that you may be cracking up at my inability to make glitchmap go, but I’m stuck. Please let me know what to try next. Thank you.

    Gerard Garcia

    Reply to this comment

  11. Gerard Garcia 6 years ago

    Soulwire:

    I have downloaded and unziped the glitch file and subdirectories. I have saved a new Flash CS5/AS3 FLA file in the “src” subdirectory and I made GlitchmapDemo the document class in the FLA file. I published the FLA file and I get the following two errors:

    Error 1

    ..\Glitchmap\src\GlitchmapDemo.as, Line 408 — 1046: Type was not found or was not a compile-time constant: JPEGAsyncCompleteEvent.

    Error 2

    ..\Glitchmap\src\GlitchmapDemo.as, Line 432 — 1046: Type was not found or was not a compile-time constant: JPEGAsyncCompleteEvent.

    Glitchmap is entirely too cool. Please help me get it going. I’m using CS5 and AS3. Thank you.

    Gerard

    Gerard

    Reply to this comment

    1. Soulwire 6 years ago

      You need to put the .fla in the root directory (above src). Then set both src and src_lib as classpaths in the document settings and GlitchmapDemo as the document class. Set the publish settings to publish to the bin directory and it should all work fine. You’re getting that error because there are code dependancies in the src_lib folder – I separate third party code from my own by using that directory structure. Hope that helps.

    2. Gerard Garcia 6 years ago

      Here is where I saved my FLA file: http://webpages.charter.net/joeking/one.swf
      Here is how I set both src and src_lib as classpaths: http://webpages.charter.net/joeking/two.swf
      Here is how I set GlitchmapDemo in my FLA file: http://webpages.charter.net/joeking/three.swf

      When I publish I don’t get anymore errors, but my published SWF file is blank.
      I think I’m close. What am I doing wrong? Please let me know. Thank you.

      Gerard

  12. KP 6 years ago

    Hey Soulwire,

    I don’t know anything about flash and I don’t get how to set up anything when I try downloading the zip file. Can you upload a .FLA file? I really want to use this but I don’t know how to get started. I think having a .FLA will help me alot. I would really appreciate it if you uploaded a .FLA for this. I want to test this out. BTW you have amazing work.

    Random questions
    how do we contact you by email?
    how long have you been using flash?

    Sorry if these questions are so random and weird or strange… I’m just really curious haha.

    Thanks,
    KP

    Reply to this comment

    1. Soulwire 6 years ago

      I’ll turn into an AIR app for you to download and play with. Keep an eye out…