LogoLogo
  • Home
  • Projects
  • About
  • Contact

Glitchy Video

Devon O. · October 17, 2010 · Flash, Life · 6 comments
8

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.

Get Adobe Flash player

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.

Get Adobe Flash player

  Facebook   Pinterest   Twitter   Google+
glitchvideo
  • Spritesheet Scene Transitions in Unity3D
    September 16, 2017 · 0 comments
    Over the past couple weeks I've been working on  a number of transition effects
    4004
    38
    Read more
  • Alpha in Starling Filters and Basic Branching in AGAL
    December 09, 2012 · 3 comments
    5120
    16
    Read more
  • AS3 Gallery Component
    December 28, 2007 · 1 comments
    1949
    2
    Read more
6 Comments:
  1. Pretty cool effect, but I don’t see how this can be useful.
    Still, not everything has to be useful, right? :)

    Keep up the good work!

    vamapaull · October 17, 2010
  2. Very clever! Looks great Devon, cheers for letting my know about this experiment – the appendBytes method is very exciting!

    Justin · October 17, 2010
  3. Hey, thank you for the comments, Justin, much appreciated. And the appendBytes() method is pretty cool. It will only allow you to use flv formatted files/bytearrays at the moment, but it should be easy enough to fake a .flv header and append any old byte array. It’s on my todo list anyway.

    And I’m not sure if there’s any commercial use, vamapaull, but I know I’ve seen sites that show messed up video that’s obviously been given the works in After Effects or whatever, so why not do that in real time? In any case, it’s just fun and looks nice…

    Devon O. · October 21, 2010
  4. great, care to share the source ‘part one’ sample ? thanks

    Mel · December 08, 2010

Leave a Comment! Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Devon O. Wolfgang

AIR | Unity3D | AR/VR

Unity Certified Developer

Technical Reviewer of “The Essential Guide to Flash CS4 AIR Development” and “Starling Game Development Essentials”

Reviewer of “The Starling Handbook”

Unity Engineer at Touch Press.

Categories
  • Actionscript (95)
  • AIR (16)
  • Flash (99)
  • Games (7)
  • Liberty (13)
  • Life (53)
  • Shaders (20)
  • Unity3D (21)
Recent Comments
  • MainDepth on Unity Ripple or Shock Wave Effect
  • Devon O. on Unity Ripple or Shock Wave Effect
  • Feral_Pug on Unity Ripple or Shock Wave Effect
  • bavvireal on Unity3D Endless Runner Part I – Curved Worlds
  • Danielius Vargonas on Custom Post Processing with the LWRP
Archives
  • December 2020 (1)
  • December 2019 (1)
  • September 2019 (1)
  • February 2019 (2)
  • December 2018 (1)
  • July 2018 (1)
  • June 2018 (1)
  • May 2018 (2)
  • January 2018 (1)
  • December 2017 (2)
  • October 2017 (1)
  • September 2017 (2)
  • January 2017 (1)
  • July 2016 (1)
  • December 2015 (2)
  • March 2015 (1)
  • September 2014 (1)
  • January 2014 (1)
  • August 2013 (1)
  • July 2013 (1)
  • May 2013 (1)
  • March 2013 (2)
  • December 2012 (1)
  • November 2012 (1)
  • September 2012 (3)
  • June 2012 (2)
  • May 2012 (1)
  • April 2012 (1)
  • December 2011 (2)
  • October 2011 (3)
  • September 2011 (1)
  • August 2011 (1)
  • July 2011 (1)
  • May 2011 (2)
  • April 2011 (2)
  • March 2011 (1)
  • February 2011 (1)
  • January 2011 (2)
  • December 2010 (3)
  • October 2010 (5)
  • September 2010 (1)
  • July 2010 (2)
  • May 2010 (5)
  • April 2010 (2)
  • March 2010 (7)
  • February 2010 (5)
  • January 2010 (5)
  • December 2009 (3)
  • November 2009 (1)
  • October 2009 (5)
  • September 2009 (5)
  • August 2009 (1)
  • July 2009 (1)
  • June 2009 (2)
  • May 2009 (6)
  • April 2009 (4)
  • March 2009 (2)
  • February 2009 (4)
  • January 2009 (1)
  • December 2008 (5)
  • November 2008 (2)
  • September 2008 (1)
  • August 2008 (6)
  • July 2008 (6)
  • June 2008 (9)
  • May 2008 (4)
  • April 2008 (3)
  • March 2008 (4)
  • February 2008 (9)
  • January 2008 (7)
  • December 2007 (6)
Copyright © 2021 Devon O. Wolfgang