Permalink
Browse files

Fix ports for case rhs and patterns being switched. Revise tutorial.

  • Loading branch information...
1 parent 96c10d9 commit 798466004c3dfe10fd1b3b25df23e66d61ec1e87 @rgleichman committed Jan 6, 2017
Showing with 42 additions and 20 deletions.
  1. +4 −4 app/Icons.hs
  2. +37 −15 examples/tutorial.hs
  3. +1 −1 examples/tutorial.svg
View
@@ -175,16 +175,16 @@ resultPort :: SyntaxNode -> Port
resultPort = const resultPortConst
caseRhsPorts :: [Port]
-caseRhsPorts = fmap Port [2,4..]
+caseRhsPorts = fmap Port [3,5..]
casePatternPorts :: [Port]
-casePatternPorts = fmap Port [3,5..]
+casePatternPorts = fmap Port [2,4..]
guardRhsPorts :: [Port]
-guardRhsPorts = caseRhsPorts
+guardRhsPorts = casePatternPorts
guardBoolPorts :: [Port]
-guardBoolPorts = casePatternPorts
+guardBoolPorts = caseRhsPorts
argumentPorts :: SyntaxNode -> [Port]
argumentPorts n = case n of
View
@@ -5,6 +5,12 @@ How could it be extended? I feel that we are just at the very beginning of
visual programming languages, and that there is a huge universe of visual
programming language designs waiting to be discovered.
+This tutorial assumes that the reader has some familiarity with the basics
+of Haskell.
+
+
+Function Application:
+
Let's start with y = f x.
The function f is applied to the argument x, and the result is bound to y.
-}
@@ -39,7 +45,13 @@ y = (*) ((+) 8 7) 2
-}
y = (*) ((+) 8 7) 2
-{-That was probably not too surprising. How about this?-}
+{-
+
+The Mystery Icon:
+
+That was probably not too surprising. How about this? What does the green icon
+represent?
+-}
f x = 3 * x
{-Let's try to figure it out. First look at the f. It's green and in an orange
@@ -59,7 +71,7 @@ y = (\x -> 3 * x) 7
{-Now for the answer. As you might have suspected. The green icon defines a
function. The dot inside the icon is the formal parameter. The blue square
-represents the value returned by function (i.e. what's on the right size
+represents the value returned by function (i.e. what's on the right side
of the -> in a lambda expression). The green circle represents the function
that has been defined.
@@ -129,7 +141,11 @@ f x y = max (2 * y) (1 + x)
-}
f x y = max (2 * y) (1 + x)
-{-Something different about Glance is that Glance does not have any rigid code regions.
+{-
+
+No Code Regions:
+
+Something different about Glance is that Glance does not have any rigid code regions.
In other visual programming languages, the icons inside the body of a function
would be restricted to a rectangle. In Glance, all icons are on the same level.
Theoretically, Glance's flat layout should allow more compact drawings since space
@@ -153,8 +169,11 @@ f1 x y = (\z -> x + z) y
f1 x y = (\z -> x + z) y
{-
+
+Graph and Tree Topology:
+
Let's go back to the function apply icon. If you are used to other graphical
-programming languages, you may be thinking that drawing below
+programming languages, you may be thinking that the drawing below
does not look very graphical. Here graphical is referring to a graph topology,
and no it does not look graphical. The core idea is that nested function
application has a tree topology, not a graph topology. The result of each
@@ -181,13 +200,16 @@ y = (((2 + 4 * 4) - (7+ 2 + baz)*8)/21)
-}
y = (((2 + 4 * 4) - (7+ 2 + baz)*8)/21)
-{-Continuing on, here is a simple pattern match.
+{-
+Patterns:
+
+Continuing on, here is a simple pattern match.
(Just x) = Just 3
-}
(Just x) = Just 3
{-
-Since constructors are functions, the match icon has a topology similar to
+Since data constructors are functions, the match icon has a topology similar to
the apply icon.
Now that you are familiar with matches, here's a simple case expression.
@@ -200,19 +222,17 @@ y = case maybeInt of
Just x -> x + 1
{-The case icon is the magenta icon with three yellow circles next to it.
-The matches (the textual part left of the arrow) connect to the triangles,
-and the result for each match (the textual part to the right of the arrow) is
-indicated with the yellow circle.
+The patterns connect to the triangles, and the result for each match is indicated
+with the yellow circle.
The result for the first match (Nothing -> 0)
connects to the circle on the case icon since the right hand side (0) does not
use any value from the pattern (Nothing). For the second match, since the result
(x + 1) is connected to its pattern (Just x), Glance can connect
-the result to a new yellow circle.
+the result of (x + 1) to a new yellow circle.
-If the result always had to be connected to
-the yellow result circle on the case icon, this would create many cycles in the
-graph, making the layout much messier.
+
+Guards:
Guards and if expressions look like this:
y | x == 0 = 1
@@ -241,11 +261,13 @@ factorial x =
then 1
else factorial (x - 1) * x
-{-Bonus section:
+{-
+Compose (bonus section):
The depth of an icon's application tree is called the nesting depth.
For example, The icon representing "factorial (x - 1) * x" above has a nesting
-depth of 3.
+depth of 3, since it is an apply icon (depth=1), inside an apply icon (depth=2),
+inside an apply icon (depth=3).
To reduce nesting depth, Glance has an icon that represents an argument applied
to a composition of functions.
Oops, something went wrong.

0 comments on commit 7984660

Please sign in to comment.