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?).

You can also download the Glitchmap Class and the Glitch Generator source code from the soulwire code repository.

Related posts:

1. Webcam Glitch Art
2. ASE (Adobe Swatch Exchange) Encoder
3. Recursive Polygon Subdivision

I’ve been off the web radar for several months. The later part of 2009 saw many changes and, despite being extremely busy with several interesting projects and personal studies, I have somewhat neglected this blog.

Without wishing to bore anyone with the details, I may still post a summary of what I am / have been working on recently – at some point – though for now it will suffice to say that I’m broadening my horizons – getting deeper into Processing and OpenGl and learning C++ with OF, as well as Objective C and the Cocoa Touch framework. As more projects using these technologies arise I hope to share this learning experience with you.

Design

With regards to the re-design; this is by no means the finished article, however I felt it best to push the current theme live so that I can start posting again. I hope that you find it more user friendly than the last edition, and please do leave any suggestions for improvement – it is like most things simply a work in progress.

Objectives

My aim is to continue posting content on a much more frequent basis, though with the philosophy that quality precedes quantity. That said, I will be adding tools to help aggregate my more continuous online activity in an attempt to share more of the work and ideas of others who inspire me, with you.

Now that the site is live, I will post a few catch-up entries over the coming weeks and from there hopefully find a more natural rhythm.

So, for those of you kind enough to listen, that is the egocentric chatter over! I look forward to resuming the dialogue with you – see you around.

No related posts.

Just a quick (and slightly belated) announcement.

The distinguished Bandcamp has recently been regaled with another round of audio-visual snacks. I’ve had a lot of fun working on them, and there will be even more in the not too distant future.

The whole Bandcamp site in fact is bursting with more and more tasty new features which you should check out. In terms of my little contribution on the music visualistions front, there are currently four new full fat flavors to feast on…

Ribbons » which uses my Papervision3D Ribbons Class and is designed for crunching riffs and hard beats.

Strata » which was inspired by stream-graphs and rock formations, and flows like a charred pizza in a log-flume along an imaginary Teflon oven dish.

Plughole » which comprises of disembodied appendages and iconography encapsulating the zeitgeist of generation stupid – mashes the aforementioned archetypes up into crumbs before offering them to the esophagus of oblivion.

Hypno » which was designed to bring about universal harmony and spiritual equilibrium but accidentally caused the credit crunch.

You can see them in action by visiting an artist’s page (such as Hot Bitch Arsenal or Pattern), hitting play and selecting a visualisation from the pop-out menu underneath the cover art.

Related posts:

1. Bandcamp Music Visualisations
2. AS3 Music Visualisation
3. Disabed Algebra

The other clinching factor was it’s plugins, notably Subversive for SVN browsing and team collaboration goodness.

This evening though, I tried checking out a Google code project and got the following error:

SVN: ‘0×00400006: Validate Repository Location’ operation finished with error: Selected SVN connector library is not available or cannot be loaded.
If you selected native JavaHL connector, please check if binaries are available or install and select pure Java Subversion connector from the plug-in connectors update site.

If connectors already installed then you can change the selected one at: Window->Preferences->Team->SVN->SVN Client.

Selected SVN connector library is not available or cannot be loaded.

If you selected native JavaHL connector, please check if binaries are available or install and select pure Java Subversion connector from the plug-in connectors update site.

If connectors already installed then you can change the selected one at: Window->Preferences->Team->SVN->SVN Client.

Basically, it was banging on about connectors, so…

In case anyone is experiencing the same thing, here’s what I did to solve it:

1. Open up the Software Updates and Add-ons dialogue (Help > Software Updates)
2. Click Add Site and enter the Polaron SVN Connectors update site URL:
   http://www.polarion.org/projects/subversive/download/eclipse/2.0/update-site/
   (I found this on the Polaron download page)
3. Open up the Subversive Connectors Site node, then Subversive SVN Connectors
4. Download the following plugins:
   • Subversive SVN Connectors
   • SVNKit 1.1.7 Implementation

Restart Eclipse (or FDT standalone) when prompted and that seemed to do the trick.

I’m new to FDT and Eclipse, so let me know I was missing something.

No related posts.

Original image by Edwin Tofslie

I was having a few gradient alpha mask disabilities today and thought I should share my misery and consequential solution with anyone who might run into the same problems!

Update: TF pointed out a very simple solution – cacheAsBitmap WILL work, providing you cache the Bitmap as a Bitmap, as you would if you were working with two vector drawings. Why a Bitmap wouldn’t be cached as a Bitmap I don’t fully understand.
Still use the copyPixels method if you want to create a single object and discard the mask, but otherwise don’t listen to me overcomplicating things and do it old school!

As you know, since Flash Player 8 we’ve been able to use an alpha channel when masking display objects. A common implementation is to first draw a gradient that fades from white with opacity 1 to white with opacity 0 and then tell a display object to use this as its mask.

Apparently, however – it’s not always that simple…

In this instance, I was using an embedded image (though the same would be true for a loaded one) which was in PNG format and contained an alpha channel. The alpha channel was crucial as the image was an icon with a transparent background and faded edges. I needed to dynamically mask and fade out this image to create a reflection via code, rather than doing this all in Photoshop. The resulting Bitmap would be sitting on top of a colour changing background, and so transparency was needed on both the original icon shape and the fading reflection – a common enough requirement.

The “cacheAsBitmap” Approach

The simplest way to do this and the technique that I immediately reached for, is to create the mask – being a Shape object with a gradient drawn using its instance of the Graphic class – set it’s cacheAsBitmap property to true and then set the embedded Bitmap’s mask property to use this gradient.

The result:

The code:

[Embed(source = '../lib/image.png')]
private var image:Class;

var myImage:Bitmap = new image as Bitmap;
addChild( myImage );

var matrix:Matrix = new Matrix();
matrix.createGradientBox( myImage.width, myImage.height, Math.PI / 2 );

var gradient:Shape = new Shape();
gradient.graphics.beginGradientFill( 'linear', [0xFFFFFF, 0xFFFFFF], [1, 0], [0, 255], matrix );
gradient.graphics.drawRect(0, 0, myImage.width, myImage.height);
gradient.graphics.endFill();
gradient.cacheAsBitmap = true;

myImage.mask = gradient;

However, presumably due to the fact that the bitmap already contained an alpha channel, the alpha channel of the bitmap-cached gradient shape was ignored, and the result is a mask which is simply the entire area of the gradient box, much like the pre Flash Player 8 mask behaviour of being either on or off and nothing in between. (

The “CopyChannel” Approach

The next approach I tried was to draw the gradient to a new transparent bitmapdata and then use the copyChannel method to copy the alpha channel of the gradient bitmapdata to the bitmapdata of my image.

The result:

The code:

var gradientBitmap:BitmapData = new BitmapData( gradient.width, gradient.height, true, 0 );
gradientBitmap.draw( gradient );

var channel:uint = BitmapDataChannel.ALPHA;

myImage.bitmapData.copyChannel(gradientBitmap, gradientBitmap.rect, new Point(), channel, channel);

Again, an undesirable result – I was left with some kind of graphic monstrosity that was a Frankenstein combination of my wonderfully smooth faded source image and a gradient showing through wherever transparency should have been in the original.

The solution (CopyPixels)

The approach I used in the end was to create a new transparent bitmapdata with the same dimensions of my image, then to use the copyPixels method to copy over the pixels from my source image to the new bitmapdata. The copyPixels method also accepts a parameter for alphaBitmapData, so I passed my gradient bitmapdata to this. Finally, copyPixels also takes a Boolean value for mergeAlpha, so set this to true and the result is a brand new image with the RGB pixel data of the source image and an alpha channel which is a combination of the alpha channels from both the source and the gradient bitmap.

The result:

The code:

var gradientBitmap:BitmapData = new BitmapData( gradient.width, gradient.height, true, 0 );
gradientBitmap.draw( gradient );

var result:BitmapData = new BitmapData( myImage.width, myImage.height, true, 0 );
result.copyPixels(myImage.bitmapData, result.rect, new Point(), gradientBitmap, new Point(), true);

addChild( new Bitmap( result ) );

I’m sure I’ll be mocked by my fellow developers for having been kneecapped by this quite basic problem, but having glanced at a few forum posts it seems common enough. Therefore I felt sharing the solution might be of some benefit.

Full source code:

[Embed(source = '../lib/image.png')]
private var image:Class;

public function Main():void
{
	drawCheckerboardPattern();

	var myImage:Bitmap = new image as Bitmap;

	var matrix:Matrix = new Matrix();
	matrix.createGradientBox( myImage.width, myImage.height, Math.PI / 2 );

	var linear:String = GradientType.LINEAR;
	var colors:Array = [0xFFFFFF, 0xFFFFFF];
	var alphas:Array = [1.0, 0.0];
	var ratios:Array = [0.0, 255];
	var spread:String = SpreadMethod.PAD;

	var gradient:Shape = new Shape();
	gradient.graphics.beginGradientFill( linear, colors, alphas, ratios, matrix, spread );
	gradient.graphics.drawRect(0, 0, myImage.width, myImage.height);
	gradient.graphics.endFill();

	var gradientBitmap:BitmapData = new BitmapData( gradient.width, gradient.height, true, 0 );
	gradientBitmap.draw( gradient );

	var result:BitmapData = new BitmapData( myImage.width, myImage.height, true, 0 );
	result.copyPixels( myImage.bitmapData, result.rect, new Point(), gradientBitmap, new Point(), true );

	addChild( new Bitmap( result ) );
}

private function drawCheckerboardPattern():void
{
	var boxSize:int = 8;

	var pattern:BitmapData = new BitmapData( boxSize * 2, boxSize * 2, false );
	pattern.fillRect( new Rectangle( 0, 0, boxSize, boxSize ), 0xCCCCCC );
	pattern.fillRect( new Rectangle( boxSize, boxSize, boxSize, boxSize ), 0xCCCCCC );

	graphics.beginBitmapFill( pattern );
	graphics.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
	graphics.endFill();
}

Related posts:

1. Fit DisplayObject into Rectangle
2. BitmapData Average Colours
3. BitmapData Colour Palette

One of the most interesting projects I have worked on recently has just been launched!

It’s called Bandcamp, and is the brain child of Ethan Diamond and Shawn Grunberger, both from Oddpost (which you’ll know these days as Yahoo! Mail).

In short, Bandcamp is a “free hosted publishing platform for musicians”, although there is much more to it than that, including…

• Design customisations and clean, SEO and user friendly URLs for every band
• Automatic transcoding of uploaded tracks to a variety of formats (including lossless)
• The option to give away tracks for free, or to sell them (at either a fixed price or one nominated by the fan who’s buying it, they call it “Name your price”)
• A stats page in the band’s CMS, which shows all complete and partial track listens, incoming links and the general state of the band’s internet rep’, whether it be blog mentions, reviews or who’s embedding their Bandcamp player and where.
• Cool music visualisations as part of their player (more on that in a moment)

…And it’s FREE!

My job was to help make the site even more unique (and sexy!) by creating a library of music visualisations – these provide some eye candy whilst you listen to tracks on a band’s page (or in their embedded player). We strived to avoid the clichéd, generic approach to visualisations (you know what I’m talking about) by giving the user something a wee bit special to gawk at. It wouldn’t be fair if ears got all the love!

Here’s a few quick screengrabs of the first 5 visualisations (more visualisations are on their way soon)…

The power behind the visuals is a customised version of the AS3 music visualisation engine I’ve been working on for some time now, which includes beat detection and a whole host of other methods for interpreting a stream, ready for visualising.

The guys at Bandcamp have been really supportive in allowing me to develop this library with a view to releasing the API in order for Flash developers to build and upload their own visualisations for use within the Bandcamp player.

Furthermore, because the visualiser has been a pet project of mine since the release of AS3, come December I’ll be open sourcing the engine so that anyone can build on it, or simply use it out of the box to produce some optical delights of their own.

Anyway, I’m really excited that Bandcamp has been unleashed on the public and I encourage you to check it out, especially if you’re a musician, or like music, or pretty visuals, or cool technologies, or great ideas, or websites…

Want to know more about Bandcamp?

Then watch the screencast (bellow) and chat about it on Vimeo, browse on over to bandcamp.mu, peruse the FAQs and see it in action!

Related posts:

1. More Music Visualisations
2. Disabed Algebra
3. AS3 Music Visualisation

I just got back from Flash on the Beach 07; A Flash conference in Brighton. It would be an impossible task so sum up what a fantastic 3 days it turned out to be, suffice to say the speaker line-up was near perfect, and I left feeling inspired to play more, create more and dig out some of those old ideas from the back of my hard drive and see where they take me.

Having never been before, I thought I was in for an educational but dry few days of indulgent nerdiness; however I was proved very wrong. FOTB had its fair share of inside tips from Adobe and technical tutorials, but also a lot of inspirational talks which encompassed Flash but that were really more generalised observations about creativity, industry, art and computer science.

For me, the highlights were definitely Jared Tarbell and Robert Hodgin, who are both masters of their crafts as well as thoroughly interesting and grounded people.

If you didn’t go, make sure you book a ticket next year and I’ll see you there.

www.flashonthebeach.com

No related posts.

If you haven’t come across it yet, SWF Address is a tool for deep linking in Flash. It is a JavaScript based code which will set hash (anchor) link path from your Flash content. Not only does this mean users can now use their back buttons, but it also means permalinks can be created to content deep inside the Flash movie. For example http://www.yoursite.com/#/projects/project-name/

I will be working on implementing it on Flash in the Pan website awards, as I have already used rewrite rules to fetch Flash content when the user arrives from a page specific link or search engine result, but SWF Address will add a much needed real-time feedback on the users’ position within the sites data.

You can download SWF Address here and will see an example implementation of SWF address on soulwire or one of my other sites very soon.

Finally, between SWF Address and SWF Object, flash is becoming more and more usable as a coherent and complete format for large and SEO friendly sites.

No related posts.

http://petitions.pm.gov.uk/Photography/

Oh Tony, Tony Blair, how wise and infinite in wisdom. We all know that everyone with a beard must be a terrorist (it seems a watertight argument), and now it is apparent that everyone with a camera is plotting some kind of attack on our civil liberties. Of course, having surveillance cameras all over the place is acceptable and right – the authorities need to see us buying carrots and walking the dog. However it appears that soon, if we wish to take a photograph of our beautiful planet or indeed anything that exists in a public space – we will be committing an offence.

Thankfully, you can do something to stop this. There isn’t yet a petition to make the government admit some responsibility for several hundred thousand dead Iraqi civilians, however there is one which may grant you use of a camera.

Here is a quote from the creator of the petition:

“There are a number of moves promoting the requirement of ‘ID’ cards to allow photographers to operate in a public place.

It is a fundamental right of a UK citizen to use a camera in a public place, indeed there is no right to privacy when in a public place.

These moves have developed from paranoia and only promote suspicion towards genuine people following their hobby or profession.”

So there you go! The link bellow will take you to the petition, get your name down!

Sign the petition to stop the ban of photography in public places

Update

Ok, so for those of you who didn’t sign the petition against banning photography in public places (and therefore wouldn’t have received this email) there is an update. Apparently, everything is better than we thought. The government, apparently, and at least not yet, WONT be banning photography or anything quite so ridiculous. There were motions to introduce ID cards, which is still an outrage, however this may simply be enforced around schools etc and only by local authorities, not government.

This is the response I received…

No related posts.

During my research for Experiments in the Revival of Organisms, my tutor Matt Johnson handed me a newspaper clipping which he had saved concerning an experiment conducted by Dr Beaurieux in 1905, in which he quite reliably proved that a severed head (That of convicted murderer Languille) remains conscious and alert for some time after being separated from the body.

What is reported stands to reason really, though I found it quite interesting to imagine what ‘the head’ (I should call it Languille really) would have been thinking. The reflex actions described by Dr Beaurieux are similar to those of the disembodied dog’s heads documented in the original film ‘Experiments in the Revival of Organisms’, but although it is easy to explain them as nothing more than reflexes, it is equally engaging to assume that a level of conscious thought would have existed, though of course gone without vocalisation due to a lack of attached lungs or voice box. We say that the eyes are the window to the soul, and here Dr Beaurieux describes quite clearly the striking looks he observed in Languille’s eyes.

Here is the original Article:

From A History of the Guillotine by Alister Kershaw. His source is Archives d’Anthropologie Criminelle, 1905

I consider it essential for you to know that Languille displayed an extraordinary sang-froid and even courage from the moment when he was told, that his last hour had come, until the moment when he walked firmly to the scaffold. It may well be, in fact, that the conditions for observation, and consequently the phenomena, differ greatly according to whether the condemned persons retain all their sang-froid and are fully in control of themselves, or whether they are in such state of physical and mental prostration that they have to be carried to the place of execution, and are already half-dead, and as though paralysed by the appalling anguish of the fatal instant.

The head fell on the severed surface of the neck and I did not therefor have to take it up in my hands, as all the newspapers have vied with each other in repeating; I was not obliged even to touch it in order to set it upright. Chance served me well for the observation, which I wished to make.

Here, then, is what I was able to note immediately after the decapitation: the eyelids and lips of the guillotined man worked in irregularly rhythmic contractions for about five or six seconds. This phenomenon has been remarked by all those finding themselves in the same conditions as myself for observing what happens after the severing of the neck…

I waited for several seconds. The spasmodic movements ceased. The face relaxed, the lids half closed on the eyeballs, leaving only the white of the conjunctiva visible, exactly as in the dying whom we have occasion to see every day in the exercise of our profession, or as in those just dead. It was then that I called in a strong, sharp voice: “Languille!” I saw the eyelids slowly lift up, without any spasmodic contractions – I insist advisedly on this peculiarity – but with an even movement, quite distinct and normal, such as happens in everyday life, with people awakened or torn from their thoughts.

Next Languille’s eyes very definitely fixed themselves on mine and the pupils focused themselves. I was not, then, dealing with the sort of vague dull look without any expression, that can be observed any day in dying people to whom one speaks: I was dealing with undeniably living eyes which were looking at me. “After several seconds, the eyelids closed again, slowly and evenly, and the head took on the same appearance as it had had before I called out.

It was at that point that I called out again and, once more, without any spasm, slowly, the eyelids lifted and undeniably living eyes fixed themselves on mine with perhaps even more penetration than the first time. The there was a further closing of the eyelids, but now less complete. I attempted the effect of a third call; there was no further movement – and the eyes took on the glazed look which they have in the dead.

I have just recounted to you with rigorous exactness what I was able to observe. The whole thing had lasted twenty-five to thirty seconds.

No related posts.