posts tagged with projects

Generating Terrain with JavaScript and Canvas

I had such great plans for today, but then I came across Paul Boxley's blog post "Terrain generation with the diamond square algorithm". You owe it to yourself to check his post out, since he explains the concepts better, presents the results better, and totally did it first.

Since the post combined JavaScript, isometric graphics and procedural content (three of my go-to favorite things!), I found myself with an itch in need of scratching. I came up with the following after a few hours of hacking around:

(see this demo on its own page) you'll need a canvas-capable browser that supports getImageData() to see anything cool above. sorry.

I'm using my own implementation of the diamond-square algorithm. My version is recursive and theoretically works with a heightmap of arbitrary dimensions, although it's pretty inefficient. Things I'd like to add to this implementation are z-ordering (it always draws the polys in the same order, to occasional ill effect), and a real shading algorithm.

All in all, it's a pretty satisfying proof-of-concept, and I'm excited to have more code to contribute to my upcoming canvas library (which I will post about any day now...)

Updates to Truncation Script

I made a few improvements to my Firefox truncation method this past weekend:

  • No longer depends on YUI to run. Since it's Firefox-only, I can assume a few nifty JS bits like getComputedStyle() and getElementsByClassName().
  • Improved the truncation algorithm. I was simply lopping off characters until it was the right length, but that performed very poorly, for obvious reasons. I'm now doing a binary "search" for the right length, which runs great (in my opinion).
  • onresize "debounce": I've written a little helper method that wraps the event handler for the resize event. When resizing the browser window, the event is fired every time the mouse is moved, causing a load of lag. The helper method limits how often the event handler fires, and makes sure it stops firing once the resize is over.

Here's the source of the debouncer:

function debounce(fn, ms, ctxt) {
    var ctx = ctxt || window;
    var it, to, del = ms, fun = fn;
    return function () {
        var args = arguments;
        if (!it) {
            it = setInterval(function () {
                fun.apply(ctx, args);
            },del);
        }
        clearTimeout(to);
        to = setTimeout(function() {
            clearInterval(it);
            it = false;
        },del);
    };
}

To use it:

document.onresize = debounce(handler, 100);

Three Little Projects

I recently cleaned up 3 little JavaScript projects I've made for myself, and thought I'd share them here:

LoadBar

A simple progress bar. Right now it expects a specific width and height for its container, but I'm working on generalizing it.

Authoring TextArea

A few JS-based enhancements for textarea elements:

  • tab key produces a four space indent
  • return inserts a newline, and, more importantly, preserves the indentation of the previous line

I wrote this up to allow me to more easily write and edit the Markdown format that these posts are stored in for my blogging system (which will receive its own post shortly).

Firefox Truncation

A JavaScript implementation of text-overflow:ellipsis in CSS. Of all the modern browsers, Firefox doesn't support this fairly useful property (though it does have an open ticket for it). My solution? I use a canvas element to measure the size of the rendered text, and iteratively truncate the the text until it fits. All elements with the class of truncate recieve this treatment. The full text is available as a tooltip on hover. Right now, this script only works under the YUI library, but I am working on generalizing it to be framework-agnostic. See update here!

Getting Around To It.

I'm a serial procrastinator by nature. My unfinished projects folder is chock full of half-baked ideas- some of them are even good ideas. But somewhere around the 35% mark, I hit a wall. The lures of younger, more attractive ideas call to me in their untapped potential. Because this, very little of my work finds its way into the light of day.

No more!

Inspired by the rantings of the likes of Merlin Mann, and in nearly blatant imitation of the inimitable Jonathan Coulton, I hereby make the following pledge:

For the next 365 days, I will post no less than one interesting/silly/dumb project on this website a week every so often (heh). They may be programming/electronics projects, music recordings, videos, or short essays. Whether I succeed or fail, this website will stand as a record of that success/failure.

Stay tuned!