A good gamification slideshow

This is not exactly news to most folks paying attention to advances in application design, but using game mechanics to make applications more engaging is all the rage right now, and in my opinion rightfully so. There are abundant resources on the subject, but I thought this slideshow was especially useful (via the PDX Web Dev IRC channel):

http://www.slideshare.net/amyjokim/smart-gamification-gdc2011

HTML5, JavaScript, and Raphaël

I have been looking into new web tools for a few side projects that I’m dreaming about. I have generally been fairly unimpressed with the capabilities that have been demonstrated for HTML5 up to this point…Not that it’s not capable of being the way of the future, but so far the demos I’ve seen often look like Flash circa 1998. That however, seems to be improving.

Specifically with projects like this:

http://raphaeljs.com/

What is it? From their site:

“Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOMobject, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.”

Here are a few screenshots of their samples. What you cannot tell from these, however, is how amazingly smooth the animations are.

I haven’t had time to mess about much with the library for this, but hopefully sometime in the next few days. To me it definitely shows some of the best potential I’ve seen so far for HTML5 really being the Flash-killer that so many people claim it to be. We shall see.

One note: It definitely makes me wonder how this library stacks up against others that must be out there. This thread on StackOverflow has a few clues worth checking out: http://stackoverflow.com/questions/588718/jquery-svg-vs-raphael

Related: I found this blog post this week which as a some interesting arguments both in the post and in the comments on the state of things in HTML5 with regard to being the “Flash/Silverlight Killer”. Well worth a read.

http://silverlighthack.com/post/2010/02/08/Top-Reasons-why-HTML-5-is-not-ready-to-replace-Silverlight.aspx

This week’s Data Visualization Roundup

I’m going to try to start publishing a somewhat regular list of the latest data visualization links I stumble across. I don’t have a whole lot to say about each item on the list, other than I think each may be a good starting point if you are interested in useful datasets that are published publicly, or examples of what you can do with the data. Here’s a handful of resources I’ve come across this week.

Data Visualization: Modern Approaches
http://www.smashingmagazine.com/2007/08/02/data-visualization-modern-approaches/

Dataesthetics: The Power and Beauty of Data Visualization
http://eric-blue.com/2006/10/04/dataesthetics-the-power-and-beauty-of-data-visualization/

A gorgeous set of datacom illustrations by Felix Heinen
http://felixheinen.de/#279663/QSC-Annual-Report

Periodic table of visualization methods:
http://www.visual-literacy.org/periodic_table/periodic_table.html

Data360 datasets
http://www.data360.org/ds_list.aspx

Interesting word frequency dataviz:
http://toxi.co.uk/p5/base26/

Polymap3: Geospatial data, Open Source
http://polymap.org/polymap3

A remarkably deep resource on farming and agriculture resources (amazing collection)
http://www.cd3wd.com/cd3wd_40/cd3wd/index.htm

Google Fusion Tables documentation
http://www.google.com/support/fusiontables/bin/topic.py?topic=27020

University of Texas Map Collection
http://www.lib.utexas.edu/maps/map_sites/outline_sites.html#U

Text adventures, VIC-20, and the TRS-80 – Where it all started

I am definitely in an early tier of computer generations – meaning, my generation was probably one of the first to grow up with computers being a part of our earliest memories and daily lives. Some of my first memories are of playing with the punch cards on which my dad stored his thesis while finishing his degree. I had a few few digital devices like a watch and a football game by second grade, and computers were showing up everywhere. By the time I was in fifth grade, they had really taken hold. My parents bought a Commodore VIC-20 complete with cassette tape storage, and I spent more than a few hours tinkering with it, trying to make it do things that only seemed possible on our highly advanced and ultra-modern (or so I felt) Atari 2600 console. My first full-fledged program was making the computer play the Star Wars theme through a tiny 1″ speaker. And it was THRILLING.

*Grabs geezer suspenders, puts cane in umbrella stand, sits down in rocking chair*

The following year in sixth grade I discovered the computer lab at my new middle school. Full of Tandy TRS-80s, the lab was open to kids each day at 7:00AM, which gave a good hour before any of the other kids started to arrive and go about their non-geek business. I was hooked, as were a handful of friends (or those who became friends as a result of the binary bond we shared). Most of us ran to school in the dark 6:30AM freezing cold of an east coast winter, lugging with white knuckles a backpack full of books on the back and a band instrument in hand, just to get to use those precious machines. It felt like our secret, and it felt like addiction.

The TRS-80 was a gigantic leap forward with it’s integrated screen and built-in floppy drive. The games of choice were text adventures, which when played day after day was just about the most exciting thing we could imagine doing. Well other than flying the space shuttle. But for 6th graders? It was magic.

Which leads me to this:
http://www.getlamp.com/

This film is on my must-see list.

If you’re interested in the text adventures from the old days, here’s a link to somebody who still maintains information on them. http://www.trs-80.com/wordpress/emulation-scott-adams/software-adventures-01/

[UPDATE: I also neglected initially to mention Hiive, publishers of books on the subject: http://www.hiivebooks.com/]

Growing Trees: Experiments in Processing

I mentioned yesterday in my post on distraction that Processing is one of my chief interests right now, particularly as it may have some pretty significant impact on using HTML 5 in interesting ways.

I am particularly interested in how there are a number of pretty easily accessible libraries for “organic” movement – things like bird flocking patterns that are mathematically quantifiable, but generally beyond my math chops to imagine on my own. That said, with libraries that handle the math for me, it becomes much easier to come up with what you could do artistically.

For me, making digital movements resemble the semi-randomness of organic development is essential to the art that I’d like to produce. In the past I’ve used programs like POV-Ray to simulate realistic light conditions in surreal still compositions; but these days I’m more interested in motion, especially making things move in a way that looks, well, real.

Enter project tree.growth (http://blog.blprnt.com/blog/blprnt/project-tree-growth). This project uses some established algorithms (surprisingly simple ones) to generate trees. It took me a few tries to get the sample working correctly (the trouble had to do with a placeholder function that is a stub for inserting hi-res image output code), but once I did the results are truly beautiful.

My hope is to use the libraries for my own projects, adapting them to some of the dataviz ideas I’m mulling over.

Here are a handful of the images that the program produced when I ran the sample.

More to come.

Daily Distraction: What the FUI?

I think you have to have been stuck in a time cave if you are a self-professed geek and not interested in Natural User Interfaces (NUI). But in doing some research on advanced user interfaces I came across something fairly new to me – Fantasy User Interfaces (FUI).

Specifically, this blog post on TechNet:

http://blogs.technet.com/b/next/archive/2011/02/17/from-natural-user-interfaces-to-fantasy-user-interfaces.aspx

Here is a link to a video to give you an idea of what FUI is:

One of the links in that blog post goes to Fast Company Design. And I have to say, this is one of the most beautiful Web UIs I’ve seen in a while.

http://www.fastcodesign.com/1663199/a-master-of-sci-fi-movie-gadgets-moves-over-to-the-real-world?partner=co_newsletter

Inspiration attained.

–jg

Programming things and terrible distractions

In recent months I’ve been completely distracted by a variety of programming baubles and shiny technical objects – some with potential, and others, well, just brain-feeding distractions. Most of these surround motion graphics, film, infographics, and data visualization (all of which could be really useful for some side projects and even a day job or two), but also get into things like iPhone development, Windows Phone 7 development, and just about anything else related to breathing life into new digital life forms.

This is a list of some of those things.

General Data Visualization Ideas and Pretty Things

Currently my biggest distraction has got to be data visualization, or dataviz. Either I’ve just recently started paying attention, or the field of dataviz has exploded in recent years with whole new platforms that are developed with visualization in mind. For me it’s tough because I don’t have a deep statistical analysis background, but with such an abundance of examples and communities surrounding the subject, I feel like it’s within reach.

Here are few examples. Web Designer Depot has posted a list of 5o projects that are pretty amazing visually. I wish I could get a closer look – some of the images are too small to read, and don’t appear to be online anywhere (like the Watson project). http://www.webdesignerdepot.com/2009/06/50-great-examples-of-data-visualization/. Excellent ideas though, and great inspiration for developing my own.

The Data Viz Challenge is probably one of the primary influences that have me so amped up on the subject lately. I am hoping to have something to enter – it may be wishful thinking, but a fun project and a great learning exercise if nothing else. At the very least, it is an amazing set of data for fun projects. http://datavizchallenge.org/data

D3.js also looks like it has potential to do some interesting dataviz work: http://mbostock.github.com/d3/

Processing

Thanks to my friend Brandon, Processing has been coming in and out of the programming picture for me for a couple years now. The “outgoing” portion of focus may be changing however, with the discovery today that a group of folks have written an open source library that converts Processing into HTML5-friendly rendering. This makes the justification for distraction MUCH easier, and I may, for once, actually be able to produce something meaningful with this intriguing language: http://processingjs.org/reference/articles/p5QuickStart

And then there’s this: Your Random Numbers – Getting Started with Processing and Data Visualization: http://blog.blprnt.com/blog/blprnt/your-random-numbers-getting-started-with-processing-and-data-visualization

Other random goodness: Processing and Twitter - http://blog.blprnt.com/blog/blprnt/quick-tutorial-twitter-processing

Windows Phone/.NET/Silverlight Data Viz

Truth be told, my day job involves a lot of work surrounding C# programming. While lots of folks are not exactly thrilled to use .NET, I actually find C# to be both logical and reasonably enjoyable – particularly coming from a C/C++ background. It seems to have some of the best aspects of Java combined with a gigantic, stable platform and community. And yes I know those are “fighting words” in a lot of circles , but I’m going with it.

Windows Phone 7 in particular interests me since it is so easy to use C# skills to quickly produce apps. Further, by combining Silverlight and XNA, and with some of the recent business decisions to advance the platform and support developers, I think WP7 has a huge future. By contrast dev-friendly-wise, I find Objective-C on the iOS platform to be really frustrating at times. I’m well aware that it probably has more to do with my own path to this point, but regardless, it’s much easier for me to grasp some of the creative opportunities that .NET offers. That might change as I work through some of my iPhone side projects, but so far I find working in C# much quicker. MonoDevelop for iPhone enables that so far, but I’d like to give Cocoa and Objective-C another shot sometime down the road.

Getting back to the topic, here are a few examples of WP7 and .NET dataviz examples and tools that interest me.

I wish I spoke whatever language it is that the narrator is speaking. But regardless, the project looks fascinating. http://vimeo.com/5785617

Visifire (http://www.visifire.com/silverlight_wpf_charts_gauges_gallery.php) looks interesting for ideas, but I think it’s a bit canned for what I’m looking to learn how to do. Still, interesting.

This link is probably much closer to what I’m looking for. Building Data Visualization Applications with WPF & Silverlight. WPF in particular seems to make some animation things much easier.

Again, this is probably too canned, but interesting nonetheless. http://archive.msdn.microsoft.com/mschart

An ASP.NET chart control intro: http://weblogs.asp.net/dwahlin/archive/2008/11/25/getting-started-with-the-asp-net-3-5-chart-control.aspx

Ruby and Git

Lately, Ruby on Rails has been grabbing my attention again. Where I generally have to focus on C# for much of my day job, I am far more interested right now in exploring the rapid dev possibilities of Ruby. I’ve also recently started paying attention to GitHub. Here are a few links.

Ruby

• One of these days I want to create my own desktop RSS reader. There are a ton out there, but none that do everything that I’m looking for. This Ruby project may be just the thing to get me started: http://www.igvita.com/2007/03/22/agile-rss-aggregator-in-ruby/
• Starting with Ruby: http://benpoole.com/bp.nsf/weblog/201102161126

Git

• Surveyor is a project on GitHub that may come in handy for a number of side projects. It helps to create online surveys and such: https://github.com/breakpointer/surveyor
• Mastering Git version control – a video: http://webcache.googleusercontent.com/search?q=cache:R4gBwGjva4gJ:oreilly.com/catalog/0636920017462+mastering+git+o’reilly&cd
  =1&hl=en&ct=clnk&source=www.google.com
• Archive/Tar wrapper on GitHub: https://github.com/mschilli/archive-tar-wrapper-perl

HTML5 and CSS3

Lots of new opportunities for visual goodness with the new standards. Hopefully browsers implement them reasonably well. Here are a few links on the getting started list for me.

Visual Studio: http://blogs.msdn.com/b/webdevtools/archive/2011/01/27/html5-amp-css3-in-visual-studio-2010-sp1.aspx

HTML5 Sketch tools: http://webdesigneraid.com/html5-sketching-tools-every-designers-must-know/