This weekend took me to the BFI Southbank for the OneDotZero – Joys of Processing workshop with Karsten Schmidt of Toxiclibs / Postspectacular.

The workshop was basically an introduction to Processing as a creative tool and was part of the OneDotZero Adventures in Motion Festival 2011.

Workshop photo courtesy of OneDotZero & Martin Senyszak

Day One

We started with some of the usual ‘Hello World’ programming concepts & tasks: drawing to screen, variables, loops, arrays & functions etc. This was of course easy to follow, but did illustrate just how simple it is to get up & running with Processing.

Quickly though, Karsten took us into some more productive territory, by introducing us to Processing Libraries. These really are so useful, and a credit to the open source community that allow us to get projects up & running super quickly.

Of course, most of the workshop we used Karsten’s own Toxiclibs library, which gives you access to 3D, Geometry, Physics, Audio & Data tools with just a few lines of code.

By the end of the day, we’d covered the basics, got our development environment set up, and created a pretty good looking sound visualisation tool! Nice!

Processing Workshop - Simple Audio Visualisation

Day Two

We quickly got back up & running on day to by adding a microphone audio stream analysis to our application.

Then came 3D.. we turned out little 2.5D sound visualiser into a fully fledged 3D frequency landscape (stopping off on the way to import tonal information from images to use as Y values for our Vertices).

Processing Workshop - 3D Audio Visualisation

We also learned how to output our generated 3D landscape as a .OBJ format model for import into other software, like MeshLab and even to send to shapeways.com for 3D printing.

Processing Workshop - 3D with GUI Controls

Finally, in the last 30 mins of day 2, we added a bunch of GUI controls to our application to control the internal variables, like colour, 3D cell size and sensitivity. This was so easy to implement with another great library, ControlP5 by Andreas Schlegel.

Processing Workshop - 3D with GUI Controls

Thanks

Thanks to OneDotZero for organising such a great event & workshop and to Karsten Schmidt for his time, knowledge & patience.

Finally thanks to Processing.org for developing such a great piece of software and everyone in the open source community for contributing their libraries… inspiring!

A couple of weeks ago I attended my third, and it turns out, my final Flash On The Beach (FOTB) conference. Now I have come back to reality and caught up on the work I should have been doing, rather than eating Falafel in Brighton , it’s time to summarise my highlights.

Day One

Keynote

The usual corporate stuff from Adobe, but interesting points were

1. Lee Brimelow talking about the new (at the time un-named) Starling Framework. A simple framework for using the Stage3D (prev Molehill) to render 2D animation directly to the GPU. Ideal for game development and super fast graphics rendering. You’ll need the Flash Player 11 Beta to play with this from Adobe Labs.
2. Mark Anders demonstrating the Adobe Edge Preview 2, the new HTML5, timeline based, motion graphics designer.
   I know you are going to say that Edge sucks, and the code it creates is terrible.. that may still be the case (we’ll see), but it’s new timeline animation tools and functionality looked genuinely easy to use, and super productive. I just wish they put as much thought into the Flash Professional timeline tools… maybe something to look out for in Flash CS6??

Greg Rewis – From Zero to App in 60 Seconds

This was a pretty intreresting talk covering how you handle your HTML5/CSS3/JS web app development in Dreamweaver.. yes Dreamweaver (despite Greg’s objections .
This post over at Ubelly.com is pretty good summary: http://ubelly.com/2011/09/offline-web-apps-appcaching-and-html5/

Stray – Robotlegs 2 and your brain: a great toolchain

Well… unfortunately this was a talk that really should have been on the bigger stage, as it was over-subscribed (a common occurrence this year) and so I didn’t get to see it. However, Stray’s notes are here: http://www.xxcoder.net/my-fotb-presentation-on-robotlegs-2-and-your-brain

Eugene Zatepyakin – Natural Features tracking and image detection / recognition

Once agian another talk that I couldn’t get into as the Pavilion was packed out, however Eugene, does some great work, and you can find out more over here.

The silver lining here though, was that I did get to see Jessica Hische’s talk instead…

Jessica Hische – Lettering is not Fonts

If you have never seen Jessica’s graphic design & lettering / typography work you are in for a treat… beautiful, funny, and full of fresh ideas… much like her talk! Brilliant!

Day Two

Tomek Augustyn – Riding the HiSlope

I hadn’t heard of Tomek or his HiSlope framework before, but this for me was the surprise highlight of the conference. He was also nice enough to spend a bit of time after his talk to answer a few of my questions.

Tomek’s HiSlope framework is a great video processing framework, that makes it super easy & intuitive to add filters to video. You can import or create you own filters, tweak the parameters in edit mode, chain the filters together and the export the fx chain for use in live projects.

Once the fx chain is in your project you can also interrogate the variables from your outer project so can hook it into other functions.

One really interesting feature also talked about, was blob detection (getting the computer to recognise multiple independent shapes on screen). Tomek had used a brilliantly simple technique that I think was first developed my Mario Klingemann.
Here is Tomek’s post: http://play.blog2t.net/fast-blob-detection

Tomek’s more detailed post about his FOTB session and a good place to find out more about his HiSlope framework is here: http://play.blog2t.net/flash-on-the-beach-2011/

Joa Ebert - The Tale of a Travelling Salesman and his four Colours

This was a really nice presentation by Joa basically about Graph Theory, what it is, how it is used to solve mathematical problems and how he uses it in his own software, like http://www.audiotool.com/

Mike Chambers – Deconstructing theexpressiveweb.com

Mike Chambers’ talk was about how Adobe put together their ‘HTML5′ tech demo site theexpressiveweb.com, the problems / solutions they found and then Mike’s judgement about if CSS3 & HTML5 were really ready for production use.

The conclusion was basically, that despite the hype, HTML5 is not yet a production ready technology. The key reasons for this were:

1. HTML5 support across browsers currently sits between 5 & 60% for various features.
2. The amount of work involoved in ‘progressive enhancement’ increased build time, cost & testing.
3. Constant maintenance after site launch, due to changing implementations of standards by browsers.

However, while HTML5 may not be production ready for the average desktop browser, mobile browsers (IOS, Android, Blackberry) are actually a lot better equiped and so, HTML5 mobile web applications are certainly viable.

Theexpressiveweb.com, is a neat summary of HTML5 features and also has a great list of essential tools to help here: http://beta.theexpressiveweb.com/resources/

Cyriak Harris – Destroying my laptop with After Effects

You will know Cyriak’s animations from E4 and various music videos and virals.
Basically he is genius / nutter that clearly spends a little too much time in front of After Effects… imagine if Aphex Twin knew how to use After Effects.. that!

A funny talk that was sometimes genius & sometimes tedious, but really highlighted that with unlimited imagination you really can create something out of nothing.

See Cyriak’s work here: http://www.cyriak.co.uk/

Day Three

The Elevator Pitch

The elevator pitch is John Davey’s greatest invention, where 20 developers / creatives get 3 minutes each to show us their stuff. I took a lot of notes in this session about tech to investigate when I got home. Here’s a brief summary list:

• Phidgets - USB sensors & controllers for your interactive fun
• Grapefrukt – Tool for exporting animation spritesheets for other tech (CSS etc)
• Fungrid – A useful looking open source game engine (animation, controls, physics etc)
• Gestalt Principles in Design – Graham Odds slides on cleaner, better design
• Beyond Reality Face Tracking – Interesting but maybe over priced for commercial projects.
• Acapela Text to Speech – Voice as a service for your Flash app.

Keith Peters – Making Tools

A really nice presentation about making your own tools (developing your own applications) to help you get your job done quicker & better.

Tools of interest that Keith developed / mentioned:

• SWFSheet – Create spritesheets from SWF animations
• Embed It Bitch (Link to Air App) – Bitch who codes, helps you embed assets 
• ASExpander - A great  JSFL tool, to drop snippets into your code.
• Regexr – Grant Skinners tool to help write & test RegEx

Jeremy Thorpe – New York, New York

A great presentation from the always inspiring Jeremy Thorp, data artist for the New York Times.

Really interesting to see how art & science collide (usually in Processing) in Jer’s job to create both beautiful, clever & unique software solutions to design / data visualisation problems & challenges, like:

• 9/11 Memorial – Name Placement Algorithm
• OpenPaths – A project to take your GPS data and put it to good use
• Project Cascade – NY Times social conversation visualisation

Jer also mentioned a gave us a sneak peak of Processing 2.0, scheduled for release soon. This may well feature heavily in my toolbox for 2011 / 2012, now with it’s output to JS & mobile.

My Mission South Africa - Flash Application

We have just finished working on a great job with our new friends, digital agency Angel London, for South African Tourism.

We were commissioned by Angel to work with their back end developers to produce all the flash elements of South African Tourism’s ‘My Mission’ campaign.

Activity Selection

‘My Mission South Africa’ is a web based flash application which allows you to create your ideal South African holiday by selecting from different activity types that interest you, like: Adventure & Sport, Culture & Heritage, Wildlife & Safari and Affordable Luxury.

When you have selected your activity preferences, the application generates a custom holiday from dozens of possible ‘Missions’, presenting it to you as a bespoke interactive video.

Video Playback

You can pause the video package at any point and find out more about each individual ‘Mission’ that has been selected for you, or go back and generate a new combination.

Mission Info

When you are happy with your unique holiday, your details can be entered into the competition to win the holiday, including a celebrity ‘Mission’ with Jamie Theakston, Monty Don, Gloria Hunniford or Chris Packham.

Competition Entry

Finally you can share your custom ‘Mission’ using the bespoke flash video player, via Twitter, Facebook, Email and also download your holiday information as unique PDF.

Share Mission

By using dynamic asset loading the site has been deployed, into the three different environments, on the South African Tourism home page, the Guardian and also scales down perfectly to run within Facebook.

Facebook App

The Techonolgy

The entire front end of the site is a bespoke Flash AS3 application, built around our own presentation framework for handling screen transitions and application state.

The application initialises from a configuration XML file containing references to much of the content, and a state XML schema for maintaining state throughout the application.

We integrated the great LoaderMax classes from Greensock to handle the video, audio & image loading which, once you get to them, help hugely with not only loading but also retrieving the loaded content within the application.

Loading

We created a custom media playback system, which took animated intro/outros & the series of selected videos and synchronised it with an audio soundtrack. Combined with the dynamically loaded XML data & PNG images, you are able to pause, play, recompile & find information about each of the individual video chapters.

Following the video playback section, is the competition entry, with form validation & error handling taken care of by our framework.

The final step for the user is a the sharing screen with dynamically loaded / created endpoints for Twitter, Facebook, PDF Download & emailing to your friends. This screen also loads a set of sponsor adverts from the server.

Email Friend

Finally, the video playback system for the main application was the customised and used as a stand alone player through which the shared video / animation & sound sequence is loaded & played back to friends.

Shared Video Player

For each of the different environments the app appears in, is a different set of integrated analytics, including Omniture (AppMeasurement), Doubleclick Floodlight & Google Analytics.

The main body of this ambitious build was completed in just a few weeks, working seamlessly with Angel’s designers, developers & project management team.

If your agency needs similar specialist flash application development then feel free to give us a shout any time.

HYPE Framework / Webcam Motion Detection

A little while ago I was looking into some possibilities for an interactive installation, and decide that I wanted to use webcam input, possibly microphone and generative graphics.

Searching around for webcam motion detection lead me to Justin Windle‘s excellent post & code samples.

Over the years i’d obviously heard a lot about Joshua Davis & Branden Hall’s HYPE Framework, for taking the heavy lifting out of generative artwork projects, so this seemed like a great place to start.

So, after some initial simple experiments, I customised the HYPE MouseFollow class, and created an XYFollow class, that would listen for and XY position rather than a mouse position.

However, I wanted the visuals to be a bit more interesting than just a blob moving around the screen, so looked at the HYPE Pixel Colorist examples.

That happened to use a Point theat the particle swarm were using as a target. In the example it was getting a random point, but i hijacked it, and made it follow the webcam motion tracking point instead.

In the end I adapted Soulwire’s MotionTracker class, instantiated it as it’s own object, and allowed the HYPE framework to query it for an XY position, as it needed.

The XY Position I got from the webcam (4:3) ratio was mapped onto my own specific canvas ratio (2:1) and used as a target for the HYPE swarm to follow.

So, hopefully this will be the first of many such experiments with both the webcam & the HYPE framework.. next step: Microphone monitoring

Click on any of the images below to run the flash demo, and all the better if you have a webcam.. if not, don’t worry you can toggle between webcam & mouse follow..

Note: hit spacebar in the demo to toggle the controls and info on / off.

Swarm following webcam motion detection position - Click for demo

Swarm following webcam motion detection position - Click for demo

Swarm following webcam or mouse - Click for demo

Swarm following webcam or mouse - Click for demo

Swarm following webcam or mouse - Click for demo

Click on any of the images above, or click here to run the flash demo.

I will be uploading the code at some point, when it’s a bit tidier..

This month I was hired by NixonMcInnes in Brighton to revisit a site they launched last year and add some social voting to a custom build of the VideoPress (WordPress) Flash video player.

Virgin Media Pioneers is a beautiful custom video blogging site built by NixonMcInnes based on the WordPress VideoPress system.

I helped NixonMcInnes heavily customise the look & functionality of the built-in Flash video player, who’s source code is released as part of the VideoPress package.

Virgin Media Pioneers - Custom Video Player

This year we have added greater customisation by adding a ‘Like’ button to the video player’s GUI controls.

The ‘Like’ button sends your vote to the Pioneers database, and also integrates with the front end via a JavaScript function, to update the ‘Likes’ shown on the page (see below).

Virgin Media Pioneers - Like Button

Once you have ‘Liked’ a video the player displays the current count in the GUI. If you click this, it then ‘Un-Likes’ your vote.. once again updating the database and front end.

Virgin Media Pioneers - Like Count & Un Like Button

The system, was complicated further, by allowing anonymous voting (i.e. you didn’t need to be logged in), and also the voting had to work from it’s embedded state on other sites or blogs.

So, for the simple brief of adding a ‘Like’ button, lot’s of technologies were implemented by the NixonMcInnes team (@empika & @twelmo) and as always it was a pleasure working with them on the Flash elements.

Dig For Victory Woodcut

When I don’t have my head in code, I like to get my hands dirty with some creative projects. Even better if those projects mean I can get out the craft knives, chisels and pots of ink.

Polly & I had always wanted to create nice screen print style images, but without all the elaborate and messy equipment, and after years of experimenting with stencils and spray paint, and inspired largely by Stanley Donwood‘s lino cuts prints, we discovered Japanese woodcuts.

The joy of woodcuts is that it is an affordable, and logistically simple operation, creates relatively little mess and best of all, produce a uniquely hand crafted feel, with each print being slightly to different to the last.

Woodcut inked & ready to print

However, I didn’t really want to produce a typical Japanese style woodcut, as my influences are more 2oth Century and less 14th Century.

So, working from my sketch book, I opened Adobe Illustrator, and produced the artwork for the design you see below. The design is inspired by the famous wartime slogan ‘Dig For Victory’, Eric Gill’s beautiful Gill Sans font, and Hip Hop’s sample hunting crate diggers, like DJ Shadow & DJ Premier.

When the design was finished on-screen, it was printed, reversed and transposed onto the wooden plate for carving.

… some hours later the plate you see above was produced and ready for printing.

A frsh woodcut print

Next I got some sheets of nice brown paper, rollered the lovely red ink onto the woodcut plate, laid the paper on the plate and started pressing.. really hard!

The relatively thin brown paper made the hand printing possible as the pressure needed to apply the print to heavier stock is too great by hand. We are on the look out for someone with a nice old roller style print press that can take these large plates, so do get in touch if you know anyone in the south-east of England.

Hand printed woodcut, each slightly different

In the end we produced a total of 18 handmade prints, (red ink on brown paper).
It’s lovely to see how each print has it’s own imperfections caused by how the ink takes to the paper, and how you happen to press each one.

A little stack of prints

Each print is numbered x/18 and signed, and can be bought directly from us using the paypal link below for just £30 + £5 P&P (UK only).

Framed prints are also available from a lovely new shop in Tunbridge Wells called Stuff & Good Sense… if you can, get down to The Pantiles and check them out there.

Finished, ready to be signed & numbered

I’m very pleased with the results of this first woodcut, and will be getting the craft knife out again soon for the next design.

Buy your print here: £30 + £5 P&P (UK only)

We’ve just redesigned & rebuilt our web site, so we thought we’d share with you, some of the technologies we used that have made the job easier. 

Wordpress & MS SQL Server working together nicely... on this blog

Firstly, this WordPress blog is running on IIS7 (OK great), but not only that the database it is connected to isn’t the usual MySQL, but actually Microsoft’s SQL Server.

Basically the guys at http://wordpress.visitmix.com/ (@WPonMicrosoft) have taken WordPress ver 3.1 and built a patch that takes the usual MySQL requests & updates and sends them to the MS SQL database instead.

At first I was unsure if this was going to work, but the installation performed perfectly and then my custom theme, ran exactly as it did when I developed it on the local MySQL version.

What this means for us, as .NET & SQL Server developers, is that we can make use of the power of WordPress, but tie it into the exisiting MS SQL DB we always have on our sites.

This means not having to manage & backup two different databases, but more exciting is that we (SQL Developers) can (more easily) get access to the WordPress data in the DB.

So, now we can start developing tools in .NET & SQL that mine & visualise the WordPress data in ways we weren’t previously able to (watch this space for upcoming experiments).

There are 2 little potential problems with this installation:

1. How long will MS continue to support & upgade the WP patch to keep in step with latest versions?
2. Many of the existing WP plugins will only work with MySQL, and so will we run into problems there later? I guess we’ll see!

We used font deck for headlines in the site & wordpress blog

The next technology we used for the first time is @fontdeck‘s awesome web font service.

We have used the lovely DIN 1451 Mittelschrift Standard for all of the headlines in both the site & the blog.

To my eyes, the FontDeck font renders in all browsers, between a little & a lot better than other services. It’s also quick, and at just $12 / year this seems like pretty good value.

Well done FontDeck.com, it’s great!!!

Remy Sharp's (@rem) Twitter.js script was used for the Twitter feeds

Lastly, we used Remy Sharp’s (@rem) great Twitter.js script to generate our Twitter feeds.

Unlike other Twitter JavaScript libraries I came across (official Twitter included), we could totally customise the look of the feeds, and also the presentation format of each tweet.

It’s also great because it waits until the page has finished loading before it starts doing it’s thing, so doesn’t slow the page loading..

Thanks!!