Phosphor - Advances

Today I've released a few new additions to the Phosphor code base, and pushed them life to the development environment. For some unknown reason, Google App Engine is serving up pages with 0 content length on occasion, which provides to useful error message as it is returning 200 OK. If this happens to you, simply reload the page and it seems to work 100% of the time.

Bar Graph Tutorial

Since I've added the shared object memory, there's a simple little tutorial on how to use shared objects. To share your own objects, simply press CMD|CTRL - S while hovering over them in the inventory. Some times it doesn't save the first time, but I think this is a symptom of the same wonkiness I'm seeing with the rest of the App Engine code.

What is so cool about being able to generate bar graphs is how little actual code went into the implementation. I don't demonstrate it in the tutorial, but the code for the Bar Graph is:

BarGraph = let(Widget, <br />        draw: function() { <br />                var $self = this; <br />                this.data.every(function(v,i) { <br />                         Screen.at($self.x+(i*$self.w),$self.y).by($self.w,v*$self.h)[$self.colors[i%$self.colors.length]]().fill() <br />                )},
data: ,
colors: 'red','orange','yellow','green','blue','purple'

Sliders Tutorial

While drawing bar graphs may be pretty cool, considering it is just some javascript you can embed in any page to display any data you can parse into an array, the sliders are even cooler. This past week, I added a very simple container / component model to the Phosphor interface. I also added a couple basic Graphic assets to make it easier to build little applications. Since interactivity is important, this tutorial displays how we can have multiple elements update each other in real time. The plumbing is incredibly simple:

What this means is that once you create a container, deactivate the events you don't want to track any more, all you are left with are a couple little functions to write. In the tutorial, I write a grand total of two functions, one to calculate the change in X position from origin:

delta: function()  Math.floor(100*(this.x-this.parent.x)/(this.parent.w-this.w))

And the second function is to query what the current state of the slider is for the text widget's display:

tick: function()  this.content = this.target.delta()

Since I used the tick method, and didn't override the draw method, the calculation is performed before the draw message is sent to the text widget each cycle. This keeps the synchronization between the text display and the bar's rendering fairly consistent, even if it start lagging the mouse's movements.

Future Direction

I'm going to finish off a few more widgets:

And then my focus is going to shift back to finishing the examples for the book I'm writing on programming. The concept behind the book is to make programming accessible to everyone. Rather than writing a text book for computer scientists, I'm going to focus on writing a book aimed at people who would benefit from learning to use their computer as a tool, not just to run applications. It turns out incidentally, that market also happens to include high school students and middle schoolers, who aren't quite ready to devote their lives to advanced mathematics. And quite frankly, such a book and toolkit could go a long way towards placing programming among the skilled trades, like carpentry, sculpting, metal working, and poetry.