In my previous blog entry I introduced the programming language Logo. When I worked at an elementary school, I used Logo as a way to introduce programming to kids. But I noticed that just typing was a barrier to younger kids, so I created Nugo -- kind of Logo-lite, with a fully graphical interface. It was designed primarily to run on a tablet with a touch screen interface.
I am fairly pleased with Nugo. But I have two major concerns with it: One, it was created entirely in vanilla JavaScript; and while I did my best to make it extensible, the code was getting harder to maintain. Second, the system doesn't allow for variables or mathematical expressions, only constants. Easy to use, but the lack of variables is very limiting.
And that's lead me to this newest project, Rho. My vision for Rho is in many ways similar to what I did with Nugo, but addressing the two issues mentioned above. For one thing, this new project is being created in React. And second, the interface will allow for the use of variables, and the building of more complex expressions.
I'm going to start with that last bit: an interface to build expressions with functions and variables. This will be accomplished by composing functions, because functions are very flexible. A function could simple return a constant value; it could get or set the value of a variable; it could act as an operation like addition. And by allowing the arguments to functions to be functions themselves, basically any expression can be built up.
The interface does force the user to think about the structure of the expression they want to construct. For example, consider the following expression: x = x + 5. How would that expression be evaluated? First the value of x would be retrieved; then 5 would be added to that value; and finally the resulting sum is stored in x.
Let's diagram the way the computer breaks down the expression:
=
|___
| |
x +
|___
| |
x 5
This tree structure is how you want to think about the expression when entering it into Rho.
The basis of the expression composition could be a simple drop down menu that lists all the available functions -- or, in some cases, perhaps a list that includes just functions that make sense in a certain location. For example, consider the steps for entering the above expression:
The first step will be to select the Assignment function. Then the initial function selection menu would be replaced with the Assignment function. On the left most functions don't make sense -- in fact, the only thing that should go there is a variable to be assigned to. On the right would be a full function selection menu; and, in between, an equals sign (or some other symbol for assignment).
[variable input] = [function selector]
or
[variable input] <- [function selector]
On the left, just enter "x" and hit return. On the right, you would select Addition. Now the interface looks something like: x <- ( [function selector] + [function selector] ). On the left side of the addition, choose "get variable" and enter "x". On the right, choose "constant" and enter 5.
So that's the idea. In the next post, I'll get into how I implemented this in React.
Top comments (0)