update:
I've been off for a week after finishing a project and moving house, in that time this domain dropped and just prior to that appeared to get 20k+ reads which is a bit omg. Anyways many comments all over the net, and certainly on reddit (comments here) - and thus just to clarify, the entire content of this post is purely a note to myself, and to help me in those times when you can't get going in the morning or such like.. in no way am I suggesting you don't plan or do things properly whenever you can - this is literally just some ways of getting through the day. Thought I'd made that clear and most people got it ;)
end update:

This one is more for my own reference, but sharing anyways as it may help others. In numerous scenarios it is really hard to "get going" when you're trying to code, particularly under the following circumstances:

* You haven't started coding till late(r) in the day
* Emails, Blogs, Social networking have taken up more time than expected and/or distracted more than anticipated
* You've just completed a deliverable, milestone or task.
* You're tired!

All of these are virtually daily occurances in the coding world, and here are the methods I've used to get going again.. no particular order, just a list.

Under all circumstance, avoid planning!
Planning is one of those things you can't do unless you are all ready in the flow, whether this is because you've just had a client meeting, a long discussion, or read a full spec - it's not the thing to do to get your flow going, all you'll do is plan nothing, plan badly, or stare blankly at the screen / paper.

Don't read related material to get you in the flow.
This will purely serve to distract you, make you think about doing things differently, doublt what you've done or worse throw you in to planning mode - fact is you won't be planning "your" app though, you'll be planning "some" ideal app or scenario.

Pick the smallest task, whether complex or not, and just do it!
Doesn't matter what it is, so long as it's coding a little part of the app, or modifying part of it, then it'll do. It could be adding an extra field to an object or table, popping in some validation, anything small and simple. It really doesn't matter if you do it right or wrong; you're not doing it to sign off a task, you're doing it to re-aquaint yourself with your system, by the time you've been through X lines of code you'll be back in work mode and firing on all cylinders, well on your way to getting zoned.

Music, Headphones, Repeat.
You'll know the genre that suits you, personally I find repeating an album or even song fades me in to the zone and keeps me there. The repetitiveness of the tune keeps you there, because just as a phone call can distract you, so can a change in tune to something at a different tempo or worse a completely different genre.

Don't cram!
If you've only got 15 minutes before the next sizable interuption, forget it, don't do anything just chill - make a coffee, smoke, whatever. You're not wasting time you're saving your zone, you can only get zoned a couple of times a day, so don't get zoned for only 15 minutes - save it and get zoned for longer later on.

Speedcode
Why not? as nike say "just do it", if the code has 10 bugs but is finished in half the time then you've done good, that gives you loads of time to fix the bugs, and more importantly you get to those moments where you realise x,y&z need to be changed much quicker. Not only that, but would you rather have a week to go and have a list of 80 bugs, or a week to go and 2 major deliverables a week overdue..

Communicate for no reason.
Often a major focus is simply talking to somebody else on the same project as you, whether its the client or a workmate, and the more stressed they are the better, they'll not only blast you with things but their urgency / stress will often convey straight over to you and focus / zone you instantly.

Do the thing you know, not the thing you don't.
Inline with "don't plan" and "pick the smallest task", always pick something you can already do (if possible), as with everything else, the things you don't know are much easier when you're already zoned, not only that but you'll be more focussed when doing the thing you don't know so less likely to over spec / over code it.

Don't code other things!
nothing on earth will kill your project like working on something else, every minute you spend on another script or app is like an hour lost on what you should be doing, and with every minute that passes you're getting closer and closer to utter project failure - and hence why most open source projects are dead.

Remember, the key to forced coding is just to get you in the zone, and ultimately boils down to just getting stuck in there with some lines of code on your project.

Works for me anyways [most of the time] - if anybody has anything to add (constructive) then please do!

Regards - nathan

The Point - Events are useful everywhere even when you don't have a UI, the main reason for building this was to create a kind of "hook" system for php. Often we create multi site systems where each implementation of that system has different client specific considerations; consider a system where one client wants all of there images to go to amazon s3 instead of being saved on the host like your other clients. With this system you can simply:

1. throw an "storeUpload" event which is cancelable
2. register a default event listener which listens for "storeUpload" events and provides default functionality, saving the upload and setting the location (ur) on the event.target
3. on one site register a custom event listener which listens for the "storeUpload" event, uploads to amazon s3, then cancels the event and set the event.target to the s3 url instead

as you can see, with this you can keep the codebase of your multisite application the same and simply hook in to events whereever you want.

the system consists of 2 public classes:

Event

The base class for all events, provides event type and cancelable; with typical usage you create a new event, then dispatch it when ready.

• __construct( $type , $cancelable=FALSE )
  create a new event listener - if you extend the Event class you must call this with parent::__construct( $type , $cancelable );

  $type - string, event type eg "debugEvent"
  $cancelable - boolean, provides cancelation functionality, so you can prevent further event listeners from firing thus in effect overriding them.

  throws InvalidArgumentException if $type is not a string

• cancel() : void
  cancels an event, only if it is cancelable
• isCancelable() : Boolean
• isCanceled() : Boolean
• getType() : string
• getTarget() : obj
  target always contains the instance which dispatched the event.

EventDispatcher

All classes which wish to dispatch events must inherit from EventDispatcher (like in most languages), this class provides:

• addEventListener( $type , $callable , $owner ) : void
  adds an event listener, this may be a function, a class method or a static class method.
  note: a current limitation is that event listener methods must be public

  $type - string, event type eg "debugEvent"
  $callable - string, the function or method which is to be called when event $type is dispatched
  $owner - mixed, used when $callable is a method, can be either an object instance, or the string name of a class for static methods.

  throws:
  InvalidArgumentException when type or callable isn't a string
  Exception('unknown method / function')

• removeEventListener( $type , $callable , $owner ) : void
  removes an event listener that has been added with addEventListener, this only removes a single event listener each call, so if you have 3 identical event listeners you will need to call this method 3 times to remove them all.

  arguments are the same as addEventListener - throws no exceptions, always returns void

• hasEventListener( $type ) : Boolean
  checks if any event listeners are registered for event $type; always returns boolean true or false.
• dispatchEvent( Event $event ) : void
  the obvious one, dispatches an event and notifies all listeners.

Notes:

The event dispatcher implements a function which hides all instance properties starting with __ from the serialize process, thus hiding the events and meaning your current serialization process will still work, additionally you can utilize it to hide any properties you don't want to be serialized.

I've tried to make the classes as simple, small and practical as possible, they execute rather quickly and shouldn't make any speed difference to your application - do however be aware that loosely coupling and entire system could allow coding errors to creep in, so maybe don't use it everywhere - but then PHP isn't strict anyways so..!

Download

You can download the PHP Event system here (3 classes + example, 4.2k) - hope somebody finds it useful!

Technically, this is a really stupid thing to do, and move over it isn't the cleverest thing to do, regardless though I've done it just for the hell of it.

The aim of this post is to prevent anybody else from making the same stupid mistakes! end product isn't too bad though.

To give a quick over view, Sound.extract() gives access to raw sound data, as a ByteArray of floats; typically you setup two sound objects, the first loads the sound data from source, the second requests sound data from the first at regular intervals, extracting 2048-8192 samples per request and then playing it - idea is that in the method that requests the samples you can quickly pre-process it before its played and make some nice effects.

So my illogical train of thought was to visualize the raw sound data in real time as it plays to create some nice effects.

The Numbers Game

Music in flash is sampled at 44100 Hz Stereo - 44100 samples per second,  per channel - we're getting it at intervals of either 2048, 4096 or 8192 samples - meaning our visualization can run at either 21.53fps,  10.76fps or 5.45fps - which lets be honest is hardly going to make a nice smooth effect is it.

So our only option is to somehow synchronize the "timeline" (the screen updating) with the raw sound being played.

The Approach

I decided the only real way to do this was to make a continual buffer of sound that could be read independently by both the SampleDataEvent and by my own code to do the visualizations - after some playing around with numbers I finally gathered that if one was to run at a framerate of 63fps and render the 700 samples per channel at a time then I'd be consuming (63*700 = 41000 Hz / samples per second) = the data in realtime.

To make this possible I needed some kind of fast buffer to store the data in, obvious choice was fast memory which is a ByteArray and can be read and written to directly.

More number came in to play when the size of the buffer needed calculated, had to be a multiple of both the render speed (700) and the data feed rate (2048); which is a buffer of 358400 samples, or sample requests. (358400/175 = 2048).

To get the data in to the buffer I was finding the next offset at which i should write the data to my buffer, sound.extract'ing the data in to the buffer and using a modulo to create wrap around so after 175 samples data was written back at the start.

This covers getting the sound in to a fast memory buffer without consuming too many resources, next up to get it out and render it!

The Rendering

Rendering uses the same idea of requesting samples from the buffer, however this time the magic number is (358400/700 =) 512.

I implemented a simple framecounter that increments each frame and resets to 0 every 512 frames (giving the loop on the buffer), then quickly read 700 pairs of samples from the buffer each frame.

The left channel float value is then scaled by 300 used as an X position, whilst the right channel creates the Y position - both x and y are then fed to setPixel() on BitmapData whilst a simple calculation of 0xFFFFFF*leftChannel / 2 sets the color value.

Each frame the 700 dual channel samples are rendered creating 700 realtime 2D particles (hopefully) in time with the sound, and a simple blur filter is used to clear the previous frame in a nicer way.

The Point

It's all stupid, pointless and just stick to computeSpectrum - you only get 256 samples rather than 700 but it's perfectly in time and allows you do something other than exactly 63 fps; further it'll always be in time with the music.

The Result

Well, it's here - I've got it tuned in to my other halfs radio station citybeat radio at the minute (which i wholeheartedly recommend for any electronic / trance music fans) and well.. here it is with source.

Ralph Hauwert created a great demo of the power of Flash 10 / PixelBender / Alchemy that you're probably familiar with, then Joa Ebert made a fantastic Flash 9 pure AS3 version that's very impressive, then I gave it a go with haXe and flash.Memory which turned out rather well too.

It's been bugging me for some time that the code just wasn't real world enough though - so I thought I'd give it a go using AS3 and flash 10, using only native methods and no fancy 3D calculations that us commoners don't quite get. In short I've stripped it down and turned it into a simple class which uses flash 10 Vectors and Matrix3D.

I've taken a different approach with these demo's, rather than all in realtime, you simply click and it runs the enterFrame code once and displays the time in ms that it took. There is however a final realtime version using this code at the end.

Four examples are provided, Pure AS3, then the same code converted to haxe, then the haxe "inline" keyword added and finally the whole thing working in realtime.

AS3 Flash 10 Version with Vector / Matrix3D

Here's the main source used:

private function enterFrameHandler( event : Event ): void {
 var d : Date = new Date();
 var t : Number = d.getTime();

 updateMatrix( mouseX , mouseY );
 _matrix.transformVectors( particleVector , realVector );

 var pxs : Vector.<uint> = new Vector.<uint>( PIXELS , true );
 var po : int = 0;
 var a : int = 0;

 while( a < PARTICLES ) {
   po = pointToOffset( int(realVector[a*3]) , int(realVector[(a*3)+1]) , WIDTH );
   if( 0 < po && po < PIXELS) {
     pxs[po] = increaseColor( pxs[po] );
   }
   a++;
 }
 // update display
 this.bitmapData.lock();
 this.bitmapData.setVector( this.bitmapData.rect , pxs );
 this.bitmapData.unlock( this.bitmapData.rect );

 d = new Date();
 textField.text = "single frame time: " + ( d.getTime() - t );
}

private function updateMatrix( mx : Number , my : Number ) : void {
 tx = tx + ((mx - tx)/10);
 ty = ty + ((my - ty)/10);
 _matrix.identity();
 _matrix.appendRotation( tx , Vector3D.Y_AXIS );
 _matrix.appendRotation( ty , Vector3D.X_AXIS );
 _matrix.appendTranslation( CX, CY, 10 );
}

private static function increaseColor( c : uint ) : uint {
 return c < MAXCOLOR ? c + SHADE : 0xFFFFFF;
}

private static function pointToOffset( vx : int , vy : int , vw : int ) : uint {
 return vx + ( vy * vw );
}

And here's the AS3 result (with full source)

The same code in haXe

next up I spent literally 2 minutes converting this to haXe syntax, changed no functionality - just slight syntax changes between the languages.

private function enterFrameHandler( event : Event ) : Void {
 var d : Date = Date.now();
 var t : Float = d.getTime();

 updateMatrix( mouseX , mouseY );
 _matrix.transformVectors( particleVector , realVector );

 var pxs : Vector<UInt> = new Vector<UInt>( PIXELS , true );
 var po : Int = 0;
 var a : Int = 0;

 while( a < PARTICLES ) {
   po = pointToOffset( Std.int(realVector[a*3]) , Std.int(realVector[(a*3)+1]) , WIDTH );
   if( 0 < po && po < PIXELS) {
     pxs[po] = increaseColor( pxs[po] );
   }
   a++;
 }
 // update display
 this.bitmapData.lock();
 this.bitmapData.setVector( this.bitmapData.rect , pxs );
 this.bitmapData.unlock( this.bitmapData.rect );

 d = Date.now();
 textField.text = "single frame time: " + ( d.getTime() - t );
}

private function updateMatrix( mx : Float , my : Float ) : Void {
 tx = tx + ((mx - tx)/10);
 ty = ty + ((my - ty)/10);
 _matrix.identity();
 _matrix.appendRotation( tx , Vector3D.Y_AXIS );
 _matrix.appendRotation( ty , Vector3D.X_AXIS );
 _matrix.appendTranslation( CX, CY, 10 );
}

private static function increaseColor( c : UInt ) : UInt {
 return c < MAXCOLOR ? c + SHADE : 0xFFFFFF;
}

private static function pointToOffset( vx : Int , vy : Int , vw : Int ) : UInt {
 return vx + ( vy * vw );
}

And here's the identical haXe result (with full source)

Optimized haXe Version

Next up I spent another minute optimizing (literally, one minute) - haXe supports inlining of variables and methods, so I added the inline keyword to the static vars and two of the static methods (increaseColor and pointToOffset)

private function enterFrameHandler( event : Event ) : Void {
 var d : Date = Date.now();
 var t : Float = d.getTime();

 updateMatrix( mouseX , mouseY );
 _matrix.transformVectors( particleVector , realVector );

 var pxs : Vector<UInt> = new Vector<UInt>( PIXELS , true );
 var po : Int = 0;
 var a : Int = 0;

 while( a < PARTICLES ) {
   po = pointToOffset( Std.int(realVector[a*3]) , Std.int(realVector[(a*3)+1]) , WIDTH );
   if( 0 < po && po < PIXELS) {
     pxs[po] = increaseColor( pxs[po] );
   }
   a++;
 }
 // update display
 this.bitmapData.lock();
 this.bitmapData.setVector( this.bitmapData.rect , pxs );
 this.bitmapData.unlock( this.bitmapData.rect );

 d = Date.now();
 textField.text = "single frame time: " + ( d.getTime() - t );
}

private function updateMatrix( mx : Float , my : Float ) : Void {
  tx = tx + ((mx - tx)/10);
  ty = ty + ((my - ty)/10);
  _matrix.identity();
  _matrix.appendRotation( tx , Vector3D.Y_AXIS );
  _matrix.appendRotation( ty , Vector3D.X_AXIS );
  _matrix.appendTranslation( CX, CY, 10 );
}

static inline function increaseColor( c : UInt ) : UInt {
  return c < MAXCOLOR ? c + SHADE : 0xFFFFFF;
}

static inline function pointToOffset( vx : Int , vy : Int , vw : Int ) : UInt {
 return vx + ( vy * vw );
}

And here's the inlined haXe result (with full source)

Summary

In under five minutes and with tiny code changes we've gained well over 100% speed increase; using nothing fancy and the speed rivals all the heavily optimized versions using every trick in the book.

The final result (simply with the event listener changed to Event.ENTER_FRAME and fps added) is available here.

Been doing some more playing with Perlin Particles, this time going for more natural, and indeed more useful!

Full source and comments included with this one: 3D Perlin Particle Light Cloud

I was flicking through Joa Eberts site the other day and came across a post he did, speed coding 2; the product of which was a load of 2D perlin noise particles that looked.. well great! Kindly Joa gave me permission to dissect, modify and port it to haxe. Ultimately though I ended up recoding it all from scratch, I did however borrow the nice color transform code from the original though, they're damn nice.

Typically you'd call BitmapData.perlinNoise() to generate a 2 color, 2 octave fractal perlin noise image - you then take the 0-255 color values for both of the channels, scale them and use them as your x & y coordinates.

I decided to twist it a bit and try 3D, so in the experiments I'm generating a 3 color, 4 octave fractal perlin noise image then using the scaling the values to provide x,y,z coordinates. Then mapping each particle into a 3d space, calculating it's color by merging values of particles which land on the same display pixel together.

Enough of the going on anyways, I'll post the full code for the examples once I've cleaned and commented it - all done in haXe of course.

First off, we have a 3D version of Joa's original; in this one the particles are all mapped into an imaginary cube and some nice effects added : 3D perlin noise particles tracing a cube.

Next up I thought I'd try some variations:

• Lazer tracing a cube (runs v fast)
• Perlin Noise, In a Box!

Quite impressed with the base performance here from haxe, I get 100fps on the lazer tracing example, and circa 45-50 fps on the versions with effects or more complex algo's.

liking perlin noise (and haXe).

Doesn't need much of an introduction, after my previous post "Amazing what happens when you modify a Sphere"; I realised that I'd missed a few combinations, and as such thought it'd be a good idea to finish off the obvious combinations.. you know, to see what they looked like.

One of the best, and the one that makes the most sense formula wise is M16.. here's the formula for it

x = Math.cos(a) * Math.cos(r);
y = Math.cos(a) * Math.sin(r);
z = Math.sin(a) * Math.sin(r);

makes sense to me! anyway, on with the show - here are the rest:

• M8
• M9
• M10
• M11
• M12
• M13
• M14
• M15
• M16

Taking the 3d particle primatives a bit further (and adding color) I've found that some very nice and rather interesting models can be made when you simply change a sphere a little bit.

Normally I'd do these in order, but in this case I'd recommend you checkout M4 first to get a taste (it's certainly my fav).

Before the list, a very brief description; here we have the code to generate a sphere:


for( i in 0...PARTICLES ) {
a = (PARTICLES/360)*i;
r = (i/PARTICLES) * Math.PI;
x = Math.cos(a) * Math.cos(r);
y = Math.cos(a) * Math.sin(r);
z = Math.sin(a);
}


now all we are going to be doing is adding in some steps, or changing the odd cos/sin with cos/sin/tan - nothing complex.

• M1 Variation
• M2 Variation
• M3 Variation
• M4 Variation (my fav)
• M5 Variation
• M6 Variation
• M7 Variation
  

Now.. M7 is a rather interesting one.. because it has two very interesting variations (imho) primarily the eye which produces a flat, yet 3d shaded circle..?

• M7 Strange Variation - The Eye
• M7 Strange Variation - The Feather

In addition there are a few more which are created by simply stepping colors or values:

• 3D Abstract Rainbow
• One, Three, TwentyFour
• Three, Six, Twelve
• Six, Six, Twelve

again, thanks to haXe for allowing this - remember it's all just particles rendered in realtime.

Following earlier unpublished work, and my version of 300k particles in flash, I found that I've created a nice little setup for rendering the results of mathematical functions in flash; specifically rendering the results as 300k/500k particles - I'm kind of fascinated with particles and plotting functions, as are many others - my preference is to work with strange attractors; however I thought I'd shoot right back to basics and see what can be made with primatives and modifications of.

pre-warning, if you're looking for eye candy, forget it - these are simple practical examples and a bit boring, but useful if you need to know how

Starting with the simplest we have the Particle Cube - 500k random particles plotted in 3d space within an invisible cube. Then I modified it a bit..

• Sine Modified Particle Cube (it's all skewed)
• Sine and Time Modified Particle Cube (double cube with a flow of particles between)
• Sine, Tan and Cos Modified Particle Cube (one function applied to each axis)
• Alternative Flattened Sine, Tan, Cos Modified Particle Cube (patchwork circular flattened cube!)

Next up the Particle Sphere - another 500k particles in 3d space, all random, and then some modified versions..

• Spherical Circles (evenly distributed particles, creates a single line wrapped around a sphere)
• Emphasized Particle Sphere (double spaced to create a messy particle sphere - but more like particles)
• Half a Sphere (go on, guess)
• White Particle Bubble (evenly distributed to create a kind of bubble effect)
• Split Sections of a Sphere (two opposing but differing chunks of sphere, again all particles, like a swing bin lid)

And finally a couple of simple experiments..

• Random Warped Particle Plane (random x, random y, atan2(x,y) for z)
• Beach Bubble (the white bubble with some colour, like a beach ball but translucent)

In summary, it's good to see how easily different effects and primatives can be build, and even better to see how easily they can be modified with basic mathematical functions. (and how good haXe is :p)

Seeing as most of the audience of this blog will be using more recent browsers, I've opted for XSLT templates and small XML descriptors for each item - this saves me writing tonnes of html, saves the server some weight, saves you some bandwidth and let's me palm off all rendering on to the client.

Inkeeping with the spirit of experiments, one of the main reasons I've done this is to see how the xml documents get listed in google (if at all); and to check if analytics works with XSLT.

On this note, I had to do a little bit of fiddling with the recommended embed code from google to get it to work; if anybody else hits this problem here's a modified version.


<script src="http://www.google-analytics.com/ga.js" type="text/javascript"></script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-3391780-6");
pageTracker._trackPageview();
} catch(err) {}
</script>


And as for the listings, well thats just a quick and dirty PHP 5 class which iterates the directories, loads them in to a dom document and spits out the xml - ultra simples.