Legos are my Poison

Legos are my poison of choice.  That LEGO Deathstar? Yeah, they've got my number.

For some it's model trains.

We tend to discount these activities because they are economically non-viable.  "Grown men playing with toys."

Well, are you in the manufacturing sector and not doing 3D printing and/or nanotech?  Go home, you are playing with toys. How about energy? Are you building a molten salt nuclear reactor? If not, you're just playing with toys. Are you in the health sector? Paying attention to Reiki? If you are not doing far out "energy healing" then you are just playing with toys.  Whatever those (as my mom calls them) "woo-woo" folks are doing there is something there. Let us do Science to It!

We are in that part of the S-curve that goes pretty much straight up and down and if you are not on the way up, brother you're going down.

If you are not preparing for a world of infinite energy and infinite malleability then you are, in effect, like a child playing with toys and refusing to deal with reality.  You should be feeling giddy or you're not doing it right.

new_group 2500 300 45 "x" make_effect trans

Every once in a while I write some code that is so cool it makes me ecstatic.

new_group 2500 300 45 "x" make_effect trans

I'm working on a single-page HTML document that implements a kind of theatrical stage using SVG and D3.js with my Xerblin user interface metaphor.

Last night I got it to a stable point where my task shifted from creating the internal structure to "sculpting" a set of commands that will make it easy to create animations.

I started with a simple command word new_group that creates a new SVG "group" element (this is a kind of invisible container, like a HTML div element) inside a D3 selection and puts it on the stack.  In order to see it I made it also automatically create a green rectangle in the group.

The idea is that you create a new group and add visible SVG elements to it to create "characters" or "props" for animation.

I'll write some words to do that later, but for now I have created a command word set_attr that takes three things from the stack: a D3 selection, an attribute name, and a value, and it sets the attribute on the selection.

This lets you directly and immediately modify all the SVG attributes of an element (or set of elements) including position and transforms!

I also created a make_effect command word that takes just an attribute name and value from the stack and returns a function that can be used to modify attributes as part of a D3 transition.

To provide D3 transitions (awesome animations!) I made a trans command word that takes a D3 selection, a delay value, duration value, and an effect function (as created by the make_effect command word) and applies the effect to the selection with the given delay and duration.

So, breaking it down:

new_group

This creates a new group with a green rectangle in it to make it visible. It will be put on the stack.

2500 300

This puts two integers onto the stack. These will be our duration and delay values in milliseconds.

45 "x" make_effect

These three commands first put 45 and the string "x" onto the stack, and then the make_effect word turns them into an "effect function".  At this point the stack has the group/selection on it, followed by the duration and delay, then the effect function.

trans

Then the call to trans applies the effect to the group with the given duration and delay.

If you go to the demo page and put that command into the text entry and press "run" you should see a green rectangle appear and move to the left. Wow, right?  I know!

update

I forgot to include information on the command system "Xerblin" itself.

This is an old project of mine that defines a really simple but complete programmable command system.

The original project page has some basic description: https://code.google.com/p/xerblin/

I've merged the Xerblin user interface into my educational Pigeon Computer project, and the manual for that has more info:
http://phoenixbureau.github.com/PigeonComputer/user_interface.html

On the live page http://calroc.github.com/aum-gravity/xerblin-stand-alone.html you'll see:

• "Hi There!"
• The SVG window, about 3X wider than high.
• Buttons for each of the command words in the dictionary.  (If you "inscribe" new words in the dictionary they automatically get a button here.)
• A long text entry for "command line" interaction. (Don't hit enter, there's a bug that I'm about to fix that makes the page reload! D'oh!)
• Two sets of three buttons that provide "meta" commands, interface commands that aren't in the dictionary.

I should write up the meta-controls but for now just put this in the text entry and click "run" button:

new_group 2500 300 45 "x" make_effect trans

You should see a green rectangle appear and immediately animate moving to the left.

Yay!


Just as a hint:  already with this interface and these controls you can create as many of these "groups" (visually represented by the green rectangle outlines) and animate them (including scale and rotation!!) and attach the animations to new buttons/words in the dictionary.

Not bad, eh?

Single-page Xerblin with D3.js

I spent a few hours today porting my "xerblin" user interface metaphor to Javascript.

I've been developing a d3.js-powered page to experiment with dynamic visualizations.  Once I had a fun demo going it seemed obvious to use it to wrap the xerblin system (I'd been planning to do something like this for years and years.  I created a 3D system in Tkinter to support it but never got enough traction with it until now.)

At first I had a simple Flask server that responded to commands, updated a xerblin interpreter, and sent back a representation which was then rendered client-side with SVG.

I spent a bunch of time playing with different ideas for permitting the server-side xerblin interpreter to specify client-side dynamic visualizations.  At some point it just seemed like it would be simpler and much cooler to port the xerblin core to JS and just have a self-contained page.

This means that you can go to the demo and "save page as..." to your desktop and play with it locally! You don't even have to check out a copy from github or anything.

This is inspired by the TiddlyWiki project which is a self-contained single-page HTML and JS wiki document.  I love it.

TiddlyWiki has the ability to save copies of itself to your file system (if you permit it) and it will automatically save backup copies.  It should be fairly easy to let the stand-alone D3+Xerblin demo save itself (with your current state aptly serialized!)  It might also be interesting to save state in a cookie.

Does it Do Anything?

So really you should read the source (and modify it!) but I'll write up a simple tour soon!

Keep in mind that there aren't really any commands for anything other than the xerblin "not-quite-language" itself yet, as this is very much a work in progress and fresh out of the oven.

Riches and Roses

I'm at the point now with the user interface I'm working on (playing with!) where I am confronted with an embarrassment of riches in terms of wonderful design choices.

I'm finding the separation of (graphical, dynamic) user interface from the underlying virtual machine (the xerblin not-quite-language runtime) to be extremely useful and gratifying.

Because the Flask server does not reload the Python interpreter state when I change a template file I can adjust the SVG rendering code and refresh the browser to see the same state rendered with the new code!

Right now I have come to the point where I am creating dictionaries (in xerblin these are sorted binary trees made of tuples, too much to get into here, persistent data structures) to represent SVG elements, as one possibility for "internal" authoring.

Because the dictionaries arrive from the server as JSON arrays, and because the display code is already written to recursively display array contents, the  contents of the dictionaries are already automatically rendered.

Only it doesn't look great.

The array code was written (last night, at 2am) to display linear stacks, but the dictionaries are binary trees, so they sort of pile onto themselves when rendered.

It makes for lovely fractal patterns that are really beautiful to look at, but they could be more useful...

Now I can leave a dictionary on the stack and edit the rendering code to try out different tweaks for displaying arrays, and when I refresh the page I'll see the same dictionary rendered with the new code I just tweaked.

"Roses, just roses..."

Finally Beautiful Web Xerblin

I am working on a D3.js-powered "web console" of sorts for the xerblin user interface.

It's a simple Flask server that wraps a xerblin world and provides a single AJAX call the runs a command on the server and returns a (JSON-encoded) copy of the xerblin state.

The Flask server also serves a web page that includes an SVG display and controls.  You can execute commands through the AJAX call and the returned state is automatically rendered in the SVG using D3.

That's essentially what you're seeing in the screenshot above.

Myriad details

• It will be very easy to include the git-based permanent history store from the Pigeon User Interface in the Flask server to provide persistent history across sessions.
• The server is designed to be run locally on a per-user basis and there is currently no support for hosted multi-user set-ups.  This could be done but it's not something I'm interested in personally.  (I think the biggest challenge would be setting up resource quotas.)
• You can certainly run the Flask server and xerblin instance on one machine and the browser and "thick client" on another machine.  In the near future the web page and server may act as a front-end to Pigeon Computer machines (small micro-controllers running the xerblin-like Pigeon Firmware) but that would require more support from the firmware or something.
• The internals of drawing the xerblin stack with set of recursive D3.js funcs have some gnarly and interesting stuff.  It works but I think I'm doing strange things in a few places.
• In order to give you a dynamic sense of the history of your interaction the SVG rendering keeps the previous stack displays visible in the window but it moves them aside, scales them down, rotates them a little, and finally makes them partially transparent.  The net effect is like a fractal, depending on what you're doing, of course.
• It should be fairly easy to provide a REST API that permits viewing and returning to earlier versions of your xerblin state.  I have high hopes for rendering things like this with the SVG and D3.js capabilities.
• Next on the list, though, is some sort of generic way to build SVG data structures using the xerblin interface itself, as well as D3.js transitions and such, and then rendering those in the SVG window.  This will let you create whatever visual user interface elements you like.  I want to create sort of a Squeak-light, if you will.

Web as Theater

Screenshot of a D3.js demo

The most cutting edge human-interface design is so far out there most people can't even conceive of it.  (TODO: mention Ted Nelson!)

The ultra-violet end of the spectrum has to do with treating the computer as theater (and if you think Pixar et. al. are doing what I'm talking about, no, not that, something else.)

This is a wee demo I've started to play around with user-interface theatre.  It's meant to be fairly self-explanatory. "Discoverable".  Have fun.

Transport

You are in the future, and wish to travel to the beach. The beach is far, far enough that today you would have to take a car. Here is how it is in the future:

You step outside and begin to walk.  The transport appears in front of you at a comfortable distance. It is a large sphere nearly the size of a house. There is very little sound and no wind.  The mechanism of the transport moves the air around the body of the vehicle in such a way as to prevent turbulence.

The doorway of the transport dilates and you continue your comfortable pace into the interior, which is simply a short path leading to the doorway at the rear of the transport.

You enter, the door closes, and the transport moves to the beach. It travels at a terrific velocity and can accelerate and decelerate extremely rapidly but these forces are not felt by you at all as you continue along the path within the vehicle.

The rear door dilates and you continue on towards the nearby beach.  The transport leaves to serve another user.

The entire trip within the transport lasted less than five seconds and throughout your journey to the distant beach you were simply strolling without breaking stride the entire time from your front door to the breakers.

My Life as a D&D Character

I don't normally dwell on my own past.  In fact, most days I would be hard pressed to tell you what I was doing just a few days ago, except in a general way, and it would be the skull-sweat work of several minutes to try to reconstruct it from what dim memories I might dredge up.

I'm simply not that interesting to myself.  It's not that I lack self-regard, quite the opposite in a certain operational sense.  However, mine is a life of ideas and grand visions, and the day-to-day nitty-gritty of living it out just doesn't register much.

I collect, even hoard, ideas.  A friend who was into astrology once told me that this was because I was a Taurus with Mercury conjunct the Sun in the sign, or first house, or something, and that the typical Taurus tendency to collect material things therefore accrued in me to concepts instead.  It seemed apt.

Anyhow, be that as it may, from time to time I do become interested in myself as myself (rather than as instrument or way to get from here to there) and tonight is one of those introspective nights.

I'm not an astrologer. I know enough astronomy to know that astrologers, whatever they are doing, are not actually talking about the real sky. And I know enough astrologers to know that what they are doing (some of them) is not nothing.  (Too bad they are such headstrong jerks about not taking themselves seriously the right way: do science to it sillies!)

The best astrologer I ever met could tell you things about yourself from reading your chart that would just blow your mind.  This was with a "cold" start, walk in off the street, give her your birth-data and WHAM! Get ready to grow or freak out!  Strange thing was, her chart program had been set to the wrong timezone when she first set it up so all of the charts she ever ran with it were "wrong". Go figure.

Whatever.

What I have been in the past is an avid AD&D player (usually as DM but also as a player.)  I understand that the WotC people have acquired the system from ye olde TSR and have not completely wrecked it, is that right?

Whatever.  Read Gygax and be knowledgeable.  The old DM's guide was a freaking education in itself.  There is all kinds of stuff in there: the old flower language for instance.

So, I've been thinking about myself and how I would describe myself as an AD&D character.  Sort of an autobiographical sketch in RPG space. Without further ado...

I started out thinking about my alignment in AD&D terms.  Just to refresh your memory the alignment system was a simple two-axis grid with Good-Neutral-Evil as one axis and Lawful-Neutral-Chaotic as the other.

Angels and Devils would be archetypal Lawful-Good and Lawful-Evil, respectively. (Devils are evil but they will keep a contract or bargain.)

Good and evil, and neutral, are pretty easy to understand. Lawful referred to the tendency to obey laws and keep one's word, while Chaotic characters were unreliable or unpredictable.

Okay, so, when I first stared out, as a wee little kid, I was lawful-good. By the time I got to high-school with the trauma of childhood I had become chaotic-evil. Then during high school I finally found some cool friends and started smoking marijuana and that really helped me cope, and I swung to chaotic-good.

Finally, after much work on myself and twenty years down the line, I'm back to lawful-good. Whew!  But it is a much higher-order ("wiser" is the word I'd like to use here but that would be pretty pretentious, wouldn't it?) form of lawful-good than when I was a young child.

I don't know why exactly but it feels kinda good to map this out this way.