Whilst working at Bloc I was asked to come up with a solution to animate the itv WILD logotype so to add an organic and “animal” feel to it.

The first task was to create some particles filling the letters of the world “WILD” for only a brief time. I’ve used a simple swarming algorithm to have particles seek the outline of the word and then leave after a small time and seek again a randomly changing target.

The second task was instead to give the letters a furry look that didn’t look stiff. To achieve a fluid motion I have used a springy chain of particles for each hair where the middle particle was placed at the top of the letter surface normal and then added gravity to the simulation. To my surprise this project was full of unexpected and in some way beautiful results: if I moved the center of gravity with my mouse the particles would stop to look like hair and would resemble more to seaweeds under water. Quickly shifting the base of the particles would create natural, brush-like patterns and sensual movements.

Video

You can play Smokey Joe at www.stuboutjoe.com

The game was targeted to children from 7 to 14 years old and it has been used in classrooms to warn children about the danger of smoking. The aim of the game was to collect as many “info sprites” as possible. These info sprites contain facts about smoking dangers which needed to be memorized by the player in order to pass the final quiz and go to the next level.

I designed and developed a custom collision engine in order to meet the need of creating a gameplay suitable for such a wide range of players. The game also features a custom editor for creating levels and a bitmap rendering engine.

Video

Credits:

Art Director: John Denton
Developers: Danilo Di Cuia, Byron Manley, Mark Dooney

Website for the Boston-based studio of landscape architect Mikyoung Kim.

Art direction: Steve Rura

Visit the website (offline)

Video

An experiment using the same MVC of one my previous experiments: DancingType.

The original idea came from a beautiful Muxtape cover design by Steve Rura.

See the experiment here (audio may take a little time to load).

I designed and created this website at CTD studio, with very little budget and with a very little time available. The main task was to find a way for Felix to update his website quickly and easily.The website connects dynamically to the database for each subsection of the portfolio. The images for each section are then retrieved only upon request. By doing this we avoid downloading a big XML file in the beginning containing the information for all the images and therefore reducing the loading time.Visit felixpacker.co.uk

The Content Management System

The flash application makes use of PHP scripts that return queries in a XML format which are then parsed and displayed using Actionscript. In this CMS there isn’t the possibility of adding new sections but given the architecture of the database it’s a feature that could easily be added in the future.

From a design point of view it was mandatory to keep the navigation as smooth as possible to allow seamless modifications to the model. Popups and modal windows are only displayed to add or delete an image while all the PHP calls are done in the background.Images are automatically resized in upload and loaded into flash to give the user the chance to generate its own thumb.Once one is happy with the position, the bitmapdata inside the rectangle is encoded in JPG using ByteArray and JPGEncoder and then uploaded to the server.

Here is a video that shows what the CMS looks like:

I was commissioned to produce some animations for Miracle’s Theatre play: “Cat’s Cradle” inspired by the homonymous Kurt Vonnegut’s book.

The aim of these animations is to illustrate the ‘calypsos’ of Bokononism, the fictitious religion created by Vonnegut and practiced by the characters in the book.

Video

Flash application

In order to illustrate the concept of “Duffel” I developed a small program in Flash that could generate a cascade of men. The applet is generated using Box2d physics library. The animation is captured at a slow frame rate (set in Box2d) due to Flash rendering abilities and then re-sped it in post production.

You can view an example of the applet here (Click on the window to give focus and press + to start the cascade.)

Symbols

I was asked to do a poster for the Falmouth and Penryn community radio to engage the people of these towns in the creation of a new community radio.

Code

The main idea was to create several rays, representing different voices, coming out of a speaker. Using the open source libraryAlivePDF I was able to create a quick prototype for this poster in Flash and output a PDF as final result.

Here is the code used to generate the rays.

var s:Shape =new Shape();
addChild(s);
 
var myPDF:PDF = new PDF( Orientation.PORTRAIT, Unit.MM, Size.A3 );
//set the zoom to 100%
myPDF.setDisplayMode ( Display.FULL_PAGE );
//add a page
myPDF.addPage();
 
var o:Point = new Point(225,210);
 
var degrees:Number;
var radius:Number;
 
///circles
for (var k:int = 0; k<15; k++) {
	//point on each circle
	radius=k*2;
	for (var l:int = 0; l

Click here to see the outcome of this code.

Final designs

Black
White

This is a little viral app I created at CTD studio to wish everyone good holidays.
Text is transformed into a bitmapData and a simple collision system is applied to make the snow flakes stick to the letter shapes. Then the user is asked to send a message to a friend that will be encrypted and sent via email using PHP.

What was the most engaging in this project was to create a pleasing final image and a nice animation. I have applied a perlin noise to the text to have a natural looking surface but it was quite hard to find a way to have the snowflakes falling fast enough to display the message while looking natural at the same time.

You can have a look at it here.

I hope you enjoy it!

How can type communicate sound? Can simply abstract forms suggest melodies?

These were some of the questions I came up with while developing this sound type visualizer .

see this experiment (the audio in the beginning is quite low so please turn up the volume of your speakers)

Design

For this piece of interactive motion type I was inspired by the work of the Swiss graphic designer Niklaus Troxler: I was particularly inspired by the poster he designed for the Willem Breuker Kollektief. Here type is dissected, disassembled while retaining though, the fundamental shape of the letter. When I first saw it I suddenly associated this image with the sound of a trumpet and a clarinet, and just when listening to the band I realized how the design was carefully matching the style of the musicians.

After a couple of thoughts and a walk down the alley I sat down on Saturday sketching some prototypes for putting this idea in motion. My first idea was to get the pieces of the letter further away from the center in an ordered fashion, more than an irregular offset as in Troxler’s work.

I wanted to give the letters a broken look more then a dissected one. I sketched out a quick prototype setting each part of a letter with the registration point in the middle. Then using a little bit of trigonometry I managed to give to the letters an implosion/explosion effect.

Here is my very first test with keyboard input.

Using the keys to expand the letter wasn’t really exciting though. Therefore I came up with the idea of linking the animation to a sound output and finally set the words alive dancing with the music.

I realized a first prototype with the sound using the whole alphabet and playing a little bit with transparency: take a look at it here.

I still see some potential in this experiment and I will like to expand it in the future with different type, weights and motion.

Images

Some snapshots taken during development phase: I love those shapes!

Process

The main idea behind this experiment is: repulse an object positioned on a circle from the circle center with a distance related to sound values.
To each object is assigned a proportional value of the whole sound wave. Object on the right part of the circle will have values from the right channel and objects on the left part will have values from the left channel
Actionscript can give two representations of the sound by setting different values to the parameter FFTMode (Fourier transformation) of the computeSpectrum function in the SoundMixer class:

• if set to “true” the method returns a frequency spectrum where low frequencies are represented on the left and high frequencies are on the right.
• if set to “false” the method returns the raw sound wave.

To apply this concept to type I created for each letter a class and using the Flash IDE I sectioned each letter in 17 pieces (average) and transformed each of this pieces into a movieclip with its registration point in the center.

You can see the difference in this example

Classes

I’m going to write here, for the sake of code readability, just the main function for each class and their responsibilities.

• Main.as
• SpectrumAnalyzer.as
• DancingLetter.as

Main
Provides to initiate the sound data model. Once the sound has been loaded the data model is passed to each DancingLetter object on stage.
It rotates and scales the letters’ container.

SpectrumAnalyzer
It is the data model for the visualizer.
Loads and provides sound information. Displays the graph.

Here is the function that provides and displays sound values:

private var _values:Array=[];
private var _wave:Boolean=false;
private var music:Sound = new Sound;
private var ba:ByteArray = new ByteArray();
private var sc:SoundChannel;
 
......
 
private function processSound(ev:Event):void {
	SoundMixer.computeSpectrum(ba, _wave);
	//creates the graph
	graphics.clear();
	graphics.lineStyle(0, 0xFFFFFF);
	var counterY:int=0;
	var counterX:int=0;
	_values=[];
    for (var i:uint = 0; i < 512; i++) {
		var lev:Number = ba.readFloat();
//split channels graph visualization
		if(i==512/2) {
			counterX=0;
			counterY=20;
			graphics.moveTo(counterX,-(lev*10)+counterY);
	}
	_values.push(lev);
	graphics.lineTo(counterX,-(lev*10)+counterY);
	   counterX++
	}
}

DancingLetter
It is the view model for our visualizer.
Stores the initial values for each sprite that contains and animates the sprites according sound values.

public function DancingLetter() {
	//populate a multidimensional array with all the object in its displaylist and their initial position
	for (var i:Number=0; i1)];
		dl.object.transform.colorTransform=ct;
		dl.object.alpha=1-Math.abs(soundValue)/10;
 
		/*
		dl.object.rotation=soundValue;
		dl.object.scaleX=dl.object.scaleY=dl.object.alpha+1
		*/
   }
}

After graduation and before moving to Cornwall, some friends of mine opened a small silkscreen studio in Milan.

I wish I could have helped them a little bit more in setting up the whole thing but, before I knew it, I was already folk dancing by the docks of Falmouth.

Therefore I helped them in the only way I could: by making Le Raclet a ne

This was my first site in Flash that was extensively making use of design patterns such as MVC, template and factory. Thanks to this I was able to redesign parts of the site months later without breaking anything and avoiding big headaches.

At the moment the website is driven by a XML file that Vera (the owner of the studio) patiently  modifies each time a new work is produced. We didn’t expect to reach the amount of work that is now present on the site, so I will soon add a sparkling new database connected via AMF and a brand new design.

see leraclet.com

Living in a little student town such as Falmouth with one of the best art schools in the United Kingdom next door is one of the things that makes me feel really lucky.

I was asked by the twenty-four graduating students from the fine art department to build a website and a logo for their last year exhibition that is going to be held in London from the 3rd to the 5th of July.

As it was a no budget project with a quite tight deadline I had to come up quickly with strong ideas that would have been easy to realize and would fit well with such a variety of styles and personalities.

see this website

Logo

The first thing to think about was actually the logo, that would have had a key role to set the general tone of the website later.

The starting concept came from the word “fleet” that the artists decided to chose as name for their group: besides the different connotations the word also refers to a hidden river that runs into the underground of London. The river was a good metaphor to illustrate the dynamism and compactness of the group as I imagined each artist as a wave of the river being hidden by the letters of the word “fleet”.

To conceive this image I developed a quick algorithm that would generate 24 waves and position them under the “fleet” word with a slight offset in order to give an interesting optical effect.

The type I chose for this logotype is Museo, a free font from the independent foundry exljbris.

Here is a first test of the algorithm.

And down here the final logotype with some further tweakings.

Transitions

After a clean and somber set up of the layout I had to spice things up a little. Reusing the same algorithm of the logo I appended some code to retrieve color from a bitmap and display them as graphical patterns.

The first idea was to generate graphical elements with the same color and then replace them with the image. Lately I come up with idea of masking the image with the same elements rendered in a different scale.
Here is the process that lead to the final transition now present in the website.

Code

The snippet that did the trick for the website was the wave pattern generator. I used some simple sinus functions that draw a point every frame. The issue was to speed things a little and being cpu friendly as drawing each point for every line on every frame is quite consuming. I came up with using a timer that draws the points every 10ms and substituting the animated pattern with a static one once the drawing had reached the end of the window.

public function WavePattern(l:Number) {
	stagelength=l;
	timer.addEventListener(TimerEvent.TIMER, drawWave);
	for (var i:Number=0; i < 24; i++) {
		var pencil:Sprite=new Sprite();
		pencil.y=(16.5 * i)-1;
		(i%2) ?flag=0:flag=1;
		pencil.x=-38*flag;
		pencils.push(pencil);
		pencil.graphics.lineStyle(1,0xBBBBBB);
		container.addChild(pencil);
		timer.start();
	}
	addChild(container);
}
 
private function drawWave(e:TimerEvent) {
	if (counter*9 < stagelength; k++) {
		for each (var p:Sprite in pencils) {
			with (p.graphics) {
				lineTo(counter * 6,Math.sin(counter) * 2);
			}
		}
		counter++;
	} else {
		//as soon as arrived to the end replace the animated pattern with a static longer one
		dispatchEvent(new Event(Event.COMPLETE));
		timer.stop();
		restoreWave();
	}
}
 
private function restoreWave() {
	for each (var l:Sprite in pencils) {
		l.graphics.clear();
		l.graphics.lineStyle(1,0xBBBBBB);
		for(var k:Number=0; k<stagelength; k++)>
			l.graphics.lineTo(k * 6,Math.sin(k) * 2)
		}
	}
}

A few months ago, while browsing on del.icio.us I came across letters-numbers.com, a portfolio of works by Steve Rura coded by CJ Amodeo.
I was so impressed by the idea and the original coding achieved by these two designers that I decided to give a try and port this site in Flash as an exercise for my coding skills.

see this experiment

The most interesting thing for me was the fact of having a placeholder for the images, with the same dimension of the image that the placeholder replaces. Letting the user chose what project to see it’s a very bandwith-friendly idea and also offers two pros:

1. The returning user doesn’t have to wait for the browser to download all the images in the portfolio and can go directly to the interested project.
2. The new user will slowly discover, with an order the he chooses, all the works having the freedom to click on the name projects is interested to, by scrolling the page or clicking on the placeholder.

Code

The data for the site is retrieved by a PHP script that recursively look for images in folders and then generates an XML file with the URL and dimensions of the image.

The captions to the projects are then added with another XML file, present in the main folder.

This is how the generated XML looks like:

In order to populate the project categories Flash will retrieve the name of the project from the filename string attribute of the previous XML using regular expression and then match it against the categories already created thanks to the other retrieved XML which looks like this:

Therefore the workflow is:

1. get the XML for the captions
2. get the generated XML with all the images
3. go through the XML with the images to create and populate categories
4. go through all the categories created and add captions to the corresponding project using the XML with captions.

I know it’s quite complicated but many steps could have been simplified. The project name could have been retrieved using PHP and categories could have been created using the caption XML. This was born as a weekend experiment and then developed across 4 days to produce a copycat of the original site.

As my first experiment with PHP and XML I can consider myself pretty satisfied.

Video

Interface

The drawing application consists of two screens: one that shows the drawing made with name and age of the artist and the other one (a touch screen) with the interactive drawing pad.The user is asked to use his fingers or a palmtop stylus to draw directly on screen and then save his work adding his name and age.

Technology

4 Dell Computers connected to a main server to store the images.The application in each computer is driven by a Flash AS3 movie that is stretched across the two screens. PHP is used for saving and displaying the images on the server.

Design

In this project the design was already conceived by the company. The only things I added of my own were the feedback animations for buttons and keyboard keys and the concept of using a subtle paper texture for the drawing pad. The drawing was to be saved as a transparent PNG without the paper texture and then this would have been added in loading phase. Unluckily we couldn’t find a texture matching the feel of the whole application so we left it without, but it can be added easily if we want to.

Code

The hardest thing for this drawing game was to save the image on the server while the others were showing and then load the new image seamlessly back into the group.The steps that I followed to achieve this effect are as listed:

• Delete all the object from the Drawing pad except the drawn image when save button is clicked
• Move the drawing pad object in the screen above while displaying the keyboard for the name insertion
• Get the bitmap data from the drawing pad object
• Encode bitmapdata into a Byte Array
• Encode the Byte Array in a base64 format string
• Pass the string to the PHP file that will save the image on the server
• When finished tell the object that scrolls and displays the previous drawings to load the last image and insert it in the displayed drawings array
• Remove drawing pad

For this application I used two really useful classes that I’m probably going to use a lot in the future:

• Adobe corelib PNGEncoder class
• Base64 class from Andrew Webster, to convert the String returned by the Adobe PNGEncoder class

Also a big help was given from this article from FlepStudio (grazie Filippo!)Here’s how the code looks like for the saving function:

var bmpdata:BitmapData =  new BitmapData(drawing.width,drawing.height);bmpdata.draw(drawing);byte_array=PNGEncoder.encode(bmpdata);var encoded:String=Base64.encodeByteArray(byte_array);var variables:URLVariables=new URLVariables();variables.png=encoded;variables.name = nameDisplayer.name+"_"+age+"_"+Rnd.integer(100,300);var req:URLRequest=new URLRequest();req.url = serverAddress+ "/savefile.php";req.method=URLRequestMethod.POST;req.data=variables;var loader:URLLoader=new URLLoader();loader.dataFormat=URLLoaderDataFormat.BINARY;loader.addEventListener(Event.COMPLETE,saved);_urlDrawing = variables.name+".png";try {loader.load(req);} catch (error:Error) {trace(error.message);}

Images

The main purpose of this gallery is to show a big amount of images in a small space by using a liquid layout that will change according to the number of images visualized. Once you click on an image you can browse using your keyboard arrows.

The images are retrieved from an XML file that contains, besides the images urls, also the image captions and the gallery titles.

This version includes a slider that can let the user to set dynamically the gallery height.
see this experiment

Description

After coming back from Brighton I was full of ideas and quite influenced by Markus Weskamp’s speech “Visualizing time” in which he talked about visualizing big amount of informations such as the Tree of life or huge advertising companies clients projects.

I wanted to apply the concept Markus was showing us to make a gallery image. According to the first law of simplicity my first thought was to apply a stripe mask to all the images and then show the whole image once clicked. However I experienced some difficulties in retrieving the height of a mask: as the images were dynamically downloading I couldn’t set on runtime a particular height. So I went for scaling the image instead of masking it and in the end I found myself storing heights of stripes in variables. This same process I’m using for scaling could easily be used for masking as well in the end, but I think scaling works quite well and more consistent to my original idea.

Usage

Roll over the images to see a click preview. Once you click on them you can browse using keyboard arrows.

To Do

• adding image captions and gallery title visualization
• slide stripe horizontally so the image is always on screen

Code

The gallery is composed by three main classes (StripeGallery.as, Stripe.as, Image.as) and an auxiliary one for the XML parsing. The alignment of the stripes to the top during the ‘browsing mode’ is held in the main fla code.

The gallery is composed by stripes that represent the main nodes of the XML. Each stripes contains a set of image. When an image is downloaded, its sibling will be downloaded. Also once the first image is downloaded, the next stripe starts loading in order to show as soon as possible the quantity of the sub-gallery present. I found out that Flash has some problems when downloading more than 3 images at the same time.

I used collision detection between the images to keep them next to each other.

The structure of this code is then applied to keep together the gallery stripes as well. Here’s an example code of this structure.

for (var i=0; i<images.length; i++) {
var a:Sprite=images[i];
var b:Sprite;
if (i<images.length-1) {
b=images[i+1]; // if the images are not all loaded yet define the var b
}
if (b!=null) {
//keep its position next to the previous image in the array and viceversa
 
if (b.x!=a.x+a.width) {
b.x= (a.x+a.width);
}
if (a.x+a.width!=b.x) {
a.x=b.x-a.width;
}
}

No source code available yet for download.

I just arrived back from Brighton after almost a week of volunteering at Flash on the Beach 2007.

I have to say that volunteering there was one of the most rewarding non-paid experiences I have ever had. With other 14 fellow companions coming mostly from the surroundings of Brighton, we got along quite well with the organizers of the event. I was quite surprised to see that this whole massive meeting was organized by just one man (John), and maintained by his family and a couple of friends including the little Amy (John and Joe’s daughter) who was building her little house out of the boxes we were sorting and contributed to make the whole thing more of a game than a job.

The whole experience was worth the 8 hour round trip travel, and sleeping on the floor for 6 nights.

In this post I give ‘marks’, not to people’s work obviously (that’d be quite pretentious) but to their speeches and to what I got out of them.

OK so here’s just some of the events I took part of and my feedback for them:

Sunday

Dominic Minns and Seb Lee-Delisle – ‘Game Development workshop

Unluckily I didn’t get to take part to the whole event as there were still some help to give in the morning. But for what I’ve seen Seb and Dominic from the twisted Plug in media company, kept their game developing process accessible and easy to understand by guiding us in a step-by-step problem solving game building. I came up with a bunch of ideas after seeing their Vector class used in that particular case to orient an object to its velocity direction.
Double plus for Dominic being so funny.

Final vote: n.a.

related links: www.pluginmedia.net

Monday

Grant Skinner – ’50 reasons why AS3 kicks ass’
Or ’50 reasons why Grant Skinner kicks ass’, (and anyway why America is so obsessed about kicking butts I still don’t understand). When I saw Grant the first time I didn’t recognize him (despite I have been constantly lurking on his Incomplet gallery webcam experiment in the past), I even thought for a second he was the son of one of the speakers (sorry Grant, but I’m slightly short sighted and you look definitely too young). Grant gave a vary, but really specific session based on some new advantages AS3. He definitely confirmed to be the ‘guru’ he claims to be. I briefly talked with him at the end: he seems not only to be a good developer and lecturer but a very humble, funny person as well. He gave me quite a good inspiration about perlin noise and I will probably post soon an experiment about it. Worth checking out his new works and Buzzword : a flash based text editor he contributed to that is getting more popular every day.

Final vote: 8/10

related links: www.gskinner.com/blog , incomplet.gskinner.com
Joshua Davis – ‘Dynamic Abstraction’
Joshua Davis doesn’t need any introduction. During the last 5 years he was defined by IDonline as a ‘rockstar of web designers’. This speech, in fact, stays at a flash conference as a smashed electric guitar feedback stays at a humming of a computer fan. Joshua gave a restless fuck*-raining talk about his work process and some fundamentals of computational art. He spoke about layout which he confines in Grid and Canvas system and the arrangement of objects in terms of chaos, quiet and texture. He also spoke about his main inspirations: from Pollock (even though he’s not his favourite) to japanese artists to textile designers (I’m seriously waiting for www.ilovemycarpet.com now). Thus he pointed out the importance of finding your inspiration outside your work environment. As with many other speakers Joshua reaffirmed the concept of playing, experimenting and allowing randomness into your work that can lead to surprising results. In the end it was a very inspiring speech which turned out to be one of the most popular as well.

Final vote: 8/10

related links: www.joshuadavis.com , www.once-upon-a-forest.com

Brendan Dawes – ‘If it ain’t broken, break it’ (inspirational talk)

Our first inspirational talk was with Brendan Dawes. Brendan’s speech wasn’t based mainly on Flash or Actionscript, or on any other programming language. He talked about feeling and emotion: it is not hard to see from his works that Brandan is fond of movies, and what he wanted to denote and share with us (I think) is how methods and techniques from other media can be used in our everyday work. Hillman Curtis supported this concept in his talk later and told us how similar approaches could be taken in film making and design. Brandan gave us examples on the use of surprise and suspence factors inherited by movies in a web interface. To prove this concept he showed us a website where the mouse cursor was hidden/altered in response to user interaction and how the ‘shock’ made the page memorable for the visitor. Even if some of the experiments weren’t working due to technical issues I can say that the speech was absolutely enjoyable and funny (Brendan from the tales of his close friend John seems quite a comedy character). Absolutely loved his final video turntable session.

Final vote: 8/10

related links:www.madebymn.co.uk , www.brendandawes.com

Tuesday

Craig Swann - ‘perceptive interactions +alternative interfaces’
Craig Swann from crash!media.com has given the best speech on interaction design and flash I’ve heard so far. To be honest I knew very little about him before FOTB but his works are really jaw-dropping. Craig is mainly an interface/interactive designer and he examined interaction under 3 different sensory fields: sight, touch and sound. His many experiments  (and we have seen a small part of them) are conceptually stunning and beautifully realised. Craig has one of the rare genius qualities that makes something look really simple but beautiful. My favourite experiments were the webcam ones on the perception of time but only because I haven’t seen the physical ones. My craving for physical computing was partly satisfied in the end when Craig embraced a MIDI guitar connected to his computer and modulated the video signal of the webcam attached to it with flash.

final vote: 9/10

related links: www.crashmedia.com

Mario Klingemann - ’2d or not 2d that is the question’
From what I saw, Mario is a super coder. Some of the things he’s working on are mind blowing. For the little I’ve played with bitmaps in Flash it’s incredible to see how far Mario pushed the boundaries in this field. He presented a prototype of magic wand for flash to be included in a photoshop-like flash based application (!), and some bitmap collision detection experiments. After the impressive showcase of his trick bag, Mario went on a final demonstration of his custom cam color detection where he exhibited a final finger dance to the notes of Vera Lynn’s “We’ll meet again”. Seeing a ultra-geek like Mario setting up a show like that after a good hour of code talk was absolutely unexpected.

final vote: 8.5/10

related links: www.quasimondo.com

Erik Natzke - ‘Beyond the knowledge – the art of play’ (inspirational talk)Obsessively pre-announced and suggested by Jon, Erik had the second (and last) ‘inspirational talk’ of the conference. I first met the impressive figure of Erik while we were preparing the goodies bags the first day. In this regard I have to say that Internet makes people smaller as seeing Erik walking around using his little new MacBook was quite impressive. Imagine a bear playing with a cat and you’ll have the picture. Anyway, he is probably one of the ‘hybrids’ that his friend Joshua Davis talked about: altering his algorithm outputs with image editing programs. Erik produces breathtaking abstract pictures using Flash, and tiles the outputs on a large image using Air and then edits the whole result in Photoshop. Erik’s work like Robert’s and Joshua’s is deliberately much closer to fine art than graphic design (if the boundaries of the two disciplines with the advent of computational processes are still defined). Erik talked about how a commercial work could make the basis for a personal artwork. Therefore to not discard the code we produced for a commercial work as it could be useful for a personal project and vice versa. In the end the prank he played on exporting flash by dragging swfs on Photoshop windows got many people from the audience excited. A big plus for personality.

final vote: 9/10

related links: jot.eriknatzke.com

Wednesday

Markos Weskamp - ‘Visualizing time’
Markos’speech was a great surprise. To be honest I didn’t remember his name or his works at first, but I attended his lecture because I was quite intrigued by the title. He started unrolling a big roll of paper in front of the stage in order to show us how to portray time on a big scale: from the big bang to human life. The stripe of paper was long enough to fill three times the theater width, and at its beginning there was the Big Bang and at its end the present age. It turned out that mans life on Earth is just 3 millimeters of the whole thing. With these observations Markos went on explaining the difficulties that can occur when visualizing big amounts of data. He showed us many examples of his work including a visualization of the Tree of life (the list of all species from bacteria to mammals that have lived on Earth) and algorithm for visualizing informations such as trimap filters and so on. Then he continued with a little showcase of his past works and it was here that I realized that I’ve seen his works already a few years ago and they were brilliant. I think I’ve seen a cloud tag for the first time in one of his websites. Great stuff!

Final vote: 9/10

related links: www.marumushi.com

Dr Woohoo - ‘Dr Woohoo reveals the secret techniques behind his artwork and In The Mod‘

I met Dr. Wahoo the first day of Flash in the Beach. He and his wonderful haircut were going around with his friend and co-citizen Jared the first day we arrived. Dr Woohoo showed great interest in the speakers at FOTB and in fact he was present at almost every speech I went to. His speech was introduced by a video on his latest colour experiments based on famous paintings. The work of Dr. Woohoo is in fact mainly centered on color study and color analogies amongst different visual artworks. What really strikes me about his works is the intricate spaghetti-like process in producing images and the multiple applications that he uses for a single piece. The other big chunk of his speech was dedicated to In the Mod which reassemble all his color experiments and also shows an interesting history of the use of colors by a single artist. The top feature of his speech was the fact that he managed to connect everything together by creating palettes for Adobe applications (Photoshop, Illustrator and After effects) and Processing that dynamically downloaded color swatches from In The Mod.

Final vote: 7.5/10

related links: www.drwoohoo.com

Jared Tarbell - ‘Algorithms to fill space‘

The last speech was from Jared Tarbell, and it would probably deserve a post of his own. Most of the people that I know that were fascinated by designing with code started wrapping their head around (i.e. copying) the experiments from levitated.net. I think there’s a main cause behind this big interest around his work. The programming approach that Jared has goes beyond simple aesthetics and eye candy and delves deeper into the ground of examining nature and behaviour by the use of maths and computing.

During his speech Jared was showing us the computations of his experiments alongside carefully selected music. This way of showing his experiments alongside an entertaining factor, amplifies a feeling that I usually have after coding and seeing the results of my work. The music sustains the feeling of having generated something with its own rules, a little world apart. The more appropriate the music the more narrative power the world will have. The lesson that I got from this speech was above all to keep care of the world you create, keeping special attention to its core reactions; being it a game, a still image, a creature simulation or an interface. Jared Tarbell had a standing ovation from my neurons.

final vote: 10/10

related links: www.etsy.com , www.levitated.net , www.complexification.net

Conclusions

Being my very first webdesign related conference I’ve attended, it was greatly rewarding. I don’t know if it was Brighton, the family ambiance that welcomed us there, everyone playing with the Wii at the Adobe stands, or something else but I can say that the atmosphere at FOTB was incredible: instead of finding serious professional speakers in suits I was surrounded by guys that could have been hanging out with me at school. You could see uber geeks turning into party animals in the span of a few hours. I have to also say that every single speaker I talked to was amazingly open minded and ready to help. This may show something about the community spirit this job creates.

thanks to John Davey again to let me take part in this.

See you next year in Brighton!

As I really needed to show my friends back in Italy this beautiful land I’m living in, last weekend I developed a little photo viewer applet that lets you take a look at the pictures in a very quick simple way

It’s an XML photo gallery that let you see the photos as you were shuffling them from a bunch.

In order to shuffle you have to take the photos to the edge and the photo will reach automatically the bottom of the bunch.

For those of you who want to know the place is Portreath and no I’m not in the pictures as I was taking them! I also made a video here.

see this experiment
As you can notice there are no thumbnails and even if there’s a chance to easily add some, I prefer to leave this as it is. Maybe in a more complete project I will add some widget with a thumb scroller.

Things to do

I’m quite satisfied with the shuffling interface but I still would like to improve something:

• Add Keyboard interaction
• edit - Improve pulling out images from the middle
• Improve physics performance
• Shuffle in both directions
  

Source

You can find the source of this here:

as + fla + XML
images

History

edit [23-10-07] - Added possibility to shuffle photos in the background, added visual clues for shuffling directions, improved rotation behavior

edit [01-11-07] - Captions added. Keyboard interaction included.

Last saturday I developed an ActionScript 3 RSS reader for my WordPress blog feed. It reads the posts from my blog divide them into categories and then populate each category with the thumb of the posts.

It’s an handy tool as it gives a quick glimpse of what I’ve been doing lately and doesn’t make you browse the whole history of my blog just to see an experiment.

see the experiment

Source

My first problem was to first recover how many categories there were and then populate them.
Hard coding the categories in fact would have been a little bit awkward for the main purpose of it (being completely automatic) and also I didn’t want to include the category free for all which is the category for non-experiment-related posts. I came up with this code:

private function createCategories():void { 	for each (var cat:XML in _items) {
 
if (_categories.length > 0) {
 
if (_categories.filter(checkCat) == false) {
 
if (cat.category[0]!="free for all") {
 
var cv:CategoryViewer=new CategoryViewer(cat);
 
_categories.push(cv);
 
}
 
}
 
} else {
 
if (cat.category[0]!="free for all") {
 
var firstCv:CategoryViewer=new CategoryViewer(cat);
 
_categories.push(firstCv);
 
}
 
}
 
}
 
function checkCat(element:*,index:int,arr:Array):Boolean {
 
if (element.catTitle == cat.category[0].text() && cat.category[0]!="free for all") {
 
return true;
 
} else {
 
return false;
 
}
 
}
 
populateCategories();
 
}

This basically says:

for each post in the blog check if the post has been already inserted in the _categories array (using the Array method filter with a callback function), if not be sure it is not “free for all”.

Then make a new categoryViewer object passing to it the post (cat) and finally push the categoryViewer into the _categories array.

Note that I’m checking the category title (catTitle) against the first element of the post.category node. So if I have a post with several categories I’ve to be sure that the first category I set in wordPress is the one I want.

In the constructor of the category class I will have:

public function CategoryViewer(cat:XML):void {
			catTitle=cat.category[0].text();
// and so on...
}

After creating the categories populate them:

 private function populateCategories():void {			for each (var item:XML in _items) { 			_categories.filter(checkTitle);
 
}
 
function checkTitle(element:*,index:int,arr:Array):Boolean {
 
if (item.category[0]==arr[index].catTitle && item.category[0]!="free for all") {
 
arr[index].posts.push(item);
 
return true;
 
} else {
 
return false;
 
}
 
}
 
_categories.forEach(positionElement);
 
function positionElement(element:*,index:int,arr:Array) {
 
element.onComplete();
 
if (index>0) {
 
distance+=arr[index-1].posts.length*80;
 
if(distance<arr[index-1]._tb.width+arr[index-1].x)></arr[index-1]._tb.width+arr[index-1].x)>
 
element.x=distance+arr[index-1]._tb.width-30;
 
} else {
 
element.x=distance;
 
}
 
} else {
 
element.x=0;
 
}
 
addChild(element);
 
 		}
 
}

With the same principle this time for each post run through each category, if the name is the same it push the post into the respective categoryViewer posts array.

If this is any clear and needs corrections or you just liked it as it is, just let me know!

The first one is a font “randomizer” based on the fontOutlineSystem library by Dave Billinger. I used this one for a poster of Fuzzylogic nights here in Falmouth. I’ll post some pictures when we’ll hung these around.

The second one is an example of Lorentz attractors in action.
The next step I’d like to take is to make each point of the font the start point for the attractors. Maybe inserting some variations in the trail. Let’s see how it goes this week.

see first experiment
see second experiment

In these hot summer days I had some fun making alphabets out of funny things. In my recently acquired ultra-recycling attitude (Cornwall is crazy about it) I was wondering around this filled-with-wonders student house to make something cool.

While going to the kitchen I found out that our forgotten project to make some hoummus that could beat the Tesco’s one turned into something beautiful. After making some tests, in the end I decided to make an alphabet.

So here‘s the result when peas gone bad meet a weird typo guy.