Archive for the ‘experiments’ Category

The band

Friday, May 15th, 2009

In this insalubrious space they are not any less big, but much more tiny, more detailed. There is a petitness, a skinnyness to the refrain. A breaking wave scatters the silence of the band, falling down into a clutter of sound. The drums champ, scattered cymbals chink amongst the battering of a tom-tom. The voice a soothing chant, repeating words not of this world, a lullaby for worldless children. The sound is soft and round and scared, a late mother of a toothful dog-child. There are strings skittering around the bowed double bass, wilful imps amongst a stirruped back beat. A piano tramp corrals a buffoonery of darting horns against pitch deep grumbling accordion. The bright new brass chimes in delirious arpeggios, scaling and spiralling around the droning chord walls. The tale of the song is pitiful sweet and alluring, recants of sonabulent doll-fiends and dredging drug slaves. The scantity of light lives against black back stories. Whilst it could be mere precious starling chirrups, the grissly ribs of the song poke through, revealing meat and cartilage that brays of the bravura adventures and callous endeavours of youth untethered. It is at once gaseous and graceful, yet equally stumbling, sod laden, wall-eyed and arrogant.
It is as elemental as any sound given rude form, punchy and rueful in a recumbent back room, belying its paunchy surrounds to bruise the sensibilities of the audience with its delicate and divisive incantations. Once over, the taste of the melody hums in the belly of the ear like the virginal stealing of a straying uber-mensch. The band stagger off, drained and bloodless, spent. We splinter home to wonder at the world made unreal by these strains of eloquent guttery, too revived to fear the workful grey dawn, happy and dirty and whole.

It is the music that makes us.

First steps with Flint Particles

Friday, January 16th, 2009

I’ve been meaning for a while to have a look at Flint and so here are my first steps with it.

First off, I like the way it is arranged. It is incredibly modular. Whilst this probably has implications as far as optimisation (although it seems to handle a whole load of particles pretty nicely), it does mean that any kind of particle system can be plugged together easily.

There are 2 basic objects that need to be instantiated – an emitter and a renderer. There are a few different types of renderer, for different types – Bitmap, DisplayObject and Pixel.

Once you have your emitter created, then the behaviour is adjusted by adding 4 things.

Initialisers.
These are used when a particle is created, so things like colour, mass, size, image to use etc.

Actions.
These are applied to the particle every frame. Things like gravity, collisions etc.

Zones
This an area of the screen, commonly a point, line, rectangle or circle. Zones can be used for some initialisers, for example position and velocity. A Zone used for position will be used to randomly place a particle in that area. The velocity zone creates the velocity based on the time taken for the particle to travel from [0,0] to the randomly selected point. Zones can also be used as actions. For example, a DeathZone is an area that removes particles that enter (or leave) it, and a Jet zone is one that adds a velocity to the particle if it is inside.

Activities
These modify the behaviour of the emitter every frame, for example making it follow the mouse or rotating.

Most of these have a 2D and 3D counterpart.

Right. Enough explanation. Here’s the first experiment:
(Please note there is a bug (in my code) that occasionally comes up where the particles are duplicated endlessly. You have been warned!) This has now been fixed :)
(more…)

Back To The Trees! Source

Wednesday, September 24th, 2008

Here’s the source from my last tree experiment. Please note that it’s the source folder from Flex project, but of course you can just use the classes…

If you do use it in a Flex Project, you’ll need to import the playerglobal.swc from Flash for it to work (it uses BezierSegment from the fl.motion package)

get the source code

I should add that this code is far from optimised. The bezier curve class I’m using wasn’t really designed for this, so it is very slow when smoothing as it iterates over all of the points. I’m going to be optimising this soon so keep an eye out!

Back to the trees!

Wednesday, September 24th, 2008

I’ve been having a play with generative trees again. I’ve been meaning for a while to integrate Bezier curves into my trees for some time, but haven’t had the time to update my BezierChain class to make it accept any number of points. Well, in my paid work, I had to do exactly that, so I thought it was time to put them in. Click the link to see the results!

Random trees with Bezier Curves

I’ll post up the source code if anyone is interested…

Yahoo AS3 APIs Rock!

Wednesday, May 7th, 2008

Yeah, I know the world and his dog probably know about these already, but I just discovered them ok?!

They pretty much rock!

Get ‘em here

The one I was interested in (watch this space) was the weather API. I downloaded the package, fired up Flex Builder, stuck in a Weather Service instance, some event listeners and told it to get me some weather. Which it did! The whole process took me all of 3 minutes. That’s how it should be :)

Here’s the class I used (the code I used is for Brighton, UK, btw):

package
{
	import flash.display.Sprite;
	import com.yahoo.webapis.weather.*;
	import com.yahoo.webapis.weather.events.*;

	public class WeatherTest extends Sprite
	{
		private var _weatherService:WeatherService;

		public function WeatherTest()
		{
			super();

			_weatherService = new WeatherService();
			_weatherService.addEventListener(WeatherResultEvent.WEATHER_LOADED, onWeatherLoaded);
			_weatherService.addEventListener(WeatherErrorEvent.INVALID_LOCATION, onInvalidLocation);
			_weatherService.addEventListener(WeatherErrorEvent.XML_LOADING, onWeatherXMLError);

			//get all the weather!
			_weatherService.getWeather("UKXX0215", Units.ENGLISH_UNITS);
		}

		private function onWeatherLoaded(event:WeatherResultEvent):void
		{
			trace(event.data)
		}

		private function onInvalidLocation(event:WeatherErrorEvent):void
		{
			trace(event.data);
		}

		private function onWeatherXMLError(event:WeatherErrorEvent):void
		{
			trace(event.data);
		}
	}
}

Simple huh?

There’s also APIs for Answers, Maps, Search, Upcoming. They’re all well documented and logically laid out. Now get out there and start mashing up those feeds!

Experiment #15 Gradients + Trig = weird bouncy rainbow things!

Thursday, March 20th, 2008

Having some fun with my new gradient class and making sure it all works at the same time (added some bug fixes to the code base). This one I set up a loop that adds a bunch of random colours and alphas to the arrays, then chucked some trig functions at the drawing API, using the values pulled from the class using argb. Refresh the page to get a new set of random colours.

experiment #15 – gradients + trig

Download Latest Colour Package.

Experiment #14:CapStyling and Quad bezier drawing, Gradient class update

Thursday, March 20th, 2008

Not much of a change for this one – I’ve just added the ability to specify the caps style for the drawing of the BezierChains. Also, I added a new drawing mode that splits the curve into 2 quadratic beziers and draws them out using curveTo. This is loads faster than drawing a bunch of little lines, but does mean you don’t get to make nice gradiented colours. I had a look at the lineGradientStyle property, but it doesn’t follow the curve of the line. Maybe there’s a way to split up the gradient style and make it work? Will have to have a look at that one. You’ll also notice that the quad bezier doesn’t exactly follow the correct path, but that’s the price you pay for speed!

experiment #14 – caps/quad

The second thing is an update to the Gradient class from my colour package. Before it was a little bit lame, but now it rocks! The set up is the same as before, but now it allows much greater control of the elements, and you can actually get some useful readings from it.

The following methods are available:
validateRGB: checks that a specifed rgb value is within range, return t/f
step: increments/decrements the currentColourRatio value by amount
setColour: sets a colour at the specified index in the colours array
clone: returns a copy of the Gradient class

There are all of the parameters of a gradient (have a look at beginGradientFill in the Graphics class docs) that can be accessed as properties and some extra ones:
currentColourRatio: this is an integer (0 – 255) that represents a position in the gradient – this is equivalent to a possible value in the ratios array in the gradient fill.
rgb: the colour at the current colour ratio position(ccr), if you set this, it will either change one of the colours in the colour array (if the ccr is equal to a value in the ratios array) or add a new value at the ccr.
argb: as above, but takes/returns an object {alpha:Number, colour:int} and allows getting/setting of the alpha value

There’s a little more work to do – it’d be nice to be able to adjust the ratios and alpha values already in the array and delete values, so that’s on the cards for the next update.

Get it here.

Experiment #13 – Did someone say Animated Rainbow Gradients?

Friday, March 14th, 2008

Another use of the BezierChain class, this time using some Colour manipulation classes.

experiment #13 – rainbow

You can download the Colour classes I’ve used. There are 5 included in the package:
ColourSpace: allows conversion between RGB and HSV colour spaces and access to all of the colour components. conversion is done automatically or can be called as a method ie
cs.rgb = 0xff0000;
trace(cs.hue);
cs.hue = [250, 0.3, 0.4];
trace(cs.rgb);

newHSV = cs.RGBtoHSV(0xff0000);
newRGB = cs.HSVtoRGB([250, 0.3, 0.4]);

Rainbow, which allows you to set up a rainbow and cycle through the colours.

Gradient, which is a wrapper for the various parameters for a gradient fill.

ColourWrapper, which is a wrapper class for ColourSpace, Rainbow and Gradient classes.

Finally there is IColourWrapper, which is the interface shared by the colour classes.

These classes are by no means final, so use at your own risk :) Will post updates if I make fixes and give me a shout if you need help using them!

Experiments #6 – #12

Friday, February 29th, 2008

So, after a lengthy spell with no experiments, I have 7 of the little blighters to share with you! All variations on a theme, which is based on my new BezierChain class, which allows multiple Bezier segments to be stitched together with smoothing between the joins. All of these experiments use 2 segments, but experiment #8 has them all stuck together – would’ve been nicer to have a single long chain I know, but I wanted to try loads of different stuff out instead :)

I’ve started using Flex Builder to do my as3 coding, and haven’t got round to figuring out how to make it look nice in a swf, so here are links to html pages with the files:

experiment #6 – wings
experiment #7 – spider
experiment #8 – strings
experiment #9 – worms
experiment #10 – fat worms
experiment #11 – fat worms reversed
experiment #12 – tridecapus

Experiment #5 : Pregenerated tree

Tuesday, November 27th, 2007

The latest tree version. This time I’m generating the nodes all in one go, rather than onEnterFrame and then drawing them all together – it’s a much bigger processor hit, but I get to play with all the points if I want to (will be obvious why in the next revision). Click to generate a tree and drag the sliders to change the properties of the tree. I’ve tried to make sure that it doesn’t max out the processor, but be careful at high branch numbers/generations!
source code here
[kml_flashembed movie="wp-content/experiments/drawing/treePreGen.swf" height="500" width="500" /]