Thursday, December 20, 2012

PDAs, smartphones, and formfactors

My phone, with a custom Alien Bill Gelaskin...
Not that anyone asked, but after playing with my friend's Galaxy S II, I'm wondering if it might be a better formfactor than my iPhone 5, that the more generous screen might be worthwhile so long as it doesn't take too big of a bite out of battery life or mess with the pocketability. (And I've grown to appreciate the iPhone 5's height, especially when using the calendar app, and with the larger landscape mode keyboard.) Also, the back was rounded... personally I think the earlier iPhones were better ergonomically than today's squared off beauties.

I've been a long term PDA user and when I look at the numbers, all but the biggest of today's phones are smaller than the original series of PalmPilots. It's interesting to note how modern smartphones are much more like the 90s' PDAs then they are like 90s' cellphones; when the iPhone was first announced I was struck by the similarity of its shape and homescreen to that of the Palm, not to mention some of the apps, like the datebook and the notepad. (Actually the first iPhone, without copy and paste or a Todo app, was a step down in terms of being an organizer, though obviously "web anywhere" and being a first rate music player made up for that.)
I've always liked to decorate--
Palm IIIc circa 2003


Now is a good time to suggest this excellent piece How Did We Get to the iPhone?-- the author is pretty sharp and while I would put the Palm chronologically before the Windows PDA stuff, and I'm bummed I missed out on the Psion, I saw a lot of my thoughts echoed in his writing. (For what it's worth (not much!) I chronicled my own personal history of devices, circa 2010. I think all I've added since then is an iPhone or two and a MacBook Air...)


Friday, December 14, 2012

speling

It is terrific that the Apache module that can correct "off by one" URL typos is called "mod_speling".

Wednesday, December 12, 2012

chr$

There is a recent book about a simple, simple program for the Commodore 64. The title of the book is the program itself, namely:
10 PRINT CHR$(205.5+RND(1));:GOTO 10
This program generates a maze-like structure by printing a series of randomly selected forward or back slashes (technically, slash-like characters from the computer's character graphic set.) When the screen is filled, the "maze" scrolls up two lines and keeps on drawing.

You can get a free e-copy of the book at 10print.org (They also have links to purchase physical copies). The text was a collaboration and goes into the history of C=64 one liners, the culture of computers that booted into BASIC, the meaning of (pseudo-)randomness, the legacy of mazes and labyrinths, etc etc. (Slate.com also had a nice review)

It's an inspiring book! Using processing.js, I created a slight variant on their "mazewalker" program, a variant that sends a little circle to wander the maze thus created:


There are some interesting nuances in how the maze walker works... although the "slashes" act as the walls, the walker is always "over" a slash, in a sense... but if you know which direction it was last traveling (and what type of slash it's over) you know which way it be deflect, and implicitly which section of the hallway it was travelling in.

My code for that is big and geared at readability, but Processing creator Casey Reas tweeted this tiny Processing version, from this processing forum challenge:
void draw(){int x=frameCount%20*5;int c=int(random(2))*5;line(x+c,89,x+5-c,94);if(x==95)set(0,0,get(0,5,100,x));} 
The end result of that is this:

So clever! It's very true to the spirit and feel of the original, though it has to do more work because the C=64 would keep track of the cursor and move the screen automatically.

Saturday, December 8, 2012

ObHacks and fun with giant stretchy backgrounds

So, "back in the day", before the web had really entered the popular consciousness, there was Usenet, a vast collection of discussion groups. Unlike today's forest of web-based forums where each has its own UI and culture, Usenet offered a single login, B.Y.O.interface, and semi-universal set of "basic netiquette" guidelines to talk about a huge array of different topics-- not to mention sporting a generally smart and net-savvy userbase. Its a bit of 'Net culture I miss.

One of my favorite newsgroups was "alt.hackers". It was "self-moderated" and you had to do a certain trick in order to post there. (This was of course using the original meaning of "hack": a clever, technically adept stunt, as opposed to the other meaning of "breaking into someone else's system".) There was a tradition there where if your primary content wasn't about hacking, you would include an "ObHack" (Ob as in Obligatory), some small little feat you had accomplished. Sadly, I haven't posted on alt.hackers for a long time (in part because I didn't have a good alternative when my alma mater gave up its Usenet feed) but I bring it up to say the following would have been a good ObHack (or two...)

The background is: A while ago the comic artist James Harvey was accepting commissions and I had him do a take on my personal avatar, Alien Bill. He's been my "signature" character for over twenty years now... usually he looks like
or even
but Harvey turned him into this magnificent Strider o'er the Earth:


I love that, especially at larger sizes, so I decided to use it as the backdrop at my portfolio site http://alienbill.com/, with this img tag

<img class="stretch background" src="bigbill/bigbill.jpg">

and this CSS to make it fill the complete width of the browser window:


.background {
    width: 100%; 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    z-index: -1;
}

I was pretty happy with the result!  I was inspired by some uses of oversized images I've seen on other sites, but I think in general designers shy away from them, possibly concerned about load times. Still, a 1000x1500 image is only 200K and can look pretty good stretched larger than its natural size.

I had one problem though, which is if the browser is narrow relative to its height, the image ends, and you see the background color. For a while I punted and just had the background be a nice sky blue, so that as the image first loaded, the transition from background to image would be minimized. Still, it looked ugly at the bottom where the image ended and the "sky" picked up again. The ObHack, then, was the following code:

$(document).ready(function(){
$(".stretch.background").load(
function(){
$("body").css("background-color","#ABF36B");
}
);
});

So now the background starts blue, but when the image finishes loading, the background changes to the green, so it's a nice grassy area beneath. I also chopped the image and touched it up so the transition from image to flat color was masked. (Come to think of it, I could have considered a grassy repeating pattern for the background, but I think the flat green works well enough.)

Monday, December 3, 2012

advent-ures in processing.js

Presenting, the 2012 alienbill advent calendar, http://advent.alienbill.com/! 25 interactive toys and games for the holiday season.

All the entries are in processing.js... mostly ports of previous year entries I wrote in processing, but I made sure the interactions were tablet friendly, and I doubled the screen size. It's really fun watching stuff work on iOS devices...