Tag Archives: Bret Victor

Visible Algebra I

This is the first in a series of articles about how algebra could be implemented without using the standard language of algebra that so many people find difficult. The code for the graphs are in the Mathematica notebook Algebra1.nb.

An algebra problem

Suppose you are designing a window that is in the shape of a rectangle surmounted by a semicircle, shown above for the window with width 2 and rectangle height 3. 

This example occurs in a tiresomely familiar calculus problem where you put a constraint on the perimeter of the window, thus turning it into a one-variable problem, then finding the values of the width and height that give the maximum area.  In this post, I am not going to get that far.  All I will do is come up with a calculation for the area.  I will describe a way you might do it on a laptop five or ten years from now. 

You have an algebra application that shows a screen with some operations that you may select to paste into your calculation.  The ones we use are called plus, times, power, value and input. You choose a function called value, and label it "Area of window". You recognize that the answer is the sum of the areas of the rectangle and the area of the semicircle, so you choose plus and attach to it two inputs which you label "area of rectangle" and "area of semicircle", like this:

 

The notational metaphor is that the computation starts at the bottom and goes upward, performing the operations indicated.

You know (or are told by the system) that the area of a rectangle is the product of its width and height, so you replace the value called "area of rectangle" with a times button and attach two values called $w$ and $h$:

 

You also determine that the area under the semicircle is half the area of a circle of radius $r$ (where $r$ must be calculated).

 

You have a function for the area of a circle of radius $r$, so you attach that:

Finally, you use the fact that you know that the semicircle has a radius which is half the width of the rectangle.

Now, to make the calculation operational, you attach two inputs named "width" and "height" and feed them into the values $w$ and $h$.  When you type numbers into these buttons, the calculation will proceed upward and finally show the area of the window at the top.

In a later post I will produce a live version of this diagram.  (Added 2012-09-08: the live version is here.) Right now I want to get this post out before I leave for MathFest.  (I might even produce the live version at MathFest, depending on how boring the talks are.) 

You can see an example of a live calculation resembling this in my post A visualization of a computation in tree form.

Remarks

Who

  • This calculation might be a typical exercise for a student part way along learning basic algebra. 
  • College students and scientists and engineers would have a system with a lot more built-in functions, including some they built themselves.

Syntax

  • Once you have grasped the idea that the calculation proceed upward from the inputs, carrying out the operations shown, this picture is completely self-explanatory.
    • Well, you have to know what the operations do.
    • The syntax for standard algebra is much more difficult to learn (more later about this).
  • The syntax actually used in later years may not look like mine.
    • For one thing, the flow might run top down or left to right instead of bottom up. 
    • Or something very different might be used. What works best will be discovered by using different approaches.
  • The syntax is fully two-dimensional, which makes it simple to understand (because it uses the most powerful tool our brain has: the visual system).
    • The usual algebraic code was developed because people used pencil and paper. 
    • I would guess that the usual code has fractional dimension about 1.2. 
    • The tree syntax would require too much writing with pencil and paper.  That is alleviated on a computer by using menus.
    • Once you construct the computation and input some data it evaluates automatically.
  • It may be worthwhile to use 3D syntax.  I have an experiment with this in my post Showing categorical diagrams in 3D.

Later posts will cover related topics:

  • The difficulties with standard algebraic notation.  They are not trivial.
  • Solving equations in tree form.
  • Using properties such as associativity and commutativity in tree form.
  • Using this syntax with calculus.
  • The deep connection with Lawvere theories and sketches.

References

Send to Kindle

Computable algebraic expressions in tree form

Invisible algebra

  1. An  expression such as $4(x-2)=6$ has an invisible abstract structure.  In this simple case it is

using the style of presenting trees used in academic computing science.  The parentheses are a clue to the structure; omitting them results in  $4x-2=6$, which has the different structure

By the time students take calculus they supposedly have learned to perceive and work with this invisible structure, but many of them still struggle with it.  They have a lot of trouble with more complex expressions, but even something like $\sin x + y$ gives some of them trouble.

Make the invisible visible

The tree expression makes the invisible structure explicit. Some math educators such as Jason Dyer and Bret Victor have experimented with the idea of students working directly with a structured form of an algebraic expression, including making the structured form interactive.

How could the tree structure be used to help struggling algebra students?

1) If they are learning on the computer, the program could provide the tree structure at the push of a button. Lessons could be designed to present algebraic expressions that look similar but have different structure.

2) You could point out things such as:

a) “inside the parentheses pushes it lower in the tree”
b) “lower in the tree means it is calculated earlier”

3) More radically, you could teach algebra directly using the tree structure, with the intention of introducing the expression-as-a-string form later.  This is analogous to the use of the initial teaching alphabet for beginners at reading, and also the use of shape notes to teach sight reading of music for singing.  Both of these methods have been shown to help beginners, but the ITA didn’t catch on and although lots of people still sing from shape notes (See Note 1) they are not as far as I know used for teaching in school.

4) You could produce an interactive form of the structure tree that the student could use to find the value or solve the equation.  But that needs a section to itself.

Interactive trees

When I discovered the TreeForm command in Mathematica (which I used to make the trees above), I was inspired to use it and the Manipulate command to make the tree interactive.


This is a screenshot of what Mathematica shows you.  When this is running in Mathematica, moving the slide back and forth causes the dependent values in the tree also change, and when you slide to 3.5, the slot corresponding to $ 4(x-2)$ becomes 6 and the slot over “Equals” becomes “True”:

As seen in this post, these are just screen shots that you can’t manipulate.  The Mathematica notebook Expressions.nb gives the code for this and lets you experiment with it.  If you don’t have Mathematica available to you, you can still manipulate the tree with the slider if you download the CDF form of the notebook and open it in Mathematica CDF Player, which is available free here.  The abstractmath website has other notebooks you may want to look at as well.

Moving the slider back and forth constitutes finding the correct value of x by experiment.  This is a peculiar form of bottom-up evaluation.   With an expression whose root node is a value rather than an equation, wiggling the slider constitutes calculating various values with all the intermediate steps shown as you move it.  Bret Victor s blog shows a similar system, though not showing the tree.

Another way to use the tree is to arrange to show it with the calculated values blank.  (The constants and the labels showing the operation would remain.)   The student could start at the top blank space (over Times)  and put in the required value, which would obviously have to be 6 to make the space over Equals change to “True”.  Then the blank space over Plus would have to be 1.5 in order to make multiplying it by 4 be 6.  Then the bottom left blank space would have to be 3.5 to make it equal to 1.5 when -2 is added.  This is top down evaluation.

You could have the student enter these numbers in the blank spaces on the computer or print out the tree with blank spaces and have them do it with a pencil.  Jason Dyer’s blog has examples.

Implementation

My example code in the notebook is a kludge.  If you defined a  special VertexRenderingFunction for TreeForm in Mathematica, you could create a function that would turn any algebraic expression into a manipulatable tree with a slider like the one above (or one with blank spaces to be filled in).  [Note 2]. I expect I will work on that some time soon but my main desire in this series of blog posts is to through out ideas with some Mathematica code attached that others might want to develop further. You are free to reuse all the Mathematica code and all my blog posts under the Creative Commons Attribution – ShareAlike 3.0 License.  I would like to encourage this kind of open-source behavior.

Notes

1. Including me every Tuesday at 5:30 pm in Minneapolis (commercial).

2. There is a problem with Equals.  In the hacked example above I set the increment the value jumps by when the slider is moved to 0.1, so that the correct value 3.5 occurs when you slide.  If you had an equation with an irrational root this would not work.  One thing that should work is to introduce a fuzzy form of Equals with the slide-increment smaller that the latitude allowed in the fuzzy Equals.

Send to Kindle