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)
		}
	}
}