update example brushes; add builtin/dashes

static/brush-box.js

@@ -11,8 +11,8 @@ export const builtInPresets = [
         code: `
 -- Try playing around with the values
 -- and see what happens!
-color = #000
-thickness = 8
+color: #000
+thickness: 8
 
 withDotter \\d ->
   stroke thickness color (line (d From) (d To))
@@ -23,20 +23,42 @@ withDotter \\d ->
         id: "builtin/thick",
         name: "Thick",
         code: `
-color = #000
-thickness = 48
+color: #000
+thickness: 48
 
 withDotter \\d ->
   stroke thickness color (line (d From) (d To))
         `.trim(),
     },
 
+    {
+        id: "builtin/dashes",
+        name: "Dashes",
+        code: `
+color: #000
+thickness: 4
+length: 5
+duty: 0.5
+
+or_: \\a, b ->
+  if (a) a
+  else b
+
+withDotter \\d ->
+  visible = mod (d Num) length < length * duty
+  if (visible)
+    stroke thickness color (line (d From) (d To))
+  else
+    ()
+        `.trim(),
+    },
+
     {
         id: "builtin/pencil",
         name: "Pencil",
         code: `
-color = #0003
-thickness = 6
+color: #0003
+thickness: 6
 
 withDotter \\d ->
   stroke thickness color (line (d From) (d To))
@@ -47,16 +69,16 @@ withDotter \\d ->
         id: "builtin/woobly",
         name: "Woobly",
         code: `
-color = #000
-minThickness = 8
-maxThickness = 20
-wavelength = 1
+color: #000
+minThickness: 8
+maxThickness: 20
+wavelength: 1
 
 withDotter \\d ->
-  let pi = 3.14159265
-  let a = (sin (d Num * wavelength / pi) + 1) / 2
-  let range = maxThickness - minThickness
-  let thickness = minThickness + a * range
+  pi = 3.14159265
+  a = (sin (d Num * wavelength / pi) + 1) / 2
+  range = maxThickness - minThickness
+  thickness = minThickness + a * range
   stroke thickness color (line (d From) (d To))
         `.trim(),
     },
@@ -65,28 +87,28 @@ withDotter \\d ->
         id: "builtin/wavy",
         name: "Wavy",
         code: `
-color = #000
-thickness = 4
-amplitude = 50
-wavelength = 1
+color: #000
+thickness: 4
+amplitude: 50
+wavelength: 1
 
-mag = \\v ->
+mag: \\v ->
   hypot (vecX v) (vecY v)
 
-norm = \\u ->
-  let l = mag u
+norm: \\u ->
+  l = mag u
   u / vec l l
 
-perpClockwise = \\v ->
+perpClockwise: \\v ->
   vec (vecY v) (-(vecX v))
 
 withDotter \\d ->
-  let pi = 3.14159265
-  let a = sin (d Num * wavelength / pi) * amplitude
-  let direction = (d To) - (d From)
-  let clockwise = norm (perpClockwise direction) * vec a a
-  let from = d From + clockwise
-  let to = d To + clockwise
+  pi = 3.14159265
+  a = sin (d Num * wavelength / pi) * amplitude
+  direction = (d To) - (d From)
+  clockwise = norm (perpClockwise direction) * vec a a
+  from = d From + clockwise
+  to = d To + clockwise
   stroke thickness color (line from to)
         `.trim(),
     },
@@ -95,19 +117,19 @@ withDotter \\d ->
         id: "builtin/rainbow",
         name: "Rainbow",
         code: `
-wavelength = 0.1
-thickness = 8
+wavelength: 0.1
+thickness: 8
 
-colorCurve = \\n ->
+colorCurve: \\n ->
   abs (cos n)
 
 withDotter \\d ->
-  let pi = 3.14159265
-  let l = wavelength
-  let r = colorCurve (d Num * l)
-  let g = colorCurve (d Num * l + pi/3)
-  let b = colorCurve (d Num * l + 2*pi/3)
-  let color = rgba r g b 1
+  pi = 3.14159265
+  l = wavelength
+  r = colorCurve (d Num * l)
+  g = colorCurve (d Num * l + pi/3)
+  b = colorCurve (d Num * l + 2*pi/3)
+  color = rgba r g b 1
   stroke thickness color (line (d From) (d To))
         `.trim(),
     },