I’ve always looked at math as a tool to be mastered and wielded
rather than subject matter to be absorbed.
— Steven Wittens
That remark on Wittens’ blog is a worthwhile viewpoint for a discussion today on Twitter about what we mean by behavior change and learning. But let me backtrack a bit:
When my son was younger — when a computer weighed nearly as much as he did — he got interested in programming. After a while he could create startling graphics via ray-tracing, though at the time our home computer was so slow he’d start the process before going to bed, and check in the morning to see if it was done.
You can find lots of demo contests, with lots of prizes, but the real rewards seem to be (1) “I did it!” and (2) bragging rights.
Which aren’t bad reinforcers to learning.
I don’t know anything about creating a demo, but I do know animated, focused discussion when I see it. I can usually tell good explanation from bad, and Witten’s description of his own work is admirable.
While [generating all data on the fly to save space] might seem like a black art, often it just comes down to clever use of (high school) math…
Unlike the actual 1K demo, the code snippets here will feature legible spacing and descriptive variable names.
He explains initialization (how the demo starts) in two sentences, and then uses bullets to introduce the four main parts: activating the wires, making them visible, coloring them, and animating the camera.
You can read the explanation for yourself. I enjoyed the addendum:
After seeing the other demos in the contest, I wasn’t so sure about my entry, so I started working on a version 2. The main difference is the addition of glowy light beams around the object.
As you might suspect, I’m cheating massively here: rather than do physically correct light scattering calculations, I’m just using a 2D effect. Thankfully it comes out looking great.
Essentially, I take the rendered image, and process it in a second Canvas that is hidden. This new image is then layered on the original.
So, whaddya think?
From my son’s experience and from the comments on Wittens’s blog, I’d say there’s a lot of informal, choose-your-path, get-into-it learning in the demo world. Note what some of the (currently) 32 comments say:
- I always wanted to start learning more about this, but haven’t found any source for explanation. I like the step-by-step explanation that you have since it goes into the “why” any just not here’s my code. By the way, do you have any recommends for books into this topic?
- I just wanted to chime in with another big “Thank you!” for taking the time to write this up. Like the other commenters, I’ve long been fascinated and mystified by some of these techniques, and your explanations are brilliant and accessible.
- I liked this demo so much that I took some time off my working day to port it to Flash, hoping to learn the internals of it and how it’s done… I got something 90% similar to the JS version.
Although I was able to port the code line-to-line, I couldn’t understand many parts of it. I tried to look for some commenting somewhere on the net without results. So you can imagine how cool this article is to me!
- If anyone’s interested in having this version (AS2) please let me know.
- (Wittens, responding to a commenter:) I know there are still opportunities for shortening it by shaving off a few bytes here and there. But I find the problem in these challenges is rarely one byte. It’s usually 200-300 bytes over the limit that you have to simply throw away and replace with something much smaller and equally good.
- I would LOVE to see this as an audio visualizer. I made the visualizer on indieed.com, check out a song to see it. It’s nowhere NEAR as awesome as this.
Would you be willing to sell a tweaked version of this to indieed (its my company) as our default visualizer for our player?
Please email me, I’m quite impressed.
There’s a long and very technical comment with suggested improvements from Jason Knight, with a calm if sly reply from Wittens: “Be careful about optimizing blindly…you added 36 characters to save 15.” And near the end end, after someone’s created a Flash version, other people start offering ways to improve that.
Learning and worth
At first, I thought of that last comment as some serious summative evaluation: “I want to buy this thing you made.” In a way, thought, all the comments are. And this is how learning really happens: you work away at something, you search for ways to achieve your goal (or maybe redefine it), and you work at the thing again until you produce a result.
Nearly all my clients have been large organizations, and their traditional models don’t always take in this reality. Lots of people have said for a long time that talking isn’t teaching and that listening isn’t learning. A misplaced emphasis on efficiency, often unmoored from effectiveness, tempts managers (and, let’s face it, training departments) to a throughput model.
CC-licensed ray-tracing image by Susam Pal.