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

1 2 3 4

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. 7 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. 6 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. Og2t 7 years ago

    That’s great Justin! Have you experienced any Flash Player crashes when it was unable to decode a corrupted JPG data?

    Reply to this comment

    1. Soulwire 7 years ago

      Hey Tomek :) How’s it going? In answer to your question, no crashes yet, it should be absolutely stable – the worse that can happen is that the JPEG data gets too corrupted and becomes an unrecognised format (if the headers are unreadable for instance). This will cause a runtime error (which I am catching in the Glitchmap class). Other than this, I think it’s perfectly safe :) I am having trouble with FileReference save() in the demo when in the browser though – I think its because the save happens after image processing (async) so not technically on user input – I’ll fix this today!

    2. Soulwire 7 years ago

      Fixed the save issues – you should now be able to download the glitched image ok :)

  2. Sam Arnold 7 years ago

    That’s flipping awesome – love it! It’s almost like a digital lomographic effect on photos. Does it work with high-res images, glitching them up and then saving them for print?

    Reply to this comment

    1. Soulwire 7 years ago

      Hey Sam. It does work the same on high res images, although it will be slower to process and slower still to encode back to a JPG for saving. You can just save the corrupt bytes without re-encoding them, but for some reason the result is different to that which is displayed in the Flash player (!?) This is why I’m running it back through the JPEGEncoder. If you download the code and change the ‘_limit’ rectangle in the demo, you can then work with any size images. I wanted to keep things running fast for the demo, but there’s no reason why larger images can’t be used :)

  3. Voltxion 7 years ago

    http://www.onflex.org/ted/2008/01/loaderload-vs-loaderloadbytes.php

    I really like the the concept, I been doing similar things using displacement maps instead of affecting the image data itself.

    Reply to this comment

  4. miles 7 years ago

    cool! i try to made the same but stoped! anyway great work!

    Reply to this comment

  5. Lawrie 7 years ago

    Wow. This could be my favourite experiment of yours yet. Really really nice work.

    Reply to this comment

  6. zenbullets 7 years ago
  7. Dear Computer, 7 years ago

    Amazing. This is something I could only dream of and now its here. Can’t wait to start playing with it. This beats databending in notepad anytime ;-). I recently did some .avi bending (tribute to outpt) the same way. Manually that is. Looking forward to see where you take this using Air.

    Keep up the great work. And I love your new design!

    Reply to this comment

  8. Gordon 7 years ago

    Very cool. I immediately think of using it in a faulty tv transmission in a survival horror game or similar ;)

    Reply to this comment

  9. Mike 7 years ago

    Nice work!

    I’ve been experimenting with JPEG glitching recently too. I made a JPEGData class to give you access to the different headers individually – so you can just modify the SOS block if desired :)

    Check out my glitch experiments and get the source here,
    http://blog.madebypi.co.uk/2009/11/19/jpeglitch/
    http://blog.madebypi.co.uk/2010/01/13/jpeglitch-update/

    Reply to this comment

    1. Soulwire 7 years ago

      Wiked! Thanks for sharing Mike, those are some beautiful glitches. Interesting to see a very different approach – I was considering doing this inside the encoder too – it’s slower but you have more control over the glitch pattern. Glad I found your blog now, you’ve been bookmarked :)

  10. amul 7 years ago

    badass… I hear lots of microdelays, and repeating micro byte sounds..

    very http://illformed.org/plugins/glitch/

    – keep up the OPEN source.. Its so valuable!

    Reply to this comment

  11. Fin 7 years ago

    This is completely awesome. Played with it too much already.

    Reply to this comment

  12. Matt 7 years ago

    Need a Fullscreen version, would love to load this up on a few people who wonder off from their machines!

    Reply to this comment

1 2 3