Home of the Ranbot 3000

A while back Sprint ran a contest to be one of 10 people to win an HTC EVO before the release date. The entry required that you write a short “essay” about how you could put an EVO to work. Well…I deviated from the path and wrote a poem instead. Yep, I’m a geek…

Turns out, I didn’t win (surprise, surprise) so I figured I’d post my little poem here now that the contest is over! Had a good bit of fun putting it together and name-dropped some of my favorite apps/services!

Connected, not rejected,
Bits flow over the wire
—wait, what wire?
Hey, this truly inspires!

But, this begs the question…
Who let Pandora out of her box?
Unrestrained waves,
of the 4th generation!
So wield this third pipe with care,
It allows for creation!

I put on my Goggles,
Take a look through the Sky,
Because layer by Layar,
It’s a feast for the eye!

I tweet to the beat,
Of the city streets,
And with a little bit of Yelp,
Find sweet treats to eat!

Then I update my status,
So you all know the latest:
“Blazing fast speeds,
For me? Yes, please!
Now lolcats can haz 4G!”

But, what’s the current Buzz,
What did you miss?
“Flash mob @ the mall!”
—people have to see this,
Stream it, Qik!

The world is now social,
In the palm of my hand,
While I upload my photos,
And tag all my friends!

Let me know what ya think. Is it decent, or am I just a dork?

When issues of morality and ethics pop up in conversation, many people have a tendency to jump to examples painted purely in black and white. I’m guilty of it myself. While such can be useful as a thought experiment, most examples tend to ignore something very important: context.

Without context, useful information is immediately lost which often leads to logical fallacies. Here’s one of the most succinct examples I’m aware of, provided by the Fallacy article on Wikipedia:

Argument: Cutting people is a crime. Surgeons cut people. Therefore, surgeons are criminals.

Problem: Cutting people is only sometimes a crime.

Without context, poor conclusions result. Consider the following example which photographers will immediately relate to how one exposes a photo.

Imagine a piece of paper divided in half. One half is stark white and the other is pitch black.

Now shine a light on that piece of paper.

A dim light will ensure that black is indeed black—but now the white side appears gray.

A bright light will ensure that white is indeed white—but now the black side appears gray.

The light is context. Vary the brightness of the light and you’ll get different outcomes. Without light we are lost in the darkness, able only to interpret situations with simplified thought experiments held in isolation. Always consider the light.

Not too long back, Marta upgraded her phone and snagged a Palm Pre. Of course, this meant that I would immediately begin obsessing over developing apps for the Palm Pre. Since this bad boy of a device runs its own Linux variant, there’s plenty to hack around on “under the hood” as well. I’m now fairly comfortable with the webOS APIs and will soon embark on developing some useful apps. Along the way, I’ll be sure to document some of what I learn about this amazing device.

In the mean time, I recently posted an accelerometer demo and its code over on PreCentral’s webOS Development forums. Figured I would toss it up here on the ‘ole blog as well.

Who Knows How to Use the Accelerometer?

On the development forums, there has been a lot of interest in writing apps which use the accelerometer, but not much code to get anyone started. My goal was purely to give the Palm Pre development community some code to chew on, so this is about as basic as it gets. AccelBall just lets you hold your Pre flat and tip it back and forth to roll a ball around. That’s it. That’s all. Figured it would be something fun to play around with for coders new to the Pre.

Making Things Move

I’ll assume anyone reading this will already know the basics of how to get a webOS app started, so this is just the code that is relevant to doing something useful with the Pre’s raw accelerometer data. Just one event handler and a tiny bit of math pulls off the heavy lifting:

MainAssistant.prototype.handleAcceleration = function(event) {
	this.driftX += (event.accelX * this.scale);
	this.driftY += (event.accelY * this.scale);
	this.driftZ += (event.accelZ * this.scale);
}

And a PeriodicalExecuter to move the ball around once every 30th of a second:

MainAssistant.prototype.setup = function() {
...
	new PeriodicalExecuter(function(pe) {
		obj.moveDot();
	}, (1/30));
...
}

The moveDot function just uses the drift variables which are being updated by the accelerometer’s event handler:

MainAssistant.prototype.moveDot = function(){
	// Move that dot! Note that the Z axis isn't used in this demo...
	this.theDot.style.left = (parseInt(this.theDot.style.left) + this.driftX) + 'px';
	this.theDot.style.top = (parseInt(this.theDot.style.top) - this.driftY) + 'px';

	// And there's more code to keep the ball within the viewport, just snag the source...
}

The Code and IPK

To make life easier, here’s a zip of the complete source of AccelBall, ready to be used with ‘palm-package’ out of the box. Also, the all-important IPK package for those who just want to install and toy with it.

Code: accelball-source.zip
IPK: com.randallagordon.accelball_0.0.0_all.ipk

And last, but not least, I’ll include a link to the official Palm documentation on the Accelerometer’s API for good measure.

I hope you find the code useful and if you make anything with it, please leave a comment and a link. I would love to see what creative applications everyone comes up with!

So Firefox 3.5 recently hit the streets and brought some new toys for we designers and developers, including support for HTML5′s <audio> and <video> tags. The Ogg Vorbis and Theora codecs are supported for audio and video respectively. I tinkered with them a little bit with an earlier beta, but didn’t get too fancy. Now that 3.5 is available and more folks have it, I’ve put together a little demo I’ve been thinking about for a couple months.

Presenting, you’re going to hate me for this, karaoke in Javascript! Or, as I like to call it, Jaraoke! Cheeky, eh?

Head over to http://randallagordon.com/jaraoke/ and check it out. Just hit play, and then you’re able to toggle the lyrics in the audio on and off. The song is “Disciple” by Nine Inch Nails, chosen because of the great forward-thinking license chosen for the song, a Creative Commons Attribution-Noncommercial Share Alike license. The lyrics start 24 seconds in, so be patient.

Other Browsers

It is also worth noting that this works in Safari 4 using MP3 sources instead of Ogg Vorbis. Unfortunately the codec playing field is not a level one and Apple refuses to support Ogg on grounds that a patent could crop up out of nowhere…

Chrome should also support this, a <video> tag demo I link to below works just fine. I just simply haven’t done any debugging to see why Chrome doesn’t like it at this point. If anyone catches the problem, please let me know. Determined that this was a server config problem—gzip and Chrome’s Ogg playback don’t play nice together. Adding “SetEnv no-gzip dont-vary” to .htaccess makes everyone happy. So, Jaraoke now works properly in Chrome.

The Markup

The guts are really quite simple. I’m loading up two separate audio files to be played simultaneously, one with the lyrics present and one which is instrumental. Here you’ll also see the two separate source declarations, one for Ogg Vorbis and another for MP3. Beyond that there are two links, one for play control and one to toggle between the vocal and instrumental tracks, and an unordered list element to insert the lyrics into. Here’s the markup:

<audio id='apN' autobuffer="true">
	<source src='audio/discipline_mixdown-nvocal.ogg' type='audio/ogg; codecs="vorbis"'>
	<source src='audio/discipline_mixdown-nvocal.mp3' type='audio/mp3; codecs="mp3"'>
	A custom message can go here for browsers which don't support the <code>audio</code> HTML5 element.
</audio>
<audio id='apW' autobuffer="true">
	<source src='audio/discipline_mixdown-wvocal.ogg' type='audio/ogg; codecs="vorbis"'>
	<source src='audio/discipline_mixdown-wvocal.mp3' type='audio/mp3; codecs="mp3"'>
</audio>

<a id="togglePlay" href="#">Play/Pause</a>
<a id="toggleVocal" href="#">Toggle Vocals</a>

<ul id="lyricsList"></ul>

The Javascript

When the DOM is loaded, the Javascript does some minimal setup. The volume for the vocal track is set to 0 and the instrumental to 1. These settings are floats with a value of 0, volume completely off, to 1, volume completely on. This, of course, let’s the two files play simultaneously without interfering. By calling play and pause during setup, it forces the files to play perfectly synchronized (at least on my system…) so there is no “skipping” when the vocals are toggled. The lyrics and cue times are simply hard coded into arrays and really should be imported from an XML file.

The grunt work is done by setting up an event listener on the audio element’s “timeupdate” event. The callback just checks the current playback time against a set of cue times. If the playback time is past the current cue’s time then it displays the current lyric and increments to the next cue. Here’s the relevant code:

var currCue = 0;
var cues = [ 24.78, 26.81, 29.69, 34.88, ... ];
var lyrics = [	"Am I...",
			  	"Am I still tough enough?",
				"Feels like I'm wearing down, down, down, down, down...",
				"Is my viciousness", ... ];

this.apN.addEventListener("timeupdate", timeUpdate, true);

function timeUpdate() {
	if(jaraoke.apN.currentTime > (cues[currCue] - CUEOFFSET)) {
		var el = $(document.createElement('li'));
		el.update(lyrics[currCue++]);
		$('lyricsList').insertBefore(el, $('lyricsList').firstChild);
	}
}

Taking the Concept Further

Please, let me know what you think, I would love to get some feedback on this. If there is enough interest I figure I’ll take the concept a little further. Such as getting the cue data moved into an XML file, adding some effects (the classic “follow the bouncing ball”, for instance) and, possibly, an editor to create the XML cue data. Perhaps give it a proper design…

Links and Other Resources

Here’s the <video> tag demo that gave me the idea in the first place: STS-116 Launch Profile. As the title implies, it shows a video of the STS-116 launch along with drawing graphs of the speed, altitude and downrange data in sync with the playback time of video.

Also be sure to check out Hyper-Metrix’s jai – javascript audio interface [http://hyper-metrix.com/misc/jai/]. It takes beautifully semantic markup and turns it into an elegant, Flash-free media player GUI. Also puts the <canvas> tag to work, showing off another great new feature.

If you’re going to be tinkering with these elements, don’t forget the best reference—the HTML5 draft spec! Here’s a link to the audio element section.

Update – Examples In the Wild

David Friedman of Ironic Sans used Jaraoke’s code along with other sources to come up with a unique take on traditional volume control. Instead of simply going from quiet to loud, this control adjusts the volume from “whisper to shout”! Check it out and enjoy a laugh over here and also read his blog post about it.

TechCrunch recently posted this video taken at Microsoft TechFest 2009. It is a demonstration of a technology similar to Microsoft’s own Photosynth. But, with a difference that opens the door to a game changing shift in live content delivery. Instead of taking several minutes stitching together static photographs into a three dimensional environment, this demo stitches live, dynamic video in real-time! Hence why TechCrunch labeled it “Qik Meets Photosynth”.

First, take a look at the demo. The cool part of the demo starts at about 50 seconds in and goes a little past 3 minutes. Watch at least that and you’ll be up to speed well enough to understand the following. It does help if you’re also familiar with Qik and Photosynth

Reading some of the comments on TechChrunch’s post, I found several people calling this “a solution without a problem” so I figured I’d give some potential “problems” this could solve. You just have to think about how this technology can be combined with other technologies we already have available, as well as how this kind of stitching technology can be evolved. Two game changing applications spring to mind immediately:

Sports and Live Event Broadcasting

Just think outside the box a little bit. Sure, they’re using camera phones in the demo, but that doesn’t mean you can’t scale up to using 1080p high definition video sources. Or 2K, 4K and even higher resolution sources for that matter. At that point you’d need extremely heavy computing power to do the processing, but it isn’t like we aren’t seeing the silicon showing up to provide the number crunching horsepower. Newspapers think they have it bad because of the internet, just think about the implications of every football stadium installing arrays of high definition cameras around the field. Traditional broadcast single-feed TV won’t be able to compete…

Read the rest of this entry »

I finally got my blog upgraded to the newest version of WordPress 2.7.1 today. I had been running 2.3 for ages simply because it worked. Quite a bit has changed and all for the better! Amazing that all the plugins I kept trying to work with suddenly all work perfectly now…

I also got Mindnasium upgraded and I intend to start working on it again soon. Sad that I only made three posts and let it die, but, like a phoenix, it shall rise again from the ashes! (Maybe…)

And I converted SynerGen’s site over as well. I had previously been running the SynerGen site on a custom backend of my own. Which was sufficient when only a handful of people needed access to post basic text only posts.

So, I might have fibbed a little. I said I was going to share blogs with you in my new “Read This!” column. But here it is, only the second post, and I’m deviating from specification. There’s a site I want to share this week that, while it does have its own blog, is more about sharing ideas through twenty minute speeches. These speeches are given by some of the greatest thinkers of our time at a gathering in California each year. People like Craig Venter, Aubrey de Grey, John Maeda, Jane Goodall, Jeff Han, Ray Kurzweil, and Stephen Hawking.

Here I showcase one of the latest talks, given by Juan Enriquez. The talk is titled “Beyond the crisis, mindboggling science and the arrival of Homo evolutis.” Enriquez uses a good bit of smart humor to illustrate our current economic crisis and why the advance of technology gives us good reason to have hope for the future.