I love HTML5 Boilerplate and use it a lot as a basis for web projects. Sometimes however, I find it still does a little bit too much for my needs and I end up removing a lot before I can get started.

Most importantly for me though, it still currently doesn’t support building with Google Closure Compiler which I tend to use both for it’s advanced code optimisations and for coding better Object-Oriented JavaScript (not to mention generating JavaScript documentation from the very same comments I write for the compiler).

So What’s Springboard Then?

Springboard is an ultra minimal JavaScript / CSS and HTML project template (or springboard).

It features a very useful ANT build file which, among other things, can:

• Refactor template files to match your project’s namespace so you’re ready to code in seconds
• Combine JavaScript and CSS libraries to reduce HTTP requests
• Compile JavaScript using the Google Closure Compiler (simple or advanced)
• Minify CSS using the YUI Compressor
• Generate JavaScript documentation using the JSDoc Toolkit
• Sanitize HTML and inject variables at compile time

Also included is a simple JavaScript Model-View-Controller (MVC) template (based on Alex Netkachov’s) which can optionally be used as a basis for your project.

Hopefully No fluff – just the very basics you need to get a project or experiment started.

Check out Springboard on github

Quick Setup

To get started, first clone the repository:

cd /your/workspace
git clone git@github.com:soulwire/Springboard.git YourProjectName

Run the setup task and enter your project’s namespace when prompted:

cd YourProjectName
ant setup
Enter the full project namespace for this project: com.domain.project

This will refactor the project template to match your namespace. You’ll then be given the option to delete the GIT metadata and disconnect from the Springboard repository…

You can build your project with the default ANT task, build

ant build

And when you’re ready, generate documentation using the jsdoc task

ant jsdoc

You should also have a look at the build.properties file as here you can add your credentials and tweak the various build settings to your taste.

A Quick Note About Blocks

Springbard uses HTML comment blocks to figure out how it should build the project. There are different types of blocks you can use:

• CSS:LIB » Third party CSS files (combined and minified)
• CSS:SRC » Your project’s styles (combined and minified)
• JS:LIB » JavaScript dependancies (combined but otherwise left untouched)
• JS:SRC » JavaScript source files (combined and compiled)

Any linked JavaScript or CSS resources outside of these tags will simply be cloned into the build directory and left untouched for flexibility.

Springboard will look at all of your pages when it builds and combine all files in all blocks of the same type. There is then a generic document ready handler, which initialises scripts for a page based on the id tag of it’s body. This is best illustrated in this example.

A Quick Note About Externs

If you’ve used the Closure Compiler before, you’ll be familiar with Externs. Externs tell the compiler not to refactor certain methods and properties, because doing so may break your code if they reference a third party library or code not being compiled. Springboard currently ships with an externs file supporting JQuery 1.5, just to get you going. You can easily generate more for your favorite libraries using this great tool by Laurentiu Macovei or others like it.

What Springboard Doesn’t Do

The primary intention of Springboard is to provide a simple but powerful project template and build file, which integrates with the Closure Compiler as well as doing the basics which you would expect; such as file concatenation and CSS minification. It’s intended to be extremely light and minimal, allowing you to take the project kernel forward in whichever way you need; whether it’s a large site build or a quick JavaScript experiment. I would imagine that future updates will strip it back and optimise it even further, as opposed to adding features.

So to be clear, it is in no way intended as a replacement for the amazing projects out there such as HTML5 Boilerplate; simply an option if you need less rather than more in certain situations.

Now fork off and start making nice things…

Related posts:

1. What The Fuck Is My Mashup?
2. Hello Dynamic Sprite
3. Perlin Noise Flow Field

Music is Ybe 76 by Subheim

I’ve been trying to find more time lately to experiment with C++ and get more familiar with the OpenGL API and to achieve this have been using the excellent Cinder library. I’m a complete C++ novice and, coming from a Flash background, it’s immediately apparent how much of the hard work had been done for you in higher level languages like AS3. Learning about pointers, memory allocation and fumbling your way around undescriptive compile errors is bit of an eye opener, although thankfully libraries like Cinder and OpenFrameworks help take a lot of the pain out of the transition and ultimately function as very exciting and inspiring tools to work with.

Up until now I’ve been keeping most of these experiments to myself (although some crop up on my Flickr stream from time to time), but I’ve decided to start sharing the processes when I can – so that you can tell me what I’m doing wrong and teach me the right way! Or, if you’re like me and are used to languages like AS3, JavaScript and Processing / Java, but are wanting to take your creative coding into other environments; maybe you can learn a little bit from what I’ve been trying.

Either way, the Noise Sphere experiment, though not particularly original; made me realise that the processes involved spanned many of the key aspects of programming that I’m both interested in but also keen to learn much more about.

The plan is to release a series of relatively quick tutorials, taking you through the process of creating the sketch you can see in the video above (and far beyond, into OpenGL shaders etc) and in doing so cover roughly the following topics:

• Setting up Cinder
• Geometry: Vectors & Matrices
• Movement & Dynamics
• Procedural Mesh Generation
• OpenGL: GLSL, Vertex & Fragment Shaders

I’m certainly not claiming to be an expert in these topics, in fact in some I’m only just getting started. But my hope is that I can share my discoveries as they happen and pass on knowledge I’ve picked up from the community, in case it helps other developers travelling along similar trajectories to myself. I’ve found a lot of amazing resources for learning, but have often felt that some of them would benefit from being translated for interactive developers such as myself, who come from more of a creative than technical background.

Pester me if part one isn’t out soon!

Related posts:

1. AS3 Particle Node Sequencer
2. AS3 Music Visualisation
3. Perlin Noise Flow Field

The fruits of a Sunday hangover; What The Fuck Is My Mashup? is an idea generator for ridiculous (but sometimes plausible) mashups.

Inspired by What The Fuck Should I Make For Dinner by Zach Golden, WTFIMM is a simple JavaScript based randomiser that takes a series of templates and a corpus of words and turns them into concepts that utilise the latest technologies, APIs and social media platforms.

I’ve abstracted the code into a simple framework which I’ve called the WTF Engine, that allows you to create a generator for any subject.

Here are a few of my favourite generative mashups so far:

• Blackberry application that generates poetry based on Yelp data
• Platform for building Wii controlled, memcached dashboard widgets for Open Frameworks enabled devices
• Windows optimised GMail configurator for social microblogging
• Podcast that generates poetry based on Google Earth data
• Scalable, PHP based Feedburner API explorer with a hand tracking front-end
• Feature detecting blogging platform for Lingo, Haxe and AS3
• Pascal based kiosk to replace data visualisations and hook into GMail via Twitter and Google Maps
• Multi-touch, open source Digg microblogging utility powered by Slashdot and the Google Gears C# API
• Platform for building dynamic, Wii controlled iPad applications for MATLAB enabled devices
• Python based Del.icio.us and GitHub mashup, designed for generative gaming
• Objective C interpreter for creating dynamic microblogging experiences in JavaScript
• Scalable, Wii controlled GitHub shopping utility powered by Foursquare & the Yahoo Pipes API
• Ajax based platform for rapidly developing kiosks based on Google Gears data
• Perl based platform for rapidly developing art installations based on GitHub data

The WTF Engine code and this particular implementation is available in my GitHub repository.

Have fun, and if for any bizarre reason you make one of them, let me know!

http://whatthefuckismymashup.com/

Related posts:

1. Introducing Springboard
2. Smack My Glitch Up
3. AS3 Particle Node Sequencer

Here are my contributions:

you.push(new Christmas(State.MERRY, Size.LITTLE));
you.getOrgan("heart").setDensity(0.0);
you.troubles.setVisible(false);

My take on GrumpyWookie‘s tweet:

if(weather == "frightful") {
	fire.setState("delightful");
	us.velocity.set(0,0,0);
	for(i=0;i< 3;++i) {
		weather.snow();
	}
}

This was picked up by simon_watkins who later added some logic:

for each(Angel angel in angels) {
	angel.addEventListener(AudioEvent.SING, hark);
}

Technically, this would see them ascending into space, but you get the idea!

Vec3 v;
for each(King k in kings) {
	v = star.position - k.position;
	v.normalise();
	v.scale(k.maxSpeed);
	k.position += v;
}

What Christmas would be complete with out a bit of Wham! (that's rhetorical).

heart = you.hearts.pop();
for each(Person someone in world) {
	if(someone.isSpecial()) {
		someone.push(heart);
		return;
	}
}

And if you thought all this Christmas cheer was unbefitting of an Atheist, here's my take on this one:

try {
	God.getInstance().rest(merryGentleman);
} catch(TheologyError error) {
	log("God not found");
	Christmas.abort();
}

I'm not sure whether anyone is archiving these, as they did with SongsInCode but for now you can see more here, here and of course here.

No related posts.

The other clinching factor was it’s plugins, notably Subversive for SVN browsing and team collaboration goodness.

This evening though, I tried checking out a Google code project and got the following error:

SVN: ‘0×00400006: Validate Repository Location’ operation finished with error: Selected SVN connector library is not available or cannot be loaded.
If you selected native JavaHL connector, please check if binaries are available or install and select pure Java Subversion connector from the plug-in connectors update site.

If connectors already installed then you can change the selected one at: Window->Preferences->Team->SVN->SVN Client.

Selected SVN connector library is not available or cannot be loaded.

If you selected native JavaHL connector, please check if binaries are available or install and select pure Java Subversion connector from the plug-in connectors update site.

If connectors already installed then you can change the selected one at: Window->Preferences->Team->SVN->SVN Client.

Basically, it was banging on about connectors, so…

In case anyone is experiencing the same thing, here’s what I did to solve it:

1. Open up the Software Updates and Add-ons dialogue (Help > Software Updates)
2. Click Add Site and enter the Polaron SVN Connectors update site URL:
   http://www.polarion.org/projects/subversive/download/eclipse/2.0/update-site/
   (I found this on the Polaron download page)
3. Open up the Subversive Connectors Site node, then Subversive SVN Connectors
4. Download the following plugins:
   • Subversive SVN Connectors
   • SVNKit 1.1.7 Implementation

Restart Eclipse (or FDT standalone) when prompted and that seemed to do the trick.

I’m new to FDT and Eclipse, so let me know I was missing something.

No related posts.

Original image by Edwin Tofslie

I was having a few gradient alpha mask disabilities today and thought I should share my misery and consequential solution with anyone who might run into the same problems!

Update: TF pointed out a very simple solution – cacheAsBitmap WILL work, providing you cache the Bitmap as a Bitmap, as you would if you were working with two vector drawings. Why a Bitmap wouldn’t be cached as a Bitmap I don’t fully understand.
Still use the copyPixels method if you want to create a single object and discard the mask, but otherwise don’t listen to me overcomplicating things and do it old school!

As you know, since Flash Player 8 we’ve been able to use an alpha channel when masking display objects. A common implementation is to first draw a gradient that fades from white with opacity 1 to white with opacity 0 and then tell a display object to use this as its mask.

Apparently, however – it’s not always that simple…

In this instance, I was using an embedded image (though the same would be true for a loaded one) which was in PNG format and contained an alpha channel. The alpha channel was crucial as the image was an icon with a transparent background and faded edges. I needed to dynamically mask and fade out this image to create a reflection via code, rather than doing this all in Photoshop. The resulting Bitmap would be sitting on top of a colour changing background, and so transparency was needed on both the original icon shape and the fading reflection – a common enough requirement.

The “cacheAsBitmap” Approach

The simplest way to do this and the technique that I immediately reached for, is to create the mask – being a Shape object with a gradient drawn using its instance of the Graphic class – set it’s cacheAsBitmap property to true and then set the embedded Bitmap’s mask property to use this gradient.

The result:

The code:

[Embed(source = '../lib/image.png')]
private var image:Class;

var myImage:Bitmap = new image as Bitmap;
addChild( myImage );

var matrix:Matrix = new Matrix();
matrix.createGradientBox( myImage.width, myImage.height, Math.PI / 2 );

var gradient:Shape = new Shape();
gradient.graphics.beginGradientFill( 'linear', [0xFFFFFF, 0xFFFFFF], [1, 0], [0, 255], matrix );
gradient.graphics.drawRect(0, 0, myImage.width, myImage.height);
gradient.graphics.endFill();
gradient.cacheAsBitmap = true;

myImage.mask = gradient;

However, presumably due to the fact that the bitmap already contained an alpha channel, the alpha channel of the bitmap-cached gradient shape was ignored, and the result is a mask which is simply the entire area of the gradient box, much like the pre Flash Player 8 mask behaviour of being either on or off and nothing in between. (

The “CopyChannel” Approach

The next approach I tried was to draw the gradient to a new transparent bitmapdata and then use the copyChannel method to copy the alpha channel of the gradient bitmapdata to the bitmapdata of my image.

The result:

The code:

var gradientBitmap:BitmapData = new BitmapData( gradient.width, gradient.height, true, 0 );
gradientBitmap.draw( gradient );

var channel:uint = BitmapDataChannel.ALPHA;

myImage.bitmapData.copyChannel(gradientBitmap, gradientBitmap.rect, new Point(), channel, channel);

Again, an undesirable result – I was left with some kind of graphic monstrosity that was a Frankenstein combination of my wonderfully smooth faded source image and a gradient showing through wherever transparency should have been in the original.

The solution (CopyPixels)

The approach I used in the end was to create a new transparent bitmapdata with the same dimensions of my image, then to use the copyPixels method to copy over the pixels from my source image to the new bitmapdata. The copyPixels method also accepts a parameter for alphaBitmapData, so I passed my gradient bitmapdata to this. Finally, copyPixels also takes a Boolean value for mergeAlpha, so set this to true and the result is a brand new image with the RGB pixel data of the source image and an alpha channel which is a combination of the alpha channels from both the source and the gradient bitmap.

The result:

The code:

var gradientBitmap:BitmapData = new BitmapData( gradient.width, gradient.height, true, 0 );
gradientBitmap.draw( gradient );

var result:BitmapData = new BitmapData( myImage.width, myImage.height, true, 0 );
result.copyPixels(myImage.bitmapData, result.rect, new Point(), gradientBitmap, new Point(), true);

addChild( new Bitmap( result ) );

I’m sure I’ll be mocked by my fellow developers for having been kneecapped by this quite basic problem, but having glanced at a few forum posts it seems common enough. Therefore I felt sharing the solution might be of some benefit.

Full source code:

[Embed(source = '../lib/image.png')]
private var image:Class;

public function Main():void
{
	drawCheckerboardPattern();

	var myImage:Bitmap = new image as Bitmap;

	var matrix:Matrix = new Matrix();
	matrix.createGradientBox( myImage.width, myImage.height, Math.PI / 2 );

	var linear:String = GradientType.LINEAR;
	var colors:Array = [0xFFFFFF, 0xFFFFFF];
	var alphas:Array = [1.0, 0.0];
	var ratios:Array = [0.0, 255];
	var spread:String = SpreadMethod.PAD;

	var gradient:Shape = new Shape();
	gradient.graphics.beginGradientFill( linear, colors, alphas, ratios, matrix, spread );
	gradient.graphics.drawRect(0, 0, myImage.width, myImage.height);
	gradient.graphics.endFill();

	var gradientBitmap:BitmapData = new BitmapData( gradient.width, gradient.height, true, 0 );
	gradientBitmap.draw( gradient );

	var result:BitmapData = new BitmapData( myImage.width, myImage.height, true, 0 );
	result.copyPixels( myImage.bitmapData, result.rect, new Point(), gradientBitmap, new Point(), true );

	addChild( new Bitmap( result ) );
}

private function drawCheckerboardPattern():void
{
	var boxSize:int = 8;

	var pattern:BitmapData = new BitmapData( boxSize * 2, boxSize * 2, false );
	pattern.fillRect( new Rectangle( 0, 0, boxSize, boxSize ), 0xCCCCCC );
	pattern.fillRect( new Rectangle( boxSize, boxSize, boxSize, boxSize ), 0xCCCCCC );

	graphics.beginBitmapFill( pattern );
	graphics.drawRect( 0, 0, stage.stageWidth, stage.stageHeight );
	graphics.endFill();
}

Related posts:

1. Fit DisplayObject into Rectangle
2. BitmapData Average Colours
3. BitmapData Colour Palette

If you haven’t come across it yet, SWF Address is a tool for deep linking in Flash. It is a JavaScript based code which will set hash (anchor) link path from your Flash content. Not only does this mean users can now use their back buttons, but it also means permalinks can be created to content deep inside the Flash movie. For example http://www.yoursite.com/#/projects/project-name/

I will be working on implementing it on Flash in the Pan website awards, as I have already used rewrite rules to fetch Flash content when the user arrives from a page specific link or search engine result, but SWF Address will add a much needed real-time feedback on the users’ position within the sites data.

You can download SWF Address here and will see an example implementation of SWF address on soulwire or one of my other sites very soon.

Finally, between SWF Address and SWF Object, flash is becoming more and more usable as a coherent and complete format for large and SEO friendly sites.

No related posts.