AdamCousins.com

I have finally got round to building my work portfolio consisting of all my work done at
Collective London, as well as freelance work.
After several failed attempts at doing something too swish to house the work, I discovered the best direction (for me) was to make as simple a container as possible to at least let the work try and speak for itself.
Since I recently re-themed my site to the popular Empty Canvas theme, I felt this was a good idea to reflect the minimal nature of the rest of the site. Will make several additions to the portfolio in the next few days, including a system to filter projects based on various criteria, and a more involved image viewing screen.

For previous Flash on the Beach posts in this series, see On the Beach (part 1), On the Beach (part 2)., and On the Beach (part 3)

The second afternoon session had Jared Ficklin showing us how one can visualize sound in nature and code. Jared began the session with demonstrating how sound physically manifests itself to give us an idea of the sort of properties of a sound wave you could apply to code. Jared used some braniac style practical examples to help us visualize this; for instance he blasted out some music into some artificial smoke to demonstrate sound waves moving through the air.

Rubens Tube

Jared then took us through a Rubens Tube ‘fire’ example. This experiment essentially involves a tin foil lines PVC pipe, with a hundred or so holes drilled in and a speaker at one end matching the diameter of the pipe. At the other end of the pipe is a connection to a propane tank, feeding propane gas into the tube. After lighting it up, a mild and steady oscillation of flame appears through the holes in the pipe, whilst blasting some music or sound through the other end causes the vibrations in the tube to allow more gas through in some holes on the pipe, and restricting it in others, forming sound wave int he flame. Since the experiment involves open flame he was not able to demonstrate a live version, so he played this video:

Needless to say it was a lot of fun to watch, and served as quite a nice visual way to visualize the amplitude of different frequencies in sound.

Visualization in Code

Jared used flash and AS3 code as a bridge to demonstrate how some of the properties inherent in a sound wave can be translated into code and applied to various visual properties in flash. He showed us some of his own visualization ideas, and also some quite impressive and rather original ideas from Annika Hamann. Here Annika uses properties of the sound such as amplitude and frequency to affect the animation and timing cycles of various flash animated cartoon characters. Jared demonstrated how you could easily affect flash properties such as movieclip position, scale, alpha, tint etc with influence from sound data.

AS3 has made it more simple than ever to extract various sound data from a sound wave using the SoundMixer class. You can see a first experiment I have attempted myself after being inspired by Jared’s fire example on my blog post here. It combines some particle system experiments and affecting the movement of the particles with the beat of the audio. You can easily extract the data from a sound wave into a byte array in AS3 like this:

---


var PLOT_HEIGHT:Number = 200; //size of area to animate in
var snd:Sound = new Sound();
var req:URLRequest = new URLRequest("your track url");
var channel:SoundChannel;
var bytes:ByteArray = new ByteArray();



snd.load(req);
this.addEventListener(Event.ENTER_FRAME, enterFrameEvent);
channel = snd.play(0,3);



function enterFrameEvent(event:Event):void {
SoundMixer.computeSpectrum(bytes, true,0);
// left channel
for (var i:Number = 0; i < 256; i++) {
val = (bytes.readFloat() * PLOT_HEIGHT);
}
}


---

The sound mixer’s computeSpectrum function stores the audio data as normalized floating point values between -1 and 1 for a default range of 512 into the byte array on each on enter frame event. The above example code will do the first 256 values for the left channel. You can then cycle through this array and pull out the values as you see fit. If the second parameter of the computeSpectrum function is set to true than the function will perform a Fast Fourier Transform to convert it into its frequency domain before storing the values. Anyway I don’t want to fill this with details on computeSpectrum but for more details there is an excellent tutorial here.

Stephen Hawking’s Universe

Jared showed us an experiment he had been working on at the end of the session, where he streamed an audio recording of one of Stephen Hawking’s Cambridge University lectures into one of his flash experiments. The idea of the algorithm is that as the audio recording progresses a line is traced zig-zagging upwards across the screen with the x and y changing based on the variances in Stephens voice, and after each sentence it detects the pause and draws a star, with the brightness being dictated by the length of the sentence. Jared then showed us how he had created a (Stephen Hawking’s) ‘Universe’ of stars against a black space backdrop. It was very impressive an another interesting original way of visualizing sound, in a manner far removed from the usual Windows Media Player and iTunes standard visualizations. Jared then impressed everyone again when he demonstrated how fellow Flash on the Beach speaker Mario Klingemann inspired him to make it interactive, in that you can click on a specific star and it’s associated sentence plays out!

Anyway, Jared has posted a nice video of the process on YouTube:

I have recently been tinkering with some particle systems in AS3 after reading this tutorial from Computer Arts.

Basically have been experimenting with different png graphics for the particles and using ADD blend mode for each particle movieclip. I’m still faffing a bit with getting the sound to interact with it in a more interesting way but it’s a start for now.

The music playing is M.S.T by BADADAM.

For previous Flash on the Beach posts in this series, see On the Beach (part 1), and On the Beach (part 2).

The afternoon session began with the ‘Jam Throwdown’. What on earth is this then? Well it’s quite simple: six very talented speakers from FOTB are given 10 minutes in which to lay down something sick that will amaze the audience. The speakers this year were: Grant Skinner, Mario Klingemann, Julian Dolce, André Michelle , Jer Thorp, Joa Ebert.

Grant Skinner is pretty well known amongst flash circles. Just a quick aside, Grant recently posted a list of what he feels are the basic skills a decent flash developer should have, quite interesting. Anyway, his 10 minutes involved demonstrating how building on some relatively simple animations and collision with some ball objects, some interesting audio visualization effect could be achieved. This culminated in quite a cool visualization for a Prodigy track.

I’ve already discussed Mario Klingemann’s morning session here, he used his ten minutes to continue his talk he didn’t manage to finish in the earlier session.

Julian Dolce used his time to show us how you can us ANT in Eclipse to publish several FLA’s in one go. There is more information on this here. Some of the reasons for wishing to achieve this for Julian was so his company could publish their projects from FDT, and also run automatic daily builds. You can also publish and test Flash CS3 Flp files.

Next up was André Michelle. André’s talk was probably the most exciting for me as he demonstrated some tools he had created to manipulate real time audio in Flash 10. These were very cool, in one example André showed us a Granular synthesis tool he had created, where he was able to draw lines and Bezier curves on a canvas which manipulated the sound in interesting ways in real time.

This was very impressive as although some of the other tools were interesting, they were doing relatively standard things like altering the filter cutoff and delay (for example) and were only novel this time as they were being done in Flash. The granular synthesis tool on the other hand really used the drawing ability of flash to do some cool audio manipulation effects in real time. The slides and tools are available here.

Here is a video of Andre demonstrating the granular synthesis tool:

Jer Thorpe demonstrated how by modeling in 2D and 3D and manipulating these models and views he was able to design an accessible playground for some actual work he had been commissioned to do. One of the focuses of the mix of 2D and 3D views was how they could generate suitable paths on gradients accessible for people in wheel chairs.

Lastly, and probably the most exciting Jam Throwdown was Joa Ebert high speed live coding performance. This was particularly entertaining as this was the first time I had ever seen anything like this. Joa used his ten minutes to live code a cool 3D visualizer for a Daft Punk song, in OpenGL and coded in Java. Joa built his visualizer in no less than 9 minutes and 40 seconds and the results were quite impressive. Here is a video of Joa in action:

Joa Ebert’s java live coding at Flash on the Beach 2009 from Thomas Gabrielsen on Vimeo.

As if that wasn’t enough, Joa really wowed the audience by showing is that his keyboard was completely devoid of glyphs! To be honest if he always works this way then he probably completely used to it, but was quite impressive all the same. I guess doing this is a good idea if you’re ever in James Bond – esque situations where you are forced to use a foreign letter keyboard…

Next FOTB post will discuss Jared Ficklin’s session on visualising sound in nature and code.

Seb Lee-Delisle’s Wednesday morning session was a reflective talk on the notion of ‘Work/Play’. Seb began the session with a super fast fly through of some recent work from Plug in Media’s portfolio, complete with running commentary from Seb.

I WILL pay your parking ticket…

This session was very much a fun and experimental session, with some audience interaction. The first of these began with Seb rather oddly mentioning about a ‘missing girl’… and how Seb knows who she is but has never met her… This strange and cryptic intro was in fact just to do with a iwillpayyourparkingticket which displays daily tweets from people who have mentioned recieving a parking ticket, and how this may give them a little bit of shitty day. People can then visit the site and deal out a specific amount of love to the parking ticket victim, in an effort to make them feel a bit better. Whichever person gets dealt the most love through the duration the site was up, then gets their parking ticket paid for by Seb himself.

Obiously this then meant Seb attempting the contact the winner through Twitter, in this case one @jenwell about paying parking ticket! Naturally @jenwell assumed he was some sort of British nutcase as she had no idea who he was or why he wished to send $41, so his attempts to pay her ticket were sadly in vein. I can only imagine the sort of tweets he was sending, ‘@jenwell, Hi you don’t know me, but I need to know where you live so I can send you money for your parking ticket…’

So as Seb’s attempts were sadly unsuccessful, he enlisted the audience to do a mass tweeting session to poor, unsuspecting @jenwell, all imploring her to contact Seb as he wants to pay her parking ticket! So naturally, a buzz of tweeting began and we were able to see the tweets going up as it was happening. @Jenwell has since tweeted ‘@payyourticket @sebleedelisle!!!!!’ so I can only assume she has finally got wind of it. Brilliant experiment and demonstrated the sort of thing I have never imagined Twitter being used when simply using it on a day to day basis.

Glowsticks

The second audience interaction involved each member of the audience receiving a (miniature) glow-stick and the house lights being dimmed… The reason for this soon became apparent as the audience was asked to indulge in a game of 3D – glow stick controlled pong! Essentially, the situation was just that a camera and Seb’s flash were detecting which side of the room had the most ‘glow’, and then the paddle moving over to that side in an attempt to get the ball.

It’s the sort of thing which has been done before at this sort of thing but for me was a nice interlude to the other talks during the day, and Seb’s excellent and humorous presentation style made it all the more fun.

Big and Small

The final part of the talk was regarding Plug in Media’s superb Papervision3D site, ‘Big and Small’. The site was made for the titular childrens program showing on Cbeebies. Seb gave us a run through of the impressive mix of Papervision3D and movieclip animation in the site. Highlights including their own custom physics engine for various things and reflections in the bathroom mirror, which was the first commerical instance of this effect I have seen in a Papervision3D site. This eventually led on (after a glowstick audience vote) to Seb giving us a bit of sneak preview of Big and Small part 2, which takes the user out of the house and into the garden. Here, Plug in Media have obviously gone to town with more Papervision3D experiments, including a vegetable patch where you can grow your own vegetables, and impressive water ripple effects in the pond.

What I found most impressive about the site is the seamless intergration of 2D flash movieclips on the stage and how these fit into the 3D rendered Papervision world. I did a similar thing for a Christmas themed game for Callaway golf, which fused 2D flash movieclip animations into an Away3D rendered golf course. This was reasonable challenging and we only had one 3D scene and only a handful of animations to insert. The big and small site takes this idea and put it into a much larger scale, with compilcated animations of characters jumping round the 3D scenes, all without any graphical glitches. Add to this a vast array of sound effects, background music and reasonably quick load times and you have a very impressive 3D flash site. There is a full write up of the project here.

That wraps up the morning sessions. The next FOTB post will cover the famous ‘Jam Throwdown’ session, where six of the FOTB speakers gets just ten minutes each to throw down anything they wish.

No, not the best Neil Young album ever, but rather my report from the superb Adobe – sponsored annual Flash conference Flash on the Beach (FOTB) held in Brighton today. This is the fourth year of FOTB and in that time has gained the status of the ‘must see’ conference for developers, designers, artists, web enthusiasts to witness some truly excellent talks and presentations from fifty of the most talented people in the business.

Due to attending only on the final day of the conference, I missed out on the (in!)famous FOTB parties this year, but was able to attend all the presentations that went on throughout the last day. For an excellent discussion on the previous FOTB days, I recommend you check out my fellow Collective colleague Marc Hibbins blog.

Over the coming days I shall do a series of FOTB based blog posts regarding the presentations and talks I found particularly enjoyable and interesting, beginning this blog post with Mario Klingemann’s talk, ‘Connecting the Dots’.

Klingemann’s talk was particularly interesting for me as it delved into many topics such as Cellular Automata which I studied during my Computer Science degree. The talk began with the idea of using basic mathematical tools (in this case a ruler and compass) to generate initially incredibly intricate geometric patterns, and eventually marrying the idea with some actionscript coding to attempt to solve age old mathematical problems. The example Klingemann used in this case was the problem of finding a pattern or rule in Prime Number prediction. He demonstrated his ideas by repeatedly plotting prime numbers initially in a square formation and then in increasing spirals, up to an unfeasibly large maximum. At this point he then went about tweaking various parameters of the spiral to create repetitive lines or streakes appearing throughout the pattern of numbers on screen, with the numbers forming themselves on or around these lines. I found it genuinely interesting and slightly dramatic in a ‘Horizon’ sort of way when he demonstrated perfect lines and spirals appearing, showing some idea of a possible means to predict patterns in prime numbers, and furthering his quest to solve the problem.

The talk advanced on to using Cellular Automata as a means to model number pattern problems in a ‘natural’ simulation, and then spotting patterns emmerging in the resultant visualisations. This is not the place to discuss Cellular Automata but in the past I have seen it used for myriad things, such as theoretical biological modelling, solving complex problems etc. Here, Klingemann demonstrate how using some of the rules associated with each cell (i.e. how a cell interacts with it’s immediate neighbours) can be linked to various visual parameters which are processed at run time, such as blurring and alpha effects to not only create some truly excellent visualisations but provide a means of detecting patterns. He demonstrated the trial and error approach to tweaking the parameters, and made the good suggestion of pumping ‘good’ settings to an xml file for later re-use, to approach something resembling a solution in the complex animation. Klingemann recieved a well deserved round of applause when he went from total visualisation anarchy to eventually landing on an impressive repeating animating pattern in the visualisation, to demonstrate it as effective means for number pattern detection. To my eyes I was probably more impressed with the resultant visualisation, but felt quite inspired by Klingemann’s enthuasiasm and entertaing style at this point.

The session ended with a some incredible ideas to compress image data to the point where the data could be packed into a 140 character tweet. Klingemann had to explain the concepts behind this in quite a hurried manner so will review the slides and notes on this part of the session first, at which point I will be in a more informed position to blog in a sensible manner on the subject. I shall also add relevant links to this post as soon as they are available. I would also recommend visiting his Flickr page, as it features many of the visualisations from his experiments.

In the next blog post in this FOTB series, I shall reflect on one of my favorite online web personalities, Seb Lee-Delisle’s experiences on putting the fun back into digital. This was a truly entertaining session and involved a lot of audience interaction, complete with 3-D glasses and glowsticks!

This was the my first year I attended FOTB and I must say, I certainly hope I am able to go for the whole 4 day duration next year, not least as I missed this years intro: