This weekend I spent a good amount of time on the front end of this site. Nothing too obvious at first glance… except that weird tool bar up at the top of the header art…

There are three links:
Start Auto-Redraw will start redrawing some stuff over the top of the header art. It’s not much right now.
Toggle Debug will show and hide a debug output left over from developing the overlaid art.
Toggle At will fade the header art in and out so the overlay art can be seen more clearly

This update doesn’t look like anything big but it does pull a fair amount of different work together into one place. Most of this work is Javascript.

The art being drawn is the start of a tree growing art idea using an HTML5 canvas. All it does is grow 10 branches. Behind the scenes, the code is organized using a clean prototypal inheritance model. Nothing special here either really… except that I’m finally doing canvas drawing…

The art is using just one of the methods I’ve added to a helper.js file that gives me some useful functions like randomNumberBetween(), copyCssStyle(), and two object dumpers that give me a really clean description of the object I pass them.

All of this code was written using a debug.js script that I put together awhile back while working on a web app for the iPad. Since the iPad’s console is kind of a pain to use, and since I was sick of trying to use console.log() for everything, AND since I wanted to try out a modified version of Agility.js, I put together a chunk of code to let me type console.log(), debugLn(), debug(), or debugClear() and have all of the output go to a div on the page.

Maybe this is overkill. This page is supposed to be simple. But I’m done having a simple blog and want to start using this site as a showcase for some more interesting things.

Have fun. It’s not much, but it will get more interesting soon…

P.S. You’ll notice that if you shrink the site to narrower then the full width, the image at the top stretches weirdly. This is because I’m using a bit of a hack to get rounded corners on that image. There’s a known bug with chrome related to position:relative and border-radius.