Tagged:programming

Bloggle

My wife and I recently made the move from Glasgow, UK to her home province of Beautiful British Columbia™, Canada. While we’re getting set up over here, we’ve been graciously hosted by my parents-in-law. And as a direct consequence, we have all been playing a veritable butt-ton of board games – foremost of which has been Boggle.



When stumped for a gift…

It’s a fun game, and one variant is to sit around without any timer running and openly shout out words (of 4+ or 5+ letters, to keep it interesting) as you see them. After a while, you get the impression that there cannot possibly be any words left to find – but is that really the case? I wanted to find out…

…And I also wanted to avoid using one of the innumerable free solvers available out there, for the sake of – erm, fun?

So, as a weekend project, I wrote the above Boggle solver, publishing for Flash, (and courtesy AIR) Android and iOS, and uploaded the source code to GitHub: https://github.com/hanenbro/BoggleSolver. Please feel free to do what you like with it; the licence is MIT.



Here it is running on a Nexus 7 tablet and iPhone 4S

For anyone looking just to install the app on mobile (for those crucial on-the-go Boggle scuffles), the APK will install for any device set to allow 3rd party apps, but the IPA will only work for jailbroken iOS devices, unless you recompile with your own provisioning profile.

The app is using a modified word list from InfoChimps, with the words shorter than 3 and longer than 16 letters removed (per the rules and limitations of game). That still leaves around 100,000 words, so at least in my usage, it tends to come up with a high percentage of never-before-seen lexical wonders. Educational tool or ego-deflating depression fuel? You decide!

Colour Extractor Utility

This is a quick post to share a utility I put together to extract all unique RGB hex colours from a given image.

My use case: I’m working on a project where a grid of clickable colour swatches needs to be generated. Due to limited space, it’s been difficult to settle on the the specific palette, knowing that the flexibility of an RGB or HSL colour picker isn’t an option. So I’ve been mocking up a few different arrangements of swatches in Photoshop, and experimenting with their layout.

At the same time, things like available space could change at any point, so between that and the need to adjust colours down the line, I don’t want to lay all the swatches out by hand and be tied to one arrangement. The layout has to be generative, and so I just need a raw list of colours to work with. The initial plan was to use the eye-dropper and pick out each one, pasting the hex values into a text file – but then I noticed I’d have to do that 60+ times for each revision, and thought: “Hello?! This is the 90s! Make the computer do it.”

The utility is very simple, and will just sift from the top-left pixel, traversing right, then to the next row – comparing against a running list to identify all the unique colours. Each colour is stored as a hex value (e.g. 0xBADA55) on a new line in the clipboard-able text data. You can then use some basic find-and-replace commands to get the list into a workable format for your needs.

If your image has gaps between swatches as mine does, and a background colour, this will be picked up as the first (or second) colour in the list – so you’ll likely want to trash that before going further. Another potential gotcha is the presence of anti-aliasing in your image, which could add unwanted in-between colours into the list. If you’re dealing with such a palette image, I would consider scaling the image down using a non-resampling algorithm – such as the ‘Nearest Neighbour’ mode in Photoshop. With some experimentation you should be left with only your core palette colours, ready for import into the extractor utility.

Replacing the buttonMode hand cursor icon in FP 10.2+

Thought I’d share a little snippet from a project I worked on a month or so back – it takes advantage of the Mouse.cursor property introduced in Flash Player 10.2. MouseCursor, as you may know, beats the ass of previous cursor replacement solutions because it modifies the OS pointer, and thus is not at the whim of slow stage framerates or the various other painful snags that come with faking it; hiding the system cursor and manually positioning a graphic in its place.

There’s a decent amount of documentation out there on how to use it, but my specific requirement was to replace the cursor only when mousing over buttons and other clickable items. I wanted it to show up wherever the hand cursor would normally appear, across a whole project.

This is the kind of behaviour I needed:

catswitch
Click to run the example. The buttons show a custom mouse-over cursor only when they’re enabled.

Now, if you look at the Adobe docs on the topic, you can register a cursor by passing in a String constant and a MouseCursorData object like so:

Mouse.registerCursor("PointerCursor", mouseCursorData);

Additionally, you can spy a number of static String constants inside the MouseCursor class – such as IBEAM and HAND – which certainly made me wonder whether I could do something like the following:

Mouse.registerCursor(MouseCursor.HAND, mouseCursorData);

But as you may have guessed, this does not work as hoped; it’s not possible just to override the graphic used for the hand cursor.

So here’s my workaround for achieving this kind of behaviour, which I opt to keep inside a centralised class (the filthy singleton). I’ve set up a git repository for the full example, but here’s the crux (a few extra functions aren’t shown here):

public function buttonMode_set(target:Sprite, buttonMode:Boolean):void {
	
	//If the dictionary hasn't been initialised, do so and set up the custom mouse cursor//
	if (! _buttonModeDictionary) {
		_buttonModeDictionary = new Dictionary();
		var pointerCursor = new MouseCursorData();
		pointerCursor.data = new <BitmapData>[new Cursor32Shadow()];
		pointerCursor.frameRate = 0;
		pointerCursor.hotSpot = new Point(3, 1);
		Mouse.registerCursor("PointerCursor", pointerCursor);
	}
	
	//Check whether the Sprite has already been registered for use//
	if (target in _buttonModeDictionary) {
		
		//Only add/remove listeners if the buttonMode state is actually changing//
		if (_buttonModeDictionary[target] != buttonMode) {
			_buttonModeDictionary[target] = buttonMode;
			if (buttonMode) {
				target.addEventListener(MouseEvent.ROLL_OVER, pointerCursor_show);
				target.addEventListener(MouseEvent.ROLL_OUT, pointerCursor_hide);
				mouseOver_check(target, true);
			} else {
				target.removeEventListener(MouseEvent.ROLL_OVER, pointerCursor_show);
				target.removeEventListener(MouseEvent.ROLL_OUT, pointerCursor_hide);
				mouseOver_check(target, false);
			}
		}
		
	//Only add the new entry if pseudo-buttonMode is being turned on//
	} else if (buttonMode) {
		
		_buttonModeDictionary[target] = true;
		target.addEventListener(MouseEvent.ROLL_OVER, pointerCursor_show);
		target.addEventListener(MouseEvent.ROLL_OUT, pointerCursor_hide);
		mouseOver_check(target, true);
	}
}

And then it can be turned on and off for each object like this:

buttonMode_set(button1, true);	//button1.buttonMode = true;
buttonMode_set(button2, false);	//button2.buttonMode = false;

The full example can be downloaded from github here: https://github.com/hanenbro/CursorDemo

Dinoglyphs

Been feeling at all out of touch lately? Wondered what the next big thing’s going to be? You came to the right blog post friend, because I’ll tell you what it is for free:

ANAGLYPHS

ANAGLYPHS

And what would be the perfect companion to this timely tech? Extinct animals. Namely:

DINOSAURS

DINOSAURS

Over the past few weeks at work, I got the chance to develop an educational Papervision3D/FLARToolKit application for the the BBC’s Learning Development site. I wrote up some nerdy/whiney information on the process here, and the page itself can be found at the picture-link below.

SpinARsaurus Challenge

Moving images containing terrible lizards are all very well; Steven Spielberg gave us those in 1993 – more than fifty years ago! But what that documentary promised to be the simple matter of drilling into amber and injecting mosquito blood into a frog, still hasn’t yielded any dino fun parks. What gives?

In order to fill this void (over the next couple of months, before one of the parks is complete and we’re busy petting T-rexes), I’ve made a dinosaur that looks so real you could touch it.

Dinoglyph
It will take a minute or two to load up, so please be patient! (You can’t rush virtual reality.) Moving the mouse around alters the spin speed and direction, and zooms in and out.

For the demo, I loaded in a second skeleton model, iterated over the texture files and ColorTransform-ed the red / green+blue out of them, respectively, then set their BlendModes to DIFFERENCE. After that, I moved the red copy a little left, the blue copy a little right, and applied all other movement relative to those locations.

The eventual colours work out well to be mutually invisible in the corresponding panes of the paper glasses that were bundled with the copy of Ben 10 Magazine I bought in shame. (FYI, decent journalism, but the word searches were MUCH too difficult for the recommended age bracket.) More sophisticated glasses will probably result in uneven colouring.

FUTURE
And you wont look as cool.

Hello

I'm Adam Vernon: front-end developer, free-time photographer, small-hours musician and general-purpose humanoid.