update built-in examples to use newly introduced syntax

docs/rkgk.dj

@@ -1,5 +1,15 @@
 # Introduction to rakugaki
 
+*Warning: Neither rakugaki, nor this introductory manual is finished.*
+While it will always use the most up-to-date and recommended syntax, there are things it does cover, and it will probably be rebuilt to improve coverage of features once the app stabilises a bit.
+
+For now, I recommend cross-referencing it with the following documents:
+
+- [haku language reference](haku.html)
+- [System library](system.html)
+
+---
+
 Welcome to rakugaki!
 
 I hope you've been having fun fiddling with the app so far.
@@ -28,7 +38,7 @@ In case you edited anything in the input box on the right, paste the following t
 -- and see what happens!
 
 withDotter \d ->
-  stroke 8 #000 (d To)
+  stroke 8 #000 d.To
 ```
 
 rakugaki is a drawing program for digital scribbles and other pieces of art.
@@ -86,8 +96,8 @@ If you want to draw multiple scribbles, you can wrap them into a list, which we
 -- Draw two colorful dots instead of one!
 withDotter \d ->
   [
-    stroke 8 #F00 (d To + vec 4 0)
-    stroke 8 #00F (d To + vec -4 0)
+    stroke 8 #F00 (d.To + vec 4 0)
+    stroke 8 #00F (d.To + vec -4 0)
   ]
 ```
 
@@ -108,12 +118,12 @@ It'll draw the first inner list, which contains two scribbles, and then it'll dr
 withDotter \d ->
   [
     [
-      stroke 8 #F00 (d To + vec 4 0)
-      stroke 8 #00F (d To + vec -4 0)
+      stroke 8 #F00 (d.To + vec 4 0)
+      stroke 8 #00F (d.To + vec -4 0)
     ]
     [
-      stroke 8 #FF0 (d To + vec 0 4)
-      stroke 8 #0FF (d To + vec 0 -4)
+      stroke 8 #FF0 (d.To + vec 0 4)
+      stroke 8 #0FF (d.To + vec 0 -4)
     ]
   ]
 ```
@@ -136,7 +146,7 @@ Recall that super simple brush from before...
 
 ```haku
 withDotter \d ->
-  stroke 8 #000 (d To)
+  stroke 8 #000 d.To
 ```
 
 This reads as "given a dotter, output a stroke that's 8 pixels wide, has the color `#000`, and is drawn at the dotter's `To` coordinates."
@@ -169,6 +179,7 @@ If you reorder or remove any one of them, your brush isn't going to work!
   You can also specify an alpha channel, for transparent colors---`#RRGGBBAA`, or `#RGBA`.
 
 - The third ingredient is the stroke's _position_.
+  `d.To` is the position of your mouse cursor.
 
 Positions in haku are represented using mathematical _vectors_, which, when broken down into pieces, are just lists of some numbers.
 
@@ -187,22 +198,22 @@ Likewise, negative X coordinates go leftwards, and negative Y coordinates go upw
 
 ---
 
-Vectors in haku are obtained with another function---`vec`---though we don't use it in the basic example, because `d To` already is a vector.
-Vectors support all the usual math operators though, so if we wanted to, we could, for example, add a vector to `d To`, thus moving the position of the dot relative to the mouse cursor:
+Vectors in haku are obtained with another function---`vec`---though we don't use it in the basic example, because `d.To` already is a vector.
+Vectors support all the usual math operators though, so if we wanted to, we could, for example, add a vector to `d.To`, thus moving the position of the dot relative to the mouse cursor:
 
 ```haku
 withDotter \d ->
-  stroke 8 #000 (d To + vec 10 0) -- moved 10 pixels rightwards
+  stroke 8 #000 (d.To + vec 10 0) -- moved 10 pixels rightwards
 ```
 
-Also note how the `d To + vec 10 0` expression is parenthesized.
+Also note how the `d.To + vec 10 0` expression is parenthesized.
 This is because otherwise, its individual parts would be interpreted as separate arguments to `stroke`, which is not what we want!
 
 Anyways, with all that, we let haku mix all the ingredients together, and get a black dot under the cursor.
 
 ```haku
 withDotter \d ->
-  stroke 8 #000 (d To)
+  stroke 8 #000 d.To
 ```
 
 Nice!
@@ -221,10 +232,10 @@ Let's fix that by drawing a `line` instead!
 
 ```haku
 withDotter \d ->
-  stroke 8 #000 (line (d From) (d To))
+  stroke 8 #000 (line d.From d.To)
 ```
 
-We replace the singular position `d To` with a `line`. `line` expects two arguments, which are vectors defining the line's start and end points.
+We replace the singular position `d.To` with a `line`. `line` expects two arguments, which are vectors defining the line's start and end points.
 For the starting position we use a _different_ property of `d`, which is `From`---this is the _previous_ value of `To`, which allows us to draw a continuous line.
 
 ::: aside
@@ -239,8 +250,8 @@ haku also supports other kinds of shapes: circles and rectangles.
 ```haku
 withDotter \d ->
   [
-    stroke 8 #F00 (circle (d To + vec -16 0) 16)
-    stroke 8 #00F (rect (d To + vec 0 -16) (vec 32 32))
+    stroke 8 #F00 (circle (d.To + vec -16 0) 16)
+    stroke 8 #00F (rect (d.To + vec 0 -16) (vec 32 32))
   ]
 ```
 
@@ -292,13 +303,15 @@ In fact, here's the full order of operations in haku for reference:
 
 1. Tight
 
+    1. Function applications: `.`
     1. Arithmetic: `+`, `-`, `*`, `/`
     1. Comparisons: `==`, `!=`, `<`, `<=`, `>`, `>=`
 
 1. Function calls
 1. Loose
 
-    1. Arithmetic
+    1. Function applications: `.`
+    1. Arithmetic and pipelines `|`
     1. Comparisons
     1. Variables: `:`, `=`