BioMint is a "game" I made as part of last year's Ludum Dare 48-hour Game dev thing on the theme of "You are the villain". You play your friendly neighbourhood mining giant, who just wants to earn a living. To earn this living, you send out probes to scout for the presence of valuable minerals. Once you've found them you can commence blowing up the earth - with luck, you'll to uncover the treasured red gold. Texas Rosé. You can then retrieve the goods and earn your coin while tilling the earth bare.

That's the idea anyhoo. It's all a bit confusing, but hey - I only had 48 hours and I was working in a whole new dimension! To ease my elevation from the flatlands I came up with a 2-fold ingenious plan... 1: I'd use Three.js (I had hoped to start from scratch - but after flipping through the WebGL spec I decided it would be unwise), and 2: I'd make a game that was really 2D at its core, and I'd just project it into 3D space.

Three.js vs WebGL

At the start I felt like it was cheating to use a high-level library like Three.js - but I after the first 24 hours of the comp I realised an awful truth: using Three.js without understanding WebGL is like using jQuery without understanding JavaScript and the DOM. You can hack some stuff to work, but no one in the world would want ever have to look at your code. So I ended up spending a bunch of time reading Three.js source to see what was going on under the covers. It turns out that the answer is "not too much" - it's mostly simple wrappers to avoid a bunch of boiler plate, which is nice.

Since the comp I've been digging into WebGL a lot more. Once I understand it and can do all the basics, I'll probably go back to Three, just to save some time (you won't catch me using Unity or other such nonsense, naturally).

2D meets 3D

The second part of my grand plan was to bypass having to learn too much 3D stuff by basing the model of the game in 2D. Both the surface of the earth, and the underlying treasure, are 2D grids of perlin noise - rendered onto a single Canvas element, then stretched around the sphere: when you click on the sphere, I just find out the position of the cell in 2D space and base the logic on that. Sneaky hey? Well, I didn't totally dodge the 3D bullet - raycasting to find the clicked cell turned out to require a fair bit of trial and error thinking, wasting a nice chunk of my limited time. Hence the limited actual game play. *grumble* stupid matrix math *grumble*.

The best bit was making some 3D models in blender. I once used 3D Studio Max in 2002 and it scared the bejesus out of me and I never went back. Faced with the formidable interface of Blender barely worried me, however, as back in 2002 we didn't have an internet filled with youtubez to make picking things up a breeze. I don't think I'll win any modelling awards, but my little tanker/miner things are preeeeety nifty...

All crossed over

So I did it. 3D. Wasn't that scary after all. I think I'll try tesseracts next time. As always, the code for BioMint is on Github if you're feeling brave.

To use it, simply drop the plugin in your ~/Library/Compositions/ folder and it'll appear in Pixelmator under "Other" in your effects browser. I can't figure out how to resize the destination output area from within Quartz itself, so you first have to stretch your canvas to accomodate the new pixels before you run the plugin. Sorry 'bout that. Hopefully pixel stretching will be included in a future version of Pixelmator - but until then: Pix up, Look Sharrrrp!

Ludum Darer JellyCakes has been live streaming his playing-and-rating efforts of entries in Ludum Dare 26. He's an excellent reviewer: testing each game very thoroughly and fairly. And he's hilarious. After giving my entry a good run through its paces he concluded with the above video. Might not fit the competition's theme of "minimalism", but dang... it's awesome!

Here's my entry for Ludum Dare #26, on the theme Minimalism.

It's written in pure JavaScript and a "library" I cobbled together a few days before the competition. I also snuck in jQuery for doing the ajax requests when loading level data.

The sounds (my favourite part of the game) were made in Ableton live with various VST plugins. The tiles were actually made in Blender. Blender! And edited with Pixelmator.

The result was... alright. I was really looking for a nice puzzler, but ended up running out of time. Was good fun though.

That image is the punchline to the question I awoke with in the middle of last night: "How the FLIPPIN' 'ECK did that guy do destructible terrain for DHTML Lemmings... in 2004?!!!". I lay there for some time as thoughts raced through my mind: There was no canvas element in 2004. No WebGL. In fact, there was no direct pixel access of any kind! (Not counting black and white XBM images, which had been killed off by then anyway).

Eventually I was forced to get out of bed and take a look. The answer, as pictured above, was a piece of creative brilliance: each level is a simple jpg image that sits in the background. As diggers dig down they add "holes" - small black images - to the page. every few pixels dug requires a new hole image.

Destruction via creation! That's the kind of lateral thinking that'll get you places.

Short function syntax replaces the lengthy function keyword with a symbol =>, and the almost-as-lengthy return keyword with the much shorter nothing (for one-liners).

However, this change represents far more than a few saved keystrokes: it marks the beginning of JavaScript as a serious functional programming language.

Let's have a look at it in action. Fire up your Firefox nightly and open up the console. Defining a function can now be done like so:

var cube = x => x * x * x;

cube(3); // 27

Very snazzy hey? Where it really shines in as part of the collection manipulation methods: map, reduce, filter, some, every.

[1, 2, 3, 4, 5].filter(x => x % 2).map(x => Math.sin(x));

In this example we filter on odd numbers (keeping 1,3,5) and then pass them to the Math.sin function. If we were to write this with normal anonymous functions we'd have this horizontally-scrolling version:

[1, 2, 3, 4, 5].filter(function(x){ return x % 2; }).map(function(x) { return Math.sin(x); });

Which gives us the same result, but buries the actual processing logic in redundant keyword cruft. And that's why this seemingly simply feature is so important - it helps us to clarify and highlight the business logic and intention. Whereas previously it felt as if we were "bending" the language to code in a functional style, the new lambda format formalises it and gives us the thumbs-up to go functional.

It's quite beautiful when you need the one-liners with a single parameter like above - but of course, that's not always the case. If you have multiple parameters, you need to wrap them in parentheses:

[2, 2, 2, 2, 2].map((el, i) => el * i); // [0, 2, 4, 6, 8]

If you have zero parameters, you need an empty parameter list:

[1, 2, 3, "a", "b", "c"].map(() => "hi!"); // ["hi!", "hi!", "hi!", "hi!", "hi!", "hi!"]

Finally, if you want the body of the function to be a block, you need curlies and - unfortunately - an explicit return statement:

[2, 2, 2].map((el, i) => {
	var double = el * 2;
	return double * i;
}); // [0, 4, 8]

It's a bit sad we don't have implicit returns for blocks, but hey - a few hours ago we didn't even have short-function syntax, so I'm not going to complain about it (just yet). Hopefully once everyone gets a taste for the power of terse cruft-free syntax we can go even further. For now, I'm off to check out my new browser. Oooh, shiny...

"#" + (Math.random() * 0xffffff | 0).toString(16)

That is all.

[Update: after I posted this I thought... i bet this has been done a zillion times already. It was, and by Paul Irish in 2009 no less. Additionally - it doesn't work. The best looking one there was:

'#'+('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6);

function lookAwayFrom(me, target) {
    var v = new THREE.Vector3();
    v.subVectors(me.position, target.position).add(me.position);
    me.lookAt(v);
}

To face away from an enemy, you might do something like lookAwayFrom(player, enemy) and away you scarper. If you want to integrate it into Three.js, so you can do player.lookAwayFrom(enemy) then here ya go:

lookAwayFrom: function(target) {
	var v = new THREE.Vector3();
	v.subVectors(this.position, target.position).add(this.position);
	this.lookAt(v);
}

import org.joda.time.{DateTime, Period}

def dateRange(from: DateTime, to: DateTime, step: Period): Iterator[DateTime] =
  Iterator.iterate(from)(_.plus(step)).takeWhile(!_.isAfter(to))

To use it, provide a "from" date, a "to" date and a joda time period:

val range = dateRange(
    DateTime.now().minusYears(5),
    DateTime.now(),
    Period.months(6))

Which gives you an iterator starting 5 years ago, containing every date 6 months apart, up until now. An iterator is part of scala collections - so you can toList it or map/filter etc.

Don't forget to keep an eye on the development of my up-and-coming waterski odyssey: WaterSki or Die! (coming to a phone near you soon, with programmer art removed).