Part I

The 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 actually reading the blog post, I just said sure, no problem. Well, after actually reading the article, it turned out to be a little more problematic than I realized. If you read the Soulwire post, you’ll see that the effect is achieved by loading an image file in binary format, jacking up the byte array with a bunch of garbage, then loading that damaged byte array back into a Loader instance with the loadBytes method then finally displaying the result. In order to do the same thing in real time, it would be necessary to capture each frame of video as an image file such as .jpg and go from there.

Well, as most of you know, that is exactly what the JPGEncoder included in the Adobe as3corelib package does, so that is the first thing I tried using. Unfortunately, the results were just shameful. I wound up getting maybe .5 frames per second or so. Disgusting. I then tried Thibault Imbert’s optimized JPEGEncoder. The results were noticeably better, but still not worth sharing. I was about to give up and chalk it up to a failed experiment when a bit of googling led me to this alchemy implementation of a jpg encoder, and suddenly everything fell into place.

If you have a webcam, you can see the results in the example below. Rather than using a timer or enter frame listener, this thing essentially drives itself. Which is to say, it takes an image of the webcam picture, encodes it as a jpg bytearray using the alchemy encoder, messes with that byte array in a way slightly modified from the technique posted on the Soulwire blog, loads that scrambled byte array into a Loader instance, displays it, and only then, starts all over again. The images are small, only 320×240, but still, the performance of that alchemy encoder is just this side of miraculous. While it runs fairly well, it can still be pretty CPU intensive, so I included a stop button to stop running the effect. Of course it isn’t necessary to just use a webcam, this technique could also use  a streaming/progressively downloading video as well.

[kml_flashembed publishmethod=”static” fversion=”10.0.0″ movie=”http://blog.onebyonedesign.com/wp-content/uploads/2010/10/webcamglitch.swf” width=”320″ height=”320″ targetclass=”flashmovie”]

[/kml_flashembed]

And that got me thinking…

Part II

The 10.1 Flash Player introduced a new method to the NetStream API – appendBytes(). In essence, this is similar to the Loader.loadBytes(). So I thought, instead of running the above effect in real time on a streaming video, why not load the bytes and mess with them prior to playing the video. Which is exactly what happens below. First of all, I apologize for the size, but the entire video is embedded as a ByteArray within the swf making it approximately 6 megs in size. If you’re interested in seeing it, but don’t see anything yet, just give it a minute. I didn’t bother with a preloader.

In any case, this is the great Fulci House by the Cemetary movie trailer embedded in binary format, glitched up again in a similar manner as described over at Soulwire then played through a netstream using appendBytes(). No glitch controls on this one as it’s not really real time, but still an interesting effect.

And thank you to Justin Windle (aka Soulwire) for the original idea and to Mateusz Małczak for the alchemy jpg encoder.

[kml_flashembed publishmethod=”static” fversion=”10.1.0″ movie=”http://blog.onebyonedesign.com/wp-content/uploads/2010/10/videoglitch.swf” width=”320″ height=”270″ targetclass=”flashmovie”]

[/kml_flashembed]